Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: JuisitoFelix en 16 Marzo 2020, 11:56 am


Título: [Resuelto] Crear buscador en web sin usar CMS AYUDA
Publicado por: JuisitoFelix en 16 Marzo 2020, 11:56 am
Buenos días a todos y feliz cuarentena!  ;-)

Llevo poco tiempo en este mundillo del desarrollo web y me ha surgido unas dudas:
- Las páginas web que tienen buscadores internos para buscar contenido propios de su web como crean ese buscador web
normalmente. ¿Cuál es la práctica más extendida? Un plugin de jQuery? php? ....
- El resultado de esta busqueda se indexa en Google, me explico, si en mi web buscan perros y eso general un resultado de 10 elementos. Si
alguien pone en google "nombredemiweb perros" Google indexa ese resultado de mi web en sus resultados de busquedas. En caso de hacerlo
como puedo evitarlo?
- Sabéis la existencia de foros de programación y SEO para poder preguntar estas dudas que me surgen, tambien me
interesaría grupos de telegram de esta temática. Actualmente estoy en stackoverflow y forobeta (aunque este han puesto el
registro pagando)

Gracias a todos por vuestras respuestas!

Un saludo desde mi bunker  :silbar:

Título: Re: Crear buscador en web sin usar CMS AYUDA
Publicado por: WHK en 16 Marzo 2020, 19:39 pm
Hola,

Citar
Las páginas web que tienen buscadores internos para buscar contenido propios de su web como crean ese buscador web normalmente. ¿Cuál es la práctica más extendida? Un plugin de jQuery? php? ....

Bases de datos, consultas SQL a tablas desnormalizadas e indexadas con frases cortas o apache solr:

https://www.mysqltutorial.org/mysql-like/
https://rubygarage.org/blog/database-denormalization-with-examples
https://dev.mysql.com/doc/refman/5.7/en/query-cache.html
https://www.w3resource.com/mysql/mysql-full-text-search-functions.php
https://www.digitalocean.com/community/tutorials/how-to-improve-database-searches-with-full-text-search-in-mysql-5-6-on-ubuntu-16-04
https://stackoverflow.com/questions/2526772/search-for-string-within-text-column-in-mysql

https://lucene.apache.org/solr/
https://www.php.net/manual/es/book.solr.php

Citar
El resultado de esta busqueda se indexa en Google, me explico, si en mi web buscan perros y eso general un resultado de 10 elementos. Si alguien pone en google "nombredemiweb perros" Google indexa ese resultado de mi web en sus resultados de busquedas. En caso de hacerlo como puedo evitarlo?

Con robots.txt : https://www.hostinger.com/tutorials/website/how-to-block-search-engines-using-robotstxt

Citar
Sabéis la existencia de foros de programación y SEO para poder preguntar estas dudas que me surgen, tambien me interesaría grupos de telegram de esta temática. Actualmente estoy en stackoverflow y forobeta (aunque este han puesto el registro pagando)

Ya estás en los mejores lugares, no conozco otro foro mejor para preguntar cosas de seo que forobeta.

Saludos.

Título: Re: Crear buscador en web sin usar CMS AYUDA
Publicado por: JuisitoFelix en 16 Marzo 2020, 20:23 pm
Cita de: WHK en 16 Marzo 2020, 19:39 pm

Muchisimas gracias por las respuestas todo muy claro y conciso  ;-)

Título: Re: Crear buscador en web sin usar CMS AYUDA
Publicado por: @XSStringManolo en 16 Marzo 2020, 21:31 pm
Cuando quieren añadir las búsquedas en Google o navegadores usan get con un servidor. Entonces se realizan las búsquedas a partir de la url. Ejemplo, quiero buscas coches en google. https://google.com/search?q=coches

Si quieres hacerlo interno en la web puedes hacerlo a tu p**a bola. Mira otras páginas y analiza como lo hacen.

Aquí te dejo un ejemplo de tutorialzine que me descargué hoy y me gustó mucho. Usa vue.js y css pero lo puedes implementar perfectamente en javascript vanilla sin mucha complicación.
Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Vue.js Instant Search</title>
  8.  
  9.  
  10.     <style>
  11.     /* Hide un-compiled mustache bindings
  12.     until the Vue instance is ready */
  13.  
  14.     [v-cloak] {
  15.       display: none;
  16.     }
  17.  
  18.     *{
  19.         margin:0;
  20.         padding:0;
  21.     }
  22.  
  23.     body{
  24.         font:15px/1.3 'Open Sans', sans-serif;
  25.         color: #5e5b64;
  26.         text-align:center;
  27.     }
  28.  
  29.     a, a:visited {
  30.         outline:none;
  31.         color:#389dc1;
  32.     }
  33.  
  34.     a:hover{
  35.         text-decoration:none;
  36.     }
  37.  
  38.     section, footer, header, aside, nav{
  39.         display: block;
  40.     }
  41.  
  42.  
  43.     /*-------------------------
  44.         The search input
  45.     --------------------------*/
  46.  
  47.     .bar{
  48.         background-color:#5c9bb7;
  49.  
  50.         background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
  51.         background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
  52.         background-image:linear-gradient(top, #5c9bb7, #5392ad);
  53.  
  54.         box-shadow: 0 1px 1px #ccc;
  55.         border-radius: 2px;
  56.         width: 400px;
  57.         padding: 14px;
  58.         margin: 45px auto 20px;
  59.         position:relative;
  60.     }
  61.  
  62.     .bar input{
  63.         background:#fff no-repeat 13px 13px;
  64.         background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);
  65.  
  66.         border: none;
  67.         width: 100%;
  68.         line-height: 19px;
  69.         padding: 11px 0;
  70.  
  71.         border-radius: 2px;
  72.         box-shadow: 0 2px 8px #c4c4c4 inset;
  73.         text-align: left;
  74.         font-size: 14px;
  75.         font-family: inherit;
  76.         color: #738289;
  77.         font-weight: bold;
  78.         outline: none;
  79.         text-indent: 40px;
  80.     }
  81.  
  82.     ul{
  83.         list-style: none;
  84.         width: 428px;
  85.         margin: 0 auto;
  86.         text-align: left;
  87.     }
  88.  
  89.     ul li{
  90.         border-bottom: 1px solid #ddd;
  91.         padding: 10px;
  92.         overflow: hidden;
  93.     }
  94.  
  95.     ul li img{
  96.         width:60px;
  97.         height:60px;
  98.         float:left;
  99.         border:none;
  100.     }
  101.  
  102.     ul li p{
  103.         margin-left: 75px;
  104.         font-weight: bold;
  105.         padding-top: 12px;
  106.         color:#6e7a7f;
  107.     }
  108.     </style>
  109.  
  110. </head>
  111. <body>
  112.  
  113. <form id="main" v-cloak>
  114.  
  115.     <div class="bar">
  116.         <!-- Create a binding between the searchString model and the text field -->
  117.  
  118.         <input type="text" v-model="searchString" placeholder="Enter your search terms" />
  119.     </div>
  120.  
  121.     <ul>
  122.         <!-- Render a li element for every entry in the computed filteredArticles array. -->
  123.  
  124.         <li v-for="article in filteredArticles">
  125.             <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
  126.             <p>{{article.title}}</p>
  127.         </li>
  128.     </ul>
  129.  
  130. </form>
  131.  
  132. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
  133. <script>
  134.  
  135. var demo = new Vue({
  136.     el: '#main',
  137.     data: {
  138.         searchString: "",
  139.  
  140.         // The data model. These items would normally be requested via AJAX,
  141.         // but are hardcoded here for simplicity.
  142.  
  143.         articles: [
  144.             {
  145.                 "title": "What You Need To Know About CSS Variables",
  146.                 "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
  147.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-100x100.jpg"
  148.             },
  149.             {
  150.                 "title": "Freebie: 4 Great Looking Pricing Tables",
  151.                 "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
  152.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-100x100.jpg"
  153.             },
  154.             {
  155.                 "title": "20 Interesting javascript and CSS Libraries for February 2016",
  156.                 "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
  157.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-100x100.jpg"
  158.             },
  159.             {
  160.                 "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
  161.                 "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
  162.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-100x100.png"
  163.             },
  164.             {
  165.                 "title": "Learn SQL In 20 Minutes",
  166.                 "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
  167.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-100x100.png"
  168.             },
  169.             {
  170.                 "title": "Creating Your First Desktop App With HTML, JS and Electron",
  171.                 "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
  172.                 "image": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-100x100.png"
  173.             }
  174.         ]
  175.     },
  176.     computed: {
  177.         // A computed property that holds only those articles that match the searchString.
  178.         filteredArticles: function () {
  179.             var articles_array = this.articles,
  180.                 searchString = this.searchString;
  181.  
  182.             if(!searchString){
  183.                 return articles_array;
  184.             }
  185.  
  186.             searchString = searchString.trim().toLowerCase();
  187.  
  188.             articles_array = articles_array.filter(function(item){
  189.                 if(item.title.toLowerCase().indexOf(searchString) !== -1){
  190.                     return item;
  191.                 }
  192.             })
  193.  
  194.             // Return an array with the filtered data.
  195.             return articles_array;;
  196.         }
  197.     }
  198. });
  199. </script>
  200. </body>
  201. </html>

Título: Re: Crear buscador en web sin usar CMS AYUDA
Publicado por: WHK en 16 Marzo 2020, 23:24 pm
Personalmente no te recomiendo que lo hagas vía javascript con valores en memoria como el ejemplo de @XSStringManolo porque si tienes 500 posts tendrás que cargar los 500 temas completos en memoria ram para realizar las búsquedas. Cargar todas las paginas en una sola petición y mandarlas todas a variables de javascript es una locura.

Es mucho mas recomendable realizar una petición post común y corriente a traves de unformulario y desde php realizar la búsqueda en la base de datos, de esta manera no sobrecargas el navegador ni al servidor ya que para eso existen las indexaciones de contenido y la desnormalizaicón de datos.

Lo que algunos hacen a traves de javascript es traer posibles resultados desde una solicitud REST vía json pero puede que te complique mucho más la existencia si aun no manejas esos conceptos.

Cuando hagas un buscador de contenido te toparás con problemas muy comunes, por ejemplo, el paginador, límites de contenido, tipo de permisos para ver contenido y que tipo de contenido buscar, realizar busquedas en multiples tablas de posibles resultados, ahi tendrás que desnormalizar utilizando una columna con el identificador de la columna donde debes ir a buscar el valor final o simplemente tener un buscador por separado de cada tipo de dato, evitar denegaciones de servicio por exceso de consultas y sobrecarga de datos, etc.

El camino para crear un buen buscador sin errores es dificil, yo te recomiendo el camino fácil el cual es utilizar algún framework conocido ya que muchos integran por defecto buscadores o paginadores de resultados como active record de codeigniter para php.

Mira etso: https://www.guru99.com/codeigniter-pagination.html

Saludos.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines