some image

Month mayo 2014

HTML5 Lo nuevo y lo viejo

Etiquetas: Blog, Web No comments

Uno de los primeros lenguajes que toque en cuando conoci la WEB fue HTML (no es un lenguaje de programacion, pero si un lenguaje de marcas similar a XML, vale aclarar esto desde un principio). Hace poco comence a leer sobre HTML 5 y quede asombrado al ver la evolucion que ha tenido y lo mucho que promete, con sus nuevas etiquetas, facilidades para el manejo de audio, video, canvas sin depender de plugins, implementacion de CSS3 y la magia de las librerias de Javascript (El poder de frameworks como jQueryjQuery UISproutCoreSimpli5, etc..).

Para dar un peque?o abrebocas de lo que será mi nueva travesía a través de HTML5, dejar´ un listado con las etiquetas nuevas y las que se encuentran obsoletas, (utilizadas en HTML 4.1).

HTML5 representa un lenguaje de etiquetas mucho más semántico


Nuevas Etiquetas HTML5

<!DOCTYPE html> Realmente el DOCTYPE no es nuevo pero si cambia su implementacion (No se colocan los DTD Transitional, Frameset y Strict de HTML 4.1). simplemente se coloca <!DOCTYPE html>
<header> Define la seccion de la cabecera de la pagina, por ejemplo como cuando en HTML 4.1 creabamos el header para colocar el banner.
<hgroup> Permite contener un grupo de encabezados h1, h2, h3… h5
<nav> Permite definir los links de navegacion de la pagina o tambien conocido como menú de navegacion :)
<section> Permite definir secciones en la pagina : por ejemplo el la seccion para el contenido principal,
seccion de videos, seccion de registro de formularios, seccion de comentarios..
<article> Esta etiqueta nos permite mostrar contenidos especificos dentro de una seccion, como por ejemplo articulos
(Ahora en la era de los blogger), POST, la publicacion de los comentarios realizados…
<aside> Permite definir una sección con enlaces que apuntan a otras paginas y contenidos de menor relevancia a la pagina.
Esto con el fin de no da?ar el SEO
<footer> Permite definir toda la parte de derechos del autor, enlaces como terminos y condiciones, contactenos, etc..
<audio> Permite reproducir audio, en formatos mp3, ogg, etc.. Esto depende del navegador
<canvas> Permite definir un area de dibujo vectorial, la cual debe ser utilizada con JavaScript
<command> Permite definir botones de comandos a partir de radiobutton, checkbox o botones. Actualmente Iexplore y Safari son los
unicos que soportan este tag.
<datalist> Permite definir una lista autocompletable en un campo
“input” del tipo “text”, aunque actualmente solo es soportada en Opera :(
<details> Haciendo uso de la etiqueta <sumary>, pertime mostrar los detalles de un contenido solo con pulsar clic.
Actualmente solo es soportada por Chrome
<embed> Permite embeber contenido como por ejemplo archivos .swf, o plug-ins.
<figure> Permite definir contenido por bloques como por ejemplo imagenes, diagramas, fotos, codigo, etc…
<figcaption> Este tag dentro de un tag <figure> permite colocar un titulo al contenido mostrado
<progress> Permite definir una barra de progreso, asi como cuando instalamos un programa que muestra el porcentaje
que lleva. Actualmente solo esta soportado por Opera y Chrome
<source> Define la ruta de los archivos para utilizar en los tags <audio> y <video>
<summary> Se utiliza con el tag <details> y representa el encabezado del detalle mostrado Solo funciona con Chrome
<time> Para mantener un contenido mucho mas semantico en la Web, este tag es utilizado para guardar horas, fechas o ambos
<video> Permite reproducir video diferentes formatos.. Esto depende del navegador
<wbr> Cuando un texto es demasiado largo y no posee espacios, con el objetivo de evitar que se pierda el estilo,
este tag permite definir un salto de linea en el texto si no alcanza a mostrarse completamente en una sola linea.
<meter> En una barra permite mostrar un indicador, por ejemplo un porcentaje, el tama?o usado en un disco, la importancia de una pregunta.
Su visualizacion es similar a la del tag progress. Solo es soportado en Opera y Chrome.
<keygen> Esta fue una de las etiquetas que mas me sorprendio, pues permite definir un llave publica y una
privada, para envio de formularios. Cuando se envia el formulario la llave privada se almacena localmente
y la publica se envia al servidor. :)
<mark> Esta etiqueta tambien me parecio muy curiosa, pues permite resaltar el texto contenido en ella.
Su color por defecto es amarillo.
<output> Permite representar el resultado de un calculo matematico. Actualmente es soportada solo en Opera

Etiquetas no soportadas en HTML5, obsoletas o Jubiladas


<strike>
<tt>
<u>
<xmp>
<font>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<basefont>
<dir>
<center>
<big>


Optimización de motores de Búsqueda (SEO) 4

Etiquetas: Blog, Web No comments

Parte IV
“Mejorando la navegación tu sitio, haciendo feliz a un usuario y a un buscador…”

Mejora la estructura de las URL

Se ha demostrado que la estructura del sitio, la navegación, la estructura de las URL y el manejo de mensajes de error, son muy importantes para mejorar la experiencia del usuario y ayudar a los buscadores a indexar.

Practicas recomendadas :

– URL sencillas sugieren el contenido de la pagina : A los usuarios no les gusta complicarse cuando navegan en internet y entre más sencilla sea la descripción de las URL mucho mejor.

– Implementa URL’s amigables :) (Pretty URL) ya que son mas faciles de leer, mas amigables a la vista de un motor, mas faciles de recordar, y muestran una estructura organizada de tu pagina.

Nota : Las URL se muestran en los resultados de los motores de busqueda.

Evitar :

No utilices URL muy largas, con muchos parámetros y mucho menos con palabras poco reconocibles (como ID’s de sesion o urls cifradas) ya que esto genera desconfianza en los usuarios y no es muy buen visto por los motores de búsqueda que indexan las páginas.

No utilices nombres genericos como “pagina1.html”, mas bien utiliza paginas que se relacionen con el contenido de tu pagina como por ejemplo, programacion-java.html.

– El uso excesivo de palabras clave como por ejemplo : programacion-web-programacion-mas-programacion.html (Google no es tonto jejeje).

– Anidar las paginas en subdirectorios tales como : “…dir1/dir2/dir3/dir4/dir5/desarrollo-web.html”.

– Utilizar mayusculas en las URL, pues la mayoria de los usuarios prefieren y estan acostumbrados a las minusculas.

– Estructurar demasiado tu sitio, es que decir evitar que un usuario tenga que hacer mas de 15 clics para llegar al lugar que desea :S. (Nada en exceso es bueno).

– Utilizar un solo menu desplegable o barra de navegación que apunte a toda tu pagina, esto puede ser facil para el usuario pero para los motores de busqueda es mucho mas complicado indexar tu contenido.

Practicas recomendadas :

– Crea un mapa del sitio para los usuarios y otros para los motores de busqueda (Estos mapas para los motores de busquedas, son basicamente un archivo sitemap.xml con la estructura arbol de tu sitio :) ).

– Crea una pagina 404.html, util para los usuarios que les permita volver a la busqueda que estaban realizando o un punto de partida en tu pagina.

Evitar :

– Que el mapa del sitio tenga enlaces rotos.
– Que el mapa del sitio sea un listado de enlaces sin organización ni jerarquia.
– Que tus paginas 404.html sean indexadas por los motores de busqueda (Esto se configura en el servidor cuando se retorna en el header el codigo 404 y luego se direcciona a tu pagina 404.html).
– Usar un diseño de tu pagina 404.html que no sea coherente con el de tu sitio.

Enlaces de interes

Creación de una URL que se ajuste a los requisitos de Google

Optimización de motores de Búsqueda (SEO) 3

Etiquetas: Blog, Web No comments

Parte III

En la variedad de una descripción especifica está el placer de una búsqueda satisfactoria.

2) Utiliza la metaetiqueta description

Primero que todo, que es una metaetiqueta (Metatag) :

Son (tags) etiquetas HTML que tienen como prefijo <meta ….> y definen una serie de atributos con informacion muy util para los buscadores. Estas etiquetas se definen en la cabecera de la pagina <head> …Aqui van los meta.. </head> y son invisibles para el usuario. Dentro de los atributos que se pueden definir en una metaetiqueta tenemos :

  • Titulo de la pagina
  • Descripcion
  • Autor
  • E-mail del autor
  • Keywords (palabras clave)
  • Categoria de la pagina
  • Calificacion de contenido
  • Lenguaje de la pagina (idioma)
  • Tipo de indexacion para robots
  • Copyright
  • Redireccion en X tiempo a otras paginas 😛

Continuemos….

Otra de las claves del SEO es la utilización de las metaetiquetas. Realizando una analogía estas representan la hoja de vida de la página y muestran información relevante de lo que puedes ofrecer… Algo así como el trailer de las peliculas, que google coloca en sus resultados para que los usuarios decidan si les sirve o no, de acuerdo a los parametros de busqueda ingresados. Así que otra vez Google dice en relacion con la etiqueta description :

– Mientras que la etiqueta <title> contiene pocas palabras, la metaetiqueta descriptionpuede contener una descripción con una frase e incluso un parrafo corto.

– Las metaetiquetas description pueden definirse para cada pagina : Tener una metaetiqueta diferenet en cada pagina ayuda tanto a los usuarios como a Google, especialmente en las busquedas donde los usuarios pueden obtener varias paginas de tú dominio.

– Escribe una descripción que informe y a su vez cree interés en los usuarios, en caso de que encuentren esa metaetiqueta descriptión como fragmento (La porción de texto que se muestra en los resultados de la búsqueda, como un pequeño resumen de las palabras coincidentes). de resultado de una búsqueda.

Ejemplo de los resultados de la metaetiqueta description, con una de las páginas que más me gusta :).
Evitar :

– Una metaetiqueta description con un contenido no relacionado con la pagina.
– Descripciones genericas como : “Esto es una pagina WEB”, “Pagina sobre informatica”.
– Una descripción con solo palabras clave, para eso esta el atributo keywords de meta. 😛
– Copiar y pegar todo el contenido del documento de una metaetiqueta description, pues a nadie le gusta que le digan mas de lo que necesita y masivamente (jejeje a Google no le gusta los culebreros o habladores.)
– Utilizar la misma metaetiqueta description en todas las paginas de tu sitio o en un gran numero de páginas de tu sitio. (En la variedad….)

 

Nota : Es importante no colocar información duplicada al momento de definir los metatags, ya que Google penalizara la indexación, creyendo que están haciendo SPAM.
Enlaces de interés :


 

 

Optimización de motores de Búsqueda (SEO) 2

Etiquetas: Blog, Web No comments
Parte II (Conociendo el terreno)

Conceptos básicos SEO

1) Crea títulos de página únicos y precisos “Los títulos de las páginas son un aspecto importante de la optimización para motores de búsqueda”. Google realiza una serie de recomendaciones para los títulos, las cuales están enfocadas en indicar de la forma más precisa el contenido de la pagina para que sea indexado facilmente y genere mejores resultados.

– El uso de las etiquetas son de vital importancia, ya que estas le dice tanto a los usuarios como a los motores sobre el contenido de la página.
– Crea etiquetas <title> únicas para cada página : Siempre lo ideal seria crear un titulo único para cada página del sitio. (Para ser más especifico sobre el contenido que se esta mostrando).
– Describe con precisión el contenido de la página : El titulo de la página principal debe incluir el nombre de tu sitio, como también servicios y si es posible la ubicación. El contenido de la etiqueta title se muestra en los resultados de la búsqueda. (por lo general este es el que aparece en la primera fila de los resultados listados).
Ejemplo :
<title> Red Informática Colombiana - Programación, Seguridad, Tecnologia, CTF</title>

Aqui estoy indicando que la pagina es una red de Colombia y tiene un contenido acorde a la programacion, seguridad (puede ser web o informatica) y temas de tecnologia como también los CTF (Capture The Flags).
Evitar

– Los titulos muy largos que no sean utiles para los usuarios y rellenar las etiquetas <title> con palabras clave, innecesarias.
(recuerda que nada en exceso es bueno 😛 ).
– Titulos que no tengan ninguna relación con el contenido de la página.
– El uso de titulos predeterminados o demasiado genericos, por ejemplo el famoso “Sin título” ó “Página nueva
– El uso de una sola etiqueta <title> para todas las páginas ó para muchas de ellas.
Pdta : Un man llamado Matt Cutts, explica la anatomia de un resultado en Google después de una búsqueda. (Ver blog del viejo Matt Cutts). Básicamente él expone, el como se resaltan las palabras claves que uno ingresa con los posibles resultados, tanto en el contenido de la pagina como en el titulo.

Optimización de motores de Búsqueda (SEO) 1

Etiquetas: Blog, Web 1 comment

Parte 1 : Cuando los Bots se llaman a lista

Luego de haber leido la “Guia para principiantes sobre optimizacion de motores de busqueda“, quedé encantando y con ganas de decir lo siguiente :

Basicamente el objetivo de ellos (Osea Google) fue ayudar a los webmasters a mejorar la optimización para los motores de busqueda. aunque no revelan secretos en dicha guía, y lo dicen claramente en un comentario de (¡lo sentimos!) jajaja… es demasiado bueno para empezar ;)…
Guardar como borrador
Bueno empecemos con los básico :D.

¿Que es optimización de motores de busqueda?

– Esto viene inicialmente de las siglas SEO (Search Engine Optimizer). En el mundo real y laboral, las grandes empresas contratan especialistas SEO (estos manes si se saben los secretos de la WEB a este nivel), para que les ayuden a mejorar sus busquedas e incrementar las posibilidades, de tener el honor de estar entre los primeros resultados de un motor (por ejemploGoogle), y asi vender cosas, mostrar contenido, aumentar la cantidad de usuarios, etc… dependiendo de los objetivos establecidos para el SEO.

Preambulo

Asi que claramente Google dice, “La optimizacion para motores de busqueda trata de mostrar lo mejor de tu sitio en los motores de busqueda, pero recuerda que al final son los usuarios y nos los motores de busqueda a los que te dirijes“.

Nota : La optimización para los buscadores afecta unicamente a los resultados de busquedas orgánicos, no a los resultados pagados o patrocinados, como por ejemplo Adwords (método que utiliza Google para hacer publicidad patrocinada).

De aqui parten 2 conceptos entonces :

Busqueda orgánica : Es aquella que se genera cuando un usuario ingresa una serie de palabras en el buscador y el motor genera una respuesta con todas las coincidencias. Estos resultados dependiendo la cantidad de coincidencias, se paginan.

Busqueda de Pago : También conocida como AdWords. Es aquella donde en relación con las palabras ingresadas, google hace una sugerencia a un anuncio que por lo general es patrocinado o pago por alguna empresa para que google le haga publicidad. Para la muestra una imagen :D.



PDTA : Saludos de nuestro amigo GoogleBot, quien se encarga de rastrear el contenido de dia y de noche para indexar en las busquedas de Google.

En la parte II tratare puntualmente los siguientes temas. 😉

  • Conceptos básicos SEO
  • Crea títulos de página únicos y precisos
  • Utiliza la metaetiqueta description
  • Mejorando la estructura del sitio web
  • Mejora la estructura de las URL
  • Facilita la navegación en tu sitio
  • Optimizando el contenido
  • Ofrece contenido y servicios de calidad
  • Escribe texto ancla de mejor calidad
  • Optimiza el uso de las imágenes
  • Usa las etiquetas de cabecera de forma apropiada