Entradas

Mostrando las entradas etiquetadas como html

Poner en negritas parte de un texto en una página

Imagen
Este efecto lo he visto en un sitio llamado DePeru.com en sus noticias hay un texto que no está en negrita con la etiqueta <strong> o <b> sino que se convierte en negrita gracias a Jquery (en el código fuente). El uso de este efecto se puede trasladar a muchos otros escenarios donde podríamos necesitar cambiar los estilos para nuestras páginas. Para este caso el webmaster ha detectado que todos sus textos tienen un <p> que empieza con una raya (o guión) ... visto desde el código fuente por supuesto. <p>- Multiplicar el impacto -</p> Para cualquier otra aplicación podría ser un <h1>, <a>... etc El truco es simple, debajo de la llamada al archivo Jquery externo y antes de finalizar el body agregar el script : <script> $( ".contenido p:contains('- ')" ).css( "font-weight","bold" ); </script> </body> </html> Dónde :     .contenido es el class que contiene al texto, lu

Protege tus fotos propias con imágenes sobrepuestas

Imagen
En internet hay 03 tipos de usuarios, los novatos, los intermedios y los expertos, para estos últimos que tienen altos conocimientos, será imposible intentar bloquear una imagen, sin embargo para los otros dos primeros y que son la mayoría si es viable. Un truco poco difundido es usar imágenes transparentes, normalmente gif o png que se colocan encima (sobreponer) de la imagen que se desea proteger. El usuario al dar clic derecho no podrá grabar la imagen protegida, sólo tendrá acceso a grabar la imagen transparente que se encuentra encima. Las imágenes transparentes la podemos crear en cualquier tamaño, se pueden estirar sin problema porque no tienen información visual y con cualquier programa gratuito se pueden realizar. Veamos el ejemplo, protegeremos la imagen que se ve: Aún poniendo la foto en una plataforma gratuita como blogger es posible proteger las fotos, ahora veamos el código: <img alt="foto escondida" height="384" src="

Superponer una imagen sobre otra con CSS

Imagen
El otro día me encontré con la necesidad de superponer una imagen sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto. Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo. Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV. <div style="position:relative"> <img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" /> <div style="position:absolute; top:0; left:0;"> <a href="http://www.guiaplaza.com"> <img border="0" src="marco_chistes.png" width="300" height="300" /> </a> </div> </div> Si desean la opción completa es la siguiente: <html> <he

Qué son los Elementos, Etiquetas, Atributos y Eventos en HTML

Imagen
Estos son conceptos que muchas veces confunde a los nuevos webmasters, es eso que debemos saber qué es cada uno de ellos. Con la llegada de HTML5 algunas etiquetas, atributos y eventos están pasando a descontinuarse, es por eso que debemos tener cuidado al escribir nuestro código en las páginas web (por ejemplo ya no se debe usar <font> como etiqueta).

Nuevos API de búsquedas que te pueden interesar

Imagen
API (interfaz de programación de aplicaciones) Si Google, Bing y Yahoo dejan de ofrecernos API de búsquedas para enriquecer nuestro contenido, no te preocupes hay más sitios con contenido diverso que podría interesarte: Blekko API - Resultados de búsquedas: Este es un nuevo buscador que promete ser mejor que los actuales que tienen el monopolio y hasta ahora lo está logrando, suprimiendo a las páginas de spam más conocidas y que representan el 80% de los resultados de los buscadores tradicionales. Su API es rápida y funciona con JSON y XML, los desarrolladores prometen que poco a poco irán entregando mejores datos conforme su empresa crezca y ellos se modernicen. http://help.blekko.com/index.php/does-blekko-have-an-api/ IconFinder API - Resultados de íconos: Este es un proveedor de iconos 2d y 3d para webmasters,  desarrolladores y hasta público en general, tiene una basta lista de íconos para los sitios web o cualquier aplicación que se desee desarrollar. Toda

Cómo agregar un trozo de html con PHP

Imagen
función include en php Muchos Webmasters que tienen sitios con hosting propio muchas veces desean agregar un banner, links o cualquier etiqueta de manera automática en todas sus páginas, para esto se usa una función llamada "include" PHP es un lenguaje del lado del servidor que usan casi todos los blogs y cms, por ejemplo el famoso WordPress funciona con php y mysql. Si ya sabes un poco de html y javascrip no te será dificil aprender un poco de php básico, la función que veremos hoy es tan útil como esencial y se llama INCLUDE.

Agregar un link a tu Página de Google+ y el botón +1

Imagen
Google+ es la nueva alternativa de parte de esta empresa para hacer frente a Facebook y como siempre espera apoyarse en los webmasters de todo el mundo para destacar. Ya hace tiempo se había liberado una página para crear el botón de Google+ http://www.google.com/webmasters/+1/button/ Hoy en día Google quiere que muchos publishers creen sus páginas en Google+ y las difundan y ha creado una página para configurar ambos al mismo tiempo:

La facilidad de la propiedad Shorthand en CSS

Imagen
Usar el sentido horario Muchos de nosotros usamos las hojas de estilo (CSS) a diario y cuando se aprende con la práctica a veces se nos escapa la teoría básica que aunque es muy sencilla, resulta útil en todo momento. Para las hojas de estilo es imprescindible ahorrar espacio reduciendo y abreviando las reglas para conseguir mayor velocidad en nuestras páginas web, como sabemos hoy en día los dispositivos móviles acceden a las mismas páginas, pero tienen la peculiaridad que no son tan rápidas como los ordenadores y laptops. Hay varias propiedades cuyos valores se pueden agrupar con lo que conseguimos ahorrar espacio visible y reducir el tamaño de los archivos. Por ejemplo: margin-top: 10px; margin-bottom: 5px; margin-right: 12px; margin-left: 15px; Se puede usar en reemplazo: margin: 10px 5px 15px 20px; Y el orden de los valores se definen de acuerdo a las manecillas del reloj o conocido como sentido horario : 10px  » arriba. 5px » derecha. 15px  » aba

Modo Paranoico en tu Hosting

Imagen
Paranoico cierra todo Para los webmasters más avanzados que manejan un hosting propio y hasta un servidor dedicado ya habrán escuchado o leído este término por algunos lugares y no es un estado técnico en broma. Los hackers, más aún un crackers acostumbran apoderarse de servidores privados para sus fines traviesos en el caso de los primeros y para actos delincuenciales para estos últimos. Los crackers normalmente se apoderan de espacios de hosting y servidores para enviar spam o para agregar códigos maliciosos en las páginas web para con esto infectar a los visitantes y apoderarse por consiguiente de los ordenadores de los usuarios. El modo Paranoico es una configuración cerrada que no permite hacer algún cambio en las configuraciones y lo usan muchos sitios web para evitar ataques y/o infiltraciones desconocidas.

Primeros pasos para migrar a HTML5

Imagen
La historia de los estándares la podemos encontrar por internet, pero la experiencia de cada webmasters sólo la podemos saber de primera mano y aquí va. El primer lugar html5 sólo funciona en los navegadores más modernos, cosa que nos es problema porque según las estadísticas la mayoría de usuarios usan navegadores actualizados. Otro punto importante es que html5 no es nada sin las hojas de estilo (CSS), muchos ejemplos que están por internet se ven muy bonito porque tienen un css bien configurado. Muchas etiquetas y parámetros dejan de usarse en html5 y nuevas entran al estándar:

Patrones de URL para configuraciones en Google CSE

Imagen
Muchos webmasters no tienen claro al inicio la diferencia entre los diferentes patrones que se usan para las URL y es muy normal cuando comenzamos. En Google CSE se necesita usar patrones de url para configurar incluir o excluir sitios o partes de sitios en los resultados del buscador. La siguiente tabla explica en forma clara como trabajan los patrones de url. --------- Patrón: www.guiaplaza.com/ ------------ cubre una sola página Alcance www.guiaplaza.com/ guiaplaza.com/ No cubre madrid.guiaplaza.com www.guiaplaza.com/barcelona

Uso correcto de BR - retorno de carro en html

Imagen
Mucha información en internet está desactualizada y podemos encontrar diferentes opiniones, pero lo mejor es ver los estándares e inclusive dar una mirada al código fuente que usan los más grandes como Google o Yahoo. En los últimos años todos los estándares han ido evolucionando y los navegadores se han ido adaptando a todo esto, es por eso que si aún tenemos páginas antiguas debemos ir pasándolas a la modernidad. El clásico <BR> que conocíamos anteriormente se convirtió en <BR />, en estos últimos años todas las etiquetas deben ser cerradas con /> El BR es conocido en castellano como «retorno de carro» más claro bajar o ir a la siguiente línea, para los que tenemos recuerdo de lo que era una máquina de escribir, sabemos lo que eso es, "una palanca al final del roddillo" que se jalaba para bajar a la siguiente línea, cuando fue llevado a la computación se comenzó a usar la tecla "enter o intro" Retorno de carro o salto de línea 1.0

Uso correcto de meta Refresh

Imagen
Los webmasters que tienen un sitio web con hosting propio tienen plantillas o páginas personalizadas de las cuales tienen todo el control y es muy importante usar todos los recursos que le da la potencia de controlar los códigos. El meta Refresh es una etiqueta que permite Actualizar una página web como si se pulsara F5, lo bueno es que lo hace dentro de los segundos que se le programe. Si se le poner cero (0) el refresco será inmediato. <meta http-equiv="refresh" content="5" /> También puede servir para redirigir de una página a otra dentro de X segundos. <meta http-equiv="refresh" content="5; url=http://www.guiaplaza.com" /> Para usar el Meta Refresh hay que tener en cuenta lo siguiente: Si tu página cambia de contenido constantemente, o mejor dicho es actualizada con nuevos ingresos como lo puede ser un listado de noticias o un directorio con nuevos registros si puedes usar el meta refresh. Para configurar correct

Elimina el Vínculo de tus imágenes en Blogger

Imagen
Sin duda blogger es la mejor plataforma para los blogueros que usamos Adsense, si bien es cierto que Wordpress es muy bueno, también es cierto que no deja colocar publicidad en su versión gratuita, por lo que los webmasters que rentabilizamos nuestras bitácoras preferimos blogspot. Al parecer Google nos está dando poco a poco mejores herramientas para los blogs, pero como que no nos la entrega completamente, recientemente nos dio la opción de algo tan simple como colocar un favicon propio (ícono representativo junto a tu URL). Hasta ahora no se nos da la oportunidad de quitar el enlace o vínculo a las imagenes que ponemos en cada post, así sean nuestras propias fotos, pero hay un truco para eliminarlo, veamos el código: Subimos esta imagen: Imagen subida desde nuestro ordenador El código generado es el siguiente: <a href="http://2.bp.blogspot.com/-FPzVHPaNADY/TlLpBK9Tf6I/AAAAAAAAALk/53ngelGkufY/s1600/concursogoogle.gif" imageanchor="1" style=&quo

Con « _blank » No pierdas tus visitas con los vínculos externos

Imagen
Con frecuencia hacemos referencia a vínculos externos y lamentablemente perdemos la visita, más aún cuando usamos sistemas de bitácoras como blogger, wordpress, joomla, mambo, etc. En los cuales no tenemos un manejo interno de las etiquetas html. Lo bueno es que casí todas estas plataformas de blogs tienen una opción para editar el html, así que luego de elaborar un artículo, hay que editar y buscar los enlaces (vínculos o links) y agregarles _blank con la finalidad de que se abra una nueva ventana de la siguiente manera: Un enlace normal tiene el código: <a href="http://www.guiaplaza.com" >Vínculo a GuiaPlaza.com</a> Debemos agregar: <a href="http://www.guiaplaza.com" target="_blank" >Vínculo a GuiaPlaza.com</a> El resultado es el siguiente:     Vínculo a GuiaPlaza.com Con esto cuidaremos las visitas a nuestro sitio web y las referencias siempre serán hechas, pero con una ventana nueva.

Blogger utiliza « nofollow » en sus vínculos de comentarios

Imagen
rel : nofollow Si pensabas o leíste que era bueno poner comentarios por todos los blogs que encuentres, estas equivocado, desde hace buen tiempo muchos sitios web utilizan el atributo:  rel="nofollow" para evitar los 'comentarios de spam' que saturan el mundo de las bitácoras.  El atributo del valor:  rel="nofollow" se usa dentro de la etiqueta  HREF, modificando sus parámetros, por ejemplo: <a href="http://www.thiux.com" rel="nofollow" >Correo Personalizado</a> El Nofollow le dice a Google y otros buscadores que el enlace que está mostrando no lo siga y más aún no le asigne valor en su ranking, muy importante esto para google y su PageRank. Nofollow, se usa en una gran cantidad de blogs, foros y hasta en wikipedia, lo que ha reducido los comentarios de spam.

Tooltips o burbujas para tus vínculos

Imagen
Una opción para facilitar a los usuarios la navegación es mostrarles algunos niveles de ayuda, estos se pueden dar tácitos o invisibles que vayan apareciendo conforme realizan algunas acciones. Estas acciones se dan normalmente cuando tenemos el control de las plantillas y/o cuando poseemos un hosting propio. Uno de los trucos más sencillos es la famosa etiqueta <A> La etiqueta <a> tiene una opción para mostrar un pequeño mensaje tipo tooltip cuando se posa el puntero del mouse sobre el vínculo, el código es el siguiente: <a href="http://www.guiaplaza.com/webmessenger/" title="Los mejores mensajeros desde la web">WebMessenger</a> Aquí el ejemplo funcionando:  WebMessenger verá que posicionando el punterto del ratón, sin dar clic, emerge el mensaje que hemos agregado. La sencillez de esta etiqueta nos ahorra mucho tiempo de procesamiento, debido a que los javascript deben usarse en circunstancias obligatorias, debido a que estas

Cómo terminar los vínculos en tus etiquetas HREF

Imagen
En un anterior artículo ya habíamos hablado de los vínculos absolutos y relativos , ahora es bueno especificar como terminar un enlace dentro las etiquetas del " href ". Normalmente si algunas vez te has dado cuenta en las direcciones URL de la barra de direcciones hay direcciones que automáticamente usan la barra   / al final y otras que no. Cuando se entra a un dominio propio, el servidor entrega el archivo index.php, index.html o cualquier otro que se encuentre configurado como predeterminado al sitio web. Los blogs usan direcciones personalizadas  que no terminan con la barra / Las barras se activan cuando se ingresa a una carpeta por lo que si trabajas con un hosting propio es bueno uno mismo vincular las carpetas a direcciones con barras incluidas, por ejemplo: <a href="http://www.guiaplaza.com/recetas / ">Recetas</a> Si bien es cierto que el link funcionará de igual manera que sin poner la barra, el servidor direccionará automáticamen

Favicon, el ícono ubicado en la barra de direcciones

Imagen
(ACTUALIZADO) Aunque muy pocos saben y quizás no se han dado cuenta, la mayoría de navegadores coloca un ícono en la parte superior izquierda de las pestañas que vamos navegando. Más aún estos íconos son agregados automáticamente cuando una página es agregada a los favoritos, esta imagen es un archivo de formato "ícono". El archivo debe llamarse "favicon.ico" y debe colocarse con una etiqueta "link" en la cabecera del código html (/head) de las páginas web: <link rel =" shortcut icon " type =" image/x-icon " href =" favicon.ico " /> Hay muchos programas para crear íconos, sólo echa una búsqueda en Google y encontrarás muchos, la mayoría son gratuitos. Para los que usamos las plataformas de Blogger o Wordpress sabemos que estos sistemas insertan sus propios íconos, pero agregando y quitando los suyos podemos personalizar nuestro blog. La idea es que puedes agregar como favicon el isotipo, principal caracterí

Blogger crea títulos personalizados pero con 31 caracteres

Imagen
Para los que tenemos un blog en Blogger.com con el dominio blogspot.com o con uno personalizado con dominio propio es muy conocido que este sistema en cada título prepara direcciones amigables para los buscadores. Sin embargo según un análisis propio estas direcciones sólo tienen limitados textos como: - *31 caracteres. - y/o *6 palabras. (*) Esta extensión mostrada es un promedio de los títulos que hemos podido analizar y no incluyen la extensión .html Por lo que sería ideal crear los títulos de cualquier post en este resumido contexto. Por ejemplo, este artículo que estas leyendo tiene  la dirección siguiente: http://webmasters.guiaplaza.com/2011/06/ blogger-crea-titulos-personalizados .html Y contabiliza 04 palabras y 32 caracteres, sin contar espacios. " Blogger crea títulos personalizados " Tampoco se cuenta la extensión de caracteres del dominio, de la fecha y extensión de archivo .html Crear títulos tan reducidos es muy complicado porque recorta lo