Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje09-06-2011, 13:36 (UTC)    
Título del mensaje: [Tutorial-JavaScript-HTML] Buscador web en Js

Hola!,

En esta ocasión les traigo un buscador interno totalmente en Js (javascript). Este buscador interno lo que van a necesitar es solamente saber subir archivos FTP (deben tener hosting externo) o Algún Upload de archivos que soporte archivos .css y .js
Vale aclarar que tiene que ser un Hosting confiable ya que hoy en dia no se puede confiar en algunos hostings
En caso de usar algun hosting y como subir los archivos miren este tutorial
+ http://tokarg.es.tl/Tutorial-FTP-00webhost.htm

1- Debemos crear un archivo que se llame db.js sera nuestra base de datos.
Cita:
/* XSearch version 5.2 - Fichero de BD */

/* Comienza Opciones de Configuracion */

searchname = 'xsearch-5.2.htm' /* Nombre de la pagina del buscador */

usebannercode=true
ButtonCode = "<img src='searchbutton.gif' border=0>"

function templateBody() {
document.write('<html><head><'+
'script language="javascript">'+
'<'+'/'+'script'+'></head><body bgcolor="#ffffff" text="#000000" link="#000099" vlink="#996699" alink="#996699"><Center><font face="Arial" size="3"><font face=Verdana size=12><b>XSEARCH</b><i>5.2</i></font><table border=0 width=640><tr><td>');/* Modifica lo que dice en la Pagina */
}

function templateEnd() {
document.write('</td></tr></table></font></center></body></html>');
}
function bannerCode() {
}

/* Finaliza Opciones de Configuracion */

/* Comienza Registros de la BD */

add("<a href='dirección_de_la_pagina'>JSVCL2</a>","KEYWORDS o PALABRAS CLAVES","COMENTARIO DE LA PAGINA")

/* Finaliza Registros de la BD */


El color Rojo Oscuro es donde estara el buscador en tu pagina, si es un PWG debes utilizar la siguiente url http://www.tuweb.es.tl/titulo.htm
El color Naranja es la imagen del boton en caso de no querer botón debes sacar el siguiente código
Código:
<img src='searchbutton.gif' border=0>
y añadir tu texto. Por ejemplo Buscar
El color Marrón es el titulo que tendra el buscador.
El color Rojo es para añadir mas paginas al buscador.
Para añadir mas paginas abajo del codigo pegas el siguiente:
Código:
add("<a href='dirección_de_la_pagina'>JSVCL2</a>","KEYWORDS o PALABRAS CLAVES","COMENTARIO DE LA PAGINA")

Ej de como tiene que ser completado:
Código:
add("<a href='www.ipwg.es.tl'>iPwG Ayuda Web Master</a>","Ayuda,Tutoriales,Aportes,Codigos","En iPWG te ayudaremos a que puedas armar tu web de la mejor manera.")


2- Ahora debemos crear un archivo xsearch.css con el siguiente código:
Código:
h3 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color:#6f6f6f}
p {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt}
li {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; margin-left: 5%;}
.xtitle { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12pt; font-weight: normal}
.xresult { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; font-weight: normal}
.xlocation { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10pt; color:green; font-weight: normal}
.xsmall { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; color:green; font-weight: normal}


3- Ahora debemos ir a controlar paginas y añadir el código de buscador. Vale recalcar que la pagina que crees debe ser añadida en el código de punto 1.
Código:
<script language="javascript" src="[color=red][b]xsearch-5.2.js[/b][/color]"></script>
<script language="javascript" src="[color=orange][b]db.js[/b][/color]"></script>
<body bgColor="#ffffff">
<script language="javascript">
   initXsearch();
</script>

El color Rojo debes añadir la url del archivo llamado xsearch-5.2.js que esta en el punto 4
El color Naranja debes añadir la url del archivo llamado db.js que esta en el puto 1

4- Bueno ahora debemos hacer un archivo .js llamado xsearch-5.2.js no se asusten que es mucho codigo pero poco por editar
Cita:
/* XSearch Engine version5.2 */
/* developed by P.Bestebroer */
/* http://www.dynamic-core.net */

function trecords(){
this.index=(trecords.count++)
this.link=''
this.keywords=''
this.description=''
return this
}
trecords.prototype.set=function(link,keywords,description) {
this.link=link
this.keywords=keywords
this.description=description
}
trecords.prototype.searchstring=function() { return this.link+' '+this.keywords+' '+this.description }
trecords.prototype.count=0

function add(link,keywords,description) {
al=records.length
records[al]=new trecords()
records[al].set(link,keywords,description)
}

records = new Array()
finds=0
sites=0
version="v5.2"
andresult=false
SortResults=true
display_start=0
displast=10
function qsort(f, l){ // not used anymore, causes stack-overflow in large database
// Qsort function by Rob B.
var a=f
var b=l
var s
var m = results[(a+b)>>1].val
while (a<=b) {
while (results[a].val>m) {a++}
while (m>results.val) {b--}

if (a<=b) {
s=results[a]
results[a]=results[b]
results[b]=s
a++
b--
}
}
if (f<b) this.qsort(f, b)
if (a<l) this.qsort(a, l)
}
function bsort() {
for (var i=results.length-1; i>=0; i--) {
for (var j=i; j>=0; j--) {
if (results[i].val>results[j].val) {
s=results[i]
results[i]=results[j]
results[j]=s
}
}
}
}

function searchAll(keyword){
var timeA=new Date()
var nw=0
finds=0
sites=0

var x = parseIt(keyword)
if(x == -1) return
total_keywords=x

document.open()
document.clear()
document.write('<link rel="stylesheet" href="xsearch.css
">')
AddBody()

if (keyword.length>50) keyword=keyword.substring(0,60)+"..."

results=new Array()
for (q=0; q<records.length; q++) {
results[q]=new Array()
results[q].rec=q
results[q].val=0
}

for (nw=0; nw<keywords.length; nw+=1) search(keywords[nw])
if (andresult) {
for (a=0; a<results.length; a+=1) {
if (results[a].val>0) {
if (results[a].val<=(total_keywords-1)<<1) {
results[a].val=0
sites-=1
}
}
}
}
if (SortResults && keywords!='[all]') bsort()

// Now we build the output page
displast=display_start
displast+=10
if (displast>sites) displast=sites

var timeB=new Date()

if (finds==0) { display_start=-1; displast=0 }
document.write("<center><h3>Resultados <b>"+(display_start+1)+"-"+(displast)+"</b> de <b>"+sites+"</b> para <b>"+keyword+"</b> Tiempo de búsqueda <b>"+((timeB-timeA)/1000)+"</b> segundos.</h3></center>")

if (displast>sites && finds!=0) displast=sites+1


if (finds==0) {
document.write("<h3><font color=green>no se encontró <b>''"+keyword+"''</b></font></h3>"+
"<p>La palabra - <b>"+keyword+"</b> - no se encuentra en la base de datos.</p>"+
"<LI>Verifique que haya deletreado bien la palabra.</li>"+
"<LI>Intente nuevamente utilizando otra palabra clave.</li>"+

"<LI>Pruebe ingresando varias palabras en un mismo campo.</li></span>"+
"</p>")
DisplayXSearch()
document.close()
return
}

q2=display_start
q3=displast
for (q=display_start; q<q3; q+=1) {
if (results[q].val>0) {
rc=results[q].rec
document.write("<span class='xtitle'>"+records[rc].link+"</span><br>")
x1=records[rc].link.indexOf('http://')
if (x1==-1) x1=records[rc].link.indexOf('href=')+5
else x1+=7
x2=records[rc].link.indexOf('>')-1
if (x1>0 && x2>0) {
tmp=records[rc].link.substring(x1,x2)
x2=tmp.indexOf(' ')
if (x2>0) tmp=tmp.substring(0,x2)
if (tmp.substring(0,1)=="'") tmp=tmp.substring(1,tmp.length-2)
if (tmp.substring(0,1)=='"') tmp=tmp.substring(1,tmp.length-1)
document.write("<table border=0 width=500><tr><td><span class='xresult'>"+records[rc].description+"</span></td></tr></table><span class='xlocation'>"+tmp+"</span><br><br>")
}
q2++
}
}

if (finds>10) {
document.write("<BR>")
pages=Math.round(finds/10)
if (finds%10<6) pages++

// Create the parameter string
paramstring=searchname+"?keywords="+keyword+"&and="+andresult+"&sort="+SortResults

document.write("<center><span class='xsmall'>")
if (display_start>0) document.write("<a href='"+paramstring+"&disp="+(display_start-10)+"'>anterior</a>")
document.write("&nbsp;&nbsp;&nbsp;")

for (i=1; i<=pages; i+=1){
if ((((i-1)*10)+1)<=sites) document.write("<a href='"+paramstring+"&disp="+(((i-1)*10))+"'>"+i+"</a>&nbsp&nbsp ")
}
document.write("&nbsp;&nbsp;&nbsp;")
if (displast<=sites) document.write("<a href='"+paramstring+"&disp="+(displast)+"'>siguiente</a>")
document.write("</span></center>")
}
DisplayXSearch()
document.close()
}

function Cat() {
document.open()
document.clear()
document.write()
AddBody()
DisplayXSearch()
document.close()
}

function stripInput(key) {
while(key.substring(0,1) == "," || key.substring(0,1) == " " ) key = key.substring(1,key.length)
while(key.substring(key.length-1,key.length) == "," || key.substring(key.length-1,key.length) == " ") key = key.substring(0,key.length-1)
return key
}

function parseIt(key) {
key=stripInput(key)+" "
var y=0

while(key.indexOf(" ") > 0) {
if (key.substring(0,1)=='"') {
var pos=key.indexOf('"',2)
keywords[y]=key.substring(1,pos)
keywords[y]=stripInput(keywords[y])
y++
key=key.substring(pos+1,key.length)
} else {
var pos=key.indexOf(' AND ')
if ((pos>0) && (key.indexOf(' ')>=pos)) {
pos=key.indexOf(' ',pos+5)
keywords[y]=key.substring(0,pos)
keywords[y]=stripInput(keywords[y])
y++
key=key.substring(pos+1,key.length)
if (key.substring(0,4)=='AND ') {
pos=keywords[y-1].indexOf(' ')+5
key=keywords[y-1].substring(pos,keywords[y-1].length)+' '+key
}
} else {
var pos=key.indexOf(' OR ')
if ((pos>0) && (key.indexOf(' ')>=pos)) {
pos=key.indexOf(' ')
keywords[y]=key.substring(0,pos)
keywords[y]=stripInput(keywords[y])
if (keywords[y]!=keywords[y-1]) y++
key=key.substring(pos+1,key.length)
pos=key.indexOf('OR ')
key=key.substring(pos+3,key.length)
pos=key.indexOf(' ')
keywords[y]=key.substring(0,pos)
keywords[y]=stripInput(keywords[y])
y++
key=key.substring(pos+1,key.length)
if (key.substring(0,3)=='OR ') key=keywords[y-1]+' '+key
} else {
var pos = key.indexOf(" ")
keywords[y]=key.substring(0,pos)
keywords[y] = stripInput(keywords[y])
y++
if(y > 50) return -1
key=key.substring(pos+1,key.length)
}
}
}
}
return y-1
}

var keywords = new Array()
var results

function AddBody() {
var keytext='"'+searchname+'?keywords="+'
var andtext='"&and="+'

document.write('<script>function doSearch(){'+
'searchwords=document.searchform.searchwords.value; '+
'while (searchwords.indexOf(" ")>-1){ pos=searchwords.indexOf(" ");'+
'searchwords=searchwords.substring(0,pos)+"+"+searchwords.substring(pos+1); }'+
'document.location='+keytext+' searchwords+'+andtext+'"0"}'+
'<'+'/'+'script>'
)

templateBody()
document.write("<form name='searchform' method='post' action='javascript:doSearch()'><table border='0' width='100%'><tr><td align='center'><font face='Arial, Helvetica, sans-serif' size='3'><input name='searchwords' type='text' size='30'>&nbsp;&nbsp;<a href='javascript:doSearch()'>"+ButtonCode+"</a></font></td></tr></table></form><hr size=1>")
if (usebannercode) bannerCode()
}

function DisplayXSearch() {
// This line can be removed, but please don't add anything like
// copyright by <your name here> because that's not allowed, and
// if you remove or change this line, make sure there is some credit here
// and a link to www.dynamic-core.net so that other people can also
// get their hands on this FREE search engine.. Thank you.
document.write("<h3><center>Este buscador esta Creado por P. Bestebroer</center></h3>")
templateEnd()
}

function search(keyword) {
var hit=0
var addcomplete=0

for (q=0; q<records.length; q++) {
addcomplete=0
search_parm=" "+records[q].searchstring()+" "
search_parm=search_parm.toLowerCase()

if (keyword.indexOf(' AND ')>0) {
firstword=keyword.substring(0,keyword.indexOf(' ')).toLowerCase()
lastword=keyword.substring(keyword.indexOf(' AND ')+5,keyword.length).toLowerCase()
if ((search_parm.indexOf(" "+firstword+" ") != -1) && (search_parm.indexOf(" "+lastword+" ")!= -1 )) {
hit++
finds++
if(hit<2) {
if (results[q].val==0) sites++
results[q].val +=2
}
}
} else {
keyword=keyword.toLowerCase()
if ((search_parm.indexOf(" "+keyword+" ") != -1) ||(keyword=="[all]")) {
hit++
finds++
if(hit<2) {
if (results[q].val==0) sites++
results[q].val+=2
}
} else {
// check for a half hit (ie. search:share find:SHAREware)
if (search_parm.indexOf(keyword) != -1) {
hit++
finds++
if(hit < 2) {
if (results[q].val==0) sites++
results[q].val+=1
x=search_parm.indexOf(keyword)+keyword.length
pos=search_parm.substring(1,x-keyword.length)
while (pos.indexOf(" ")!=-1) {
y=pos.indexOf(" ")
pos=pos.substring(y+1,pos.length)
}
if (pos.length<=2) addcomplete++

pos=search_parm.substring(x,search_parm.length)
fullresult=search_parm.substring(x,x+pos.indexOf(" "))

if (fullresult.length<=2) addcomplete++
if (addcomplete>1) results[q].val+=1
}
}
}
}
hit=0
}
}

var searchwords = ''
var newload = true

function initXsearch() {
if (searchwords!='') searchAll(searchwords)
else if (newload) Cat()
}

function tparams(){
parameters=document.location.search
parameters=unescape(parameters.substring(1,parameters.length)+'&')

this.params=new Array()
i=0
while (parameters.indexOf('&',0)!=-1) {
al=this.params.length
this.params[al]=new Array()

tmp=parameters.substring(0,parameters.indexOf('&',0))
parameters=parameters.substring(parameters.indexOf('&',0)+1)

if (tmp.indexOf('=')!=-1) {
this.params[al].command=tmp.substring(0,tmp.indexOf('='))
this.params[al].value=tmp.substring(tmp.indexOf('=')+1)
} else {
this.params[al].command=tmp
this.params[al].value=''
}
}

return this
}
tparams.prototype.getValue=function(param){
value=''
param=param.toLowerCase()
al=this.params.length
for (var i=0; i<al; i+=1) if (this.params[i].command==param) value=this.params[i].value
return value
}

params=new tparams()
if (params.getValue('keywords')!=''){
searchwords=params.getValue('keywords')
origsearchwords=searchwords
while (searchwords.indexOf('+')>-1) {
pos=searchwords.indexOf('+')
searchwords=searchwords.substring(0,pos)+' '+searchwords.substring(pos+1)
}
}
if (params.getValue('sort')!='')
if (params.getValue('sort')=='0' || params.getValue('sort')=='false') SortResults=false
else SortResults=true
if (params.getValue('and')!='')
if (params.getValue('and')=='0' || params.getValue('and')=='false') andresult=false
else andresult=true
if (params.getValue('disp')!='') display_start=parseInt(params.getValue('disp'))

El color Rojo deben añadir el .css que fue creado en el punto 2
Nota:hay unas lineas de texto pero a mi parecer no son necesarios editarlas ya [/u]que son el texto que aparece cuando no se encuentra enlaces, el tiempo de búsqueda,etc que no son importantes editarlas.

Vista Previa del buscador:

+ http://img.webme.com/pic/i/ipwg/1a.png

+ http://img.webme.com/pic/i/ipwg/2a.png

+ http://img.webme.com/pic/i/ipwg/3a.png

+ http://img.webme.com/pic/i/ipwg/4a.png

Derechos del Autor
Desarrollado por P.Bestebroer
http://www.dynamic-core.net

Para consultar hacerlas aquí.

Saludos


Ultima edición por ipwg el Mie Sep 28, 2011 8:50 pm; editado 5 veces
Mensaje09-06-2011, 14:07 (UTC)    
Título del mensaje:

Muy buen tutorial iPWG, pero seria bueno ver un demo.

Este tema será movido a su respectivo Foro de selección próximamente.

Gracias,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mensaje10-06-2011, 01:32 (UTC)    
Título del mensaje:

Hola,
es lo mejor que he visto en mucho tiempo y la verdad biene muy bien para PWG como una alternativa para un buscador con PHP.

Saludos!
______________
Mensaje10-06-2011, 13:06 (UTC)    
Título del mensaje:

Hola kilometro6

Si, es el mejor. Ademas ahora que fue actualizado decidí traerlo aquí como un aporte a todos ustedes.
La versión anterior no traía la opción siguiente por lo que se hacia demasiado largo cuando se encontraban mas de 10 resultados.
Ademas no utiliza bd. Cosa que se le puede agregar que lo eh visto. Pero a mi gusto es mejor así, ya que es mas fácil editarlo.

Saludos!
Mensaje10-06-2011, 21:30 (UTC)    
Título del mensaje:

Esto yo ya lo sabia, es muy bueno. La verdad te felicito
______________
Luciano Jmz
Luciano Jmz
Mensaje10-06-2011, 21:45 (UTC)    
Título del mensaje:

Hola exelente aporte muy util te felicito
______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje11-06-2011, 15:08 (UTC)    
Título del mensaje:

@ayuda031 y tumamalaflogger Muchas gracias por sus comentarios. Siempre es bueno aportar los conocimientos en la comunidad

Saludos!
Mensaje11-06-2011, 16:48 (UTC)    
Título del mensaje:

Buen aporte IPWG, este si me gusto mucho, se parecen a los de blogger.
______________
Off
Mensaje11-06-2011, 17:02 (UTC)    
Título del mensaje:

fafo-ayuda escribió:
Buen aporte IPWG, este si me gusto mucho, se parecen a los de blogger.


Muchas gracias fafo, se agradece que comentes y que visites el aporte

Saludos!


Ultima edición por ipwg el Sab Jun 11, 2011 1:02 pm; editado 1 vez
Mensaje13-06-2011, 22:54 (UTC)    
Título del mensaje:

Mira ipwg te agradezco que me pases este tutorial para ver pero me perdi en el tutorial de TokArg

Me podrias subir los archivos vos a el hosting FTP de 000WebHost??? es que no entendi nada u.u cerebro y la CONciencia de dios... ._.

Ayudaa porfaaa
______________
Entra a la web!!
Publica tu web en la mia y la mia en la tuya.
Buscamos Staff.Click Aqui
Enlazanos! :D
Mensaje13-06-2011, 23:21 (UTC)    
Título del mensaje:

Hola!,

En estos dias te traigo un video para que entiendas bien

Saludos!
Mensaje13-06-2011, 23:27 (UTC)    
Título del mensaje:

Primera ves que veo Buen Post.
Mensaje13-06-2011, 23:28 (UTC)    
Título del mensaje:

Muy buen aporte, aunque se hacer uno mucho mejor con php lastima que no funcione con PWG pero bueno el aporte esta genial

Salu2
______________
Miguel García | Desarrollador web freelance
Mensaje13-06-2011, 23:28 (UTC)    
Título del mensaje:

mipio07 escribió:
Primera ves que veo Buen Post.

Muchas gracias por tu comentario es bueno que te guste

Saludos!
Mensaje14-06-2011, 12:03 (UTC)    
Título del mensaje:

ipwg escribió:
Hola!,

En estos dias te traigo un video para que entiendas bien

Saludos!


Ok muchas graciah ipwg ss un kpo
Te voy a enlazar :$
______________
Entra a la web!!
Publica tu web en la mia y la mia en la tuya.
Buscamos Staff.Click Aqui
Enlazanos! :D
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group