Según el tema sea más profesional o más simplón, este techo será más alto o más bajo, pero siempre te marcará un límite para las ideas concretas que quieras implementar en tu blog.
Pero tengo una buena noticia: existe una manera de saltarte ese techo para cualquier tema WordPress que es la que te contaré en este post.
La manera de eliminar ese techo y no tener límite alguno en el nivel de personalización que quieras lograr en tu blog, y que aplicamos aquí en Ciudadano 2.0 se basa en dos pilares:
- Saber usar las tecnologías web en las basa cualquier página web, concretamente HTML y CSS para crear diseños a medida para aquellas partes de tu blog que quieras personalizar tales como, por ejemplo, la cabecera de tu blog o el pie que viene al final de todos los posts de este blog, justo después de la cajita con la información del autor.
- Saber integrar estos cambios en tu blog mediante las técnicas correctas que son las que WordPress ya ha previsto para ello: los hooks y los shortcodes.
Tecnología para bloggers
- Las 5 tecnologías que usa un blog y cómo aprovecharlas a tu favor
- Tutorial HTML básico para bloggers con una pizca de SEO
- Tutorial de CSS para bloggers
- PHP y JavaScript para bloggers
- Bases de datos y MySQL para bloggers
Como verás, lo mejor es que resulta serbastante sencillo de entender para prácticamente cualquier persona. Y muy importante: vas a entender también mejor cómo se hace un buen SEO en tu blog (SEO On Page). Así que, de alguna manera, este es también un post de SEO porque haré referencias a los aspectos fundamentales del SEO On Page.
Además, llevaremos lo aprendido a la práctica con un ejemplo de aplicación concreto en el que crearemos un atractivo widget personalizado de botones grandes para las categorías de tu blog al estilo de los que se ven últimamente en temas modernos como Genesis.
Si escoges bien tus categorías (que no deberían ser más de 8-10), un widget así puede aumentar además ligeramente el tráfico de tu blog y la permanencia de los usuarios.
Por cierto, si quieres recibir emails que te avises de nuevos posts como éste, apúntate aquí:
¡Apúntate a nuestra lista de correo! Podrás recibir contenidos exclusivos, avisos de posts, de cursos y más...
Qué es el HTML (HyperText Markup Language)
Como ya hemos comentados más de una vez, cualquier página web está hecha en código HTML. Lo que se carga en el navegador cuando accedes a una página web es un fichero con el código HTML de esa página, junto con otros elementos como, por ejemplo, sus imágenes.
En un blog esto no es diferente porque un blog es simplemente un sitio web más como cualquier otro, sólo con la peculiaridad de que sus contenidos cuentan con ciertas características típicas de los blogs (publicación periódica de contenidos, posibilidad de hacer comentarios, etc.).
Conceptos básicos: Etiquetas, elementos y atributos HTML
Técnicamente, el HTML es un lenguaje de marcado que describe de una manera estructurada el contenido de una página. Ha habido diferentes versiones, la más usada HTML 4.01 y poco a poco se está implementando ahora también la nueva versión HTML 5. En aras de simplicidad, en este post me limitaré a los elementos de las versiones HTML 4.01 / XHTML que son las versiones que por así decirlo se han usado “toda la vida”.
Por ejemplo, los contenidos de este mismo post, en página HTML simplificada al máximo podrían tener la siguiente estructura de código HTML:
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE HTML>
<html>
<head>
<title>Tutorial de HTML básico para bloggers</title>
</head>
<body>
<h1>Tutorial de HTML básico para bloggers </h1>
<p> Cuando un autor quiere personalizar su blog, el principal escollo…</p>
<h2> Conceptos básicos: Etiquetas, elementos y atributos HTML</h2>
<p> Técnicamente, el <strong>HTML</strong> es un <a href=”http://es.wikipedia.org/wiki/Lenguaje_de_marcado” target=”_blank”>lenguaje de marcado</a> que describe…</p>
</body>
</html>
|
Lo primero que te llamará la atención son las palabras entre corchetes. Esto son las así llamadas etiquetas HTML.
La primera línea, “<!DOCTYPE HTML>”, es diferente de las demás. Es una etiqueta especial que debe ir en la primera línea e identifica al fichero como un fichero HTML.
A continuación verás que las etiquetas forman una especie de estructura jerárquicayendo anidadas (salvo esta primera línea especial). De hecho, siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra delante del nombre de la etiqueta, que componen lo que se conoce como unelemento HTML.
Por ejemplo, “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre) y en medio viene un contenido en texto. A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que encierra al elemento “title”.
Éste es el editor de texto (que es código HTML) de WordPress, fíjate en las etiquetas HTML, aunque por la filosofía de este editor en particular algunos elementos como, por ejemplo, <p> no se visualizan, pero se crean en la página final.
La idea fundamental del lenguaje HTML es tan simple como esto. El uso de este tipo de etiquetas para identificar de una manera estructurada contenidos es la esencial del concepto de “marcaje” de un lenguaje de marcado. Como dice su nombre, “marcan” el contenido. Le danestructura y semántica.
Por ejemplo: la etiqueta “<h1>” marca un contenido que es un título de “nivel uno” que sería algo así como el estilo “Título 1” en un documento de Word, una etiqueta “<h2>” equivalente a un subtítulo de nivel 2 (que iría dentro del contenido bajo un título 1) y así sucesivamente. En HTML se llegan a diferenciar un total de 6 niveles, de h1 a h6.
Así, estas etiquetas permiten identificar títulos y subtítulos, y gracias a que el navegador sabe que se trata de títulos y subtítulos puede visualizar cada nivel del título de manera diferente (tipo de letra, tamaño de letra, etc.) tal como estamos acostumbrados a verlo en cualquier página web o cualquier libro.
En cambio, la etiqueta “<p>” demarca a un simple párrafo que sería equivalente al estilo “normal” en un documento Word que no es ningún título.
Por último, me gustaría que te fijases en la etiqueta “<a>”. Ésta es la etiqueta por excelencia, si cabe, del HTML: la que demarca un hiperenlace.
Además, me sirve para introducir en otro concepto fundamental: los atributos.
Si te fijas, en el caso de la etiqueta “<a>”, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estos son dos atributos y sirven para especificarparámetros adicionales en una etiqueta, lo cual hace el concepto de etiqueta mucho más potente.
En este caso, por ejemplo, es con el atributo “href” cómo se indica a qué página debe enlazar el texto que demarca la etiqueta y con valor del parámetro “target” indicamos que, además, queremos que este enlace queremos que se abra en otra pestaña del navegador.
El HTML y el SEO en un blog
Vistas ya algunos elementos básicos de HTML es un buen momento para algunos apuntes importantes sobre el SEO en un blog, concretamente el SEO On Page (la optimización a nivel de la propia página).
Nunca usas más de una etiqueta H1
Una regla de SEO básica es usar un solo título <h1> en un post (y en cualquier otra página). Y ese <h1> es el título principal del post. Si no sabías HTML, hasta ahora esto te habrá sonado a chino, pero ahora ya puedes entender a qué se refiere.
Si te interesa el tema blogging, tampoco te pierdas nuestra recopilación de losmejores recursos para blogs & bloggers
Es una regla muy importante para un correo SEO de tus contenidos porque los buscadores toman el texto de un elemento <h1> como unos de los principales criterios para identificar las palabras cuales para las cuales posicionarán ese contenido. Por tanto, lo que ocurre si creas más de un elemento <h1> es que estásconfundiendo al buscador porque con 5 o 6 elementos <h1>, por ejemplo, ¿con qué criterio decide cuáles son las palabras clave buenas que tú quieres que use realmente para posicionar el contenido?
La meta-descripción
Se ha resaltado en rojo el texto de la meta-descripción.
La meta descripción es un texto en una etiqueta especial que podrás ver a continuación en el ejemplo de estructura básica de una página HTML y que los buscadores usarán como otra fuente de la que extraer palabras clave. Además, ese extracto de texto, si existe, es el que usarán en los resultados de búsqueda.
Así que es doblemente importante contar con una meta descripción.
WordPress, por defecto, en este momento no permite explicitar una meta-descripción, has de usar un plugin comoWordPress SEO para hacerlo.
Estructura básica de una página HTML
Con este preludio ya puedes entender la estructura o “esqueleto” de cualquier página web que es cómo sigue:
1
2
3
4
5
6
7
8
9
| <!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<meta name="description" content="En este post…">
</head>
<body>Contenidos de la página</body>
</html>
|
La etiqueta <html> engloba el documento y la etiqueta <head> engloba información especial que no se ve directamente como contenido de la página como la meta-información de la codificación de caracteres (encoding) que usa la página o la meta descripción antes mencionada. La etiqueta <title> que es realmente muy importante para nuestros intereses por dos motivos:
- Es el texto principal que describe una página web. Se suele considerar el segundo elemento SEO On Page más importante de una página web siendo el primero el contenido en su conjunto.
- Aparece en sitios importantes: barras de título de las ventanas, listas de marcadores de vínculos y listas de resultados en un servicio de búsqueda. Por tanto, es muy importante que sigas unas determinadas pautas al crearlo.
Para el resto, te remito a este curso gratuito que viene también en las referencias del post.
Precisamente por eso, los plugins de SEO para WordPress como WordPress SEO quepuedes encontrar aquí, permiten que el usuario pueda crear expresamente este título.
A partir de aquí ya nos centraremos solamente los contenidos de la etiqueta <body> puesto que aquí irá el contenido visible de la página (los elementos como <h1> o <p> que componen el contenido visible de la página.
Elementos HTML importantes para bloggers
En HTML existe una gran cantidad de etiquetas. Las más útiles para un blogger serían (según mi experiencia personal) las que listo a continuación, junto con un enlace con la explicación de lo que hacen exactamente y cómo usarlas. Para ver todas las etiquetas HTML, en este enlace dispones de un listado completo, junto con los detalles de cada una.
Títulos, párrafos y formato básico de texto
Con las siguientes etiquetas se crea la estructura básica del contenido en HTML:
- Títulos: <h1> – <h6>
- Párrafo: <p>
- Sección de texto: <span>
- Énfasis: <strong>,<em>
- Salto de línea: <br>
Enlaces e imágenes
Los hiperenlaces son el elemento “estrella” del HTML. Gracias a ellos la web se ha convertido en lo que es hoy. No menos importante es también la capacidad de integrar imágenes en una página web.
Listas y tablas
Las listas y tablas son elementos imprescindibles para estructurar mejor un contenido, en HTML se usan las siguientes etiquetas para ello:
- Listas: <ul>,<ol>, <li>
- Tablas: <table>, <tr> y <td>
Formularios
Un recuadro para autenticarte con usuario y contraseña en una aplicación web o el típico formulario de contacto de una web son ejemplos de formularios típicos.
Los formularios se construyen básicamente con las etiquetas <form> e <input> pero con un poco más complejas de usar y requieren, por tanto, que aprendas a utilizarlas.
Elementos especiales
HTML incorpora una serie de elementos especiales para diferentes propósitos, dos de los más importantes son los siguientes:
Ejemplo práctico
Aunque lo que te he contado es muy básico, ya sólo con esto y un poco de creatividad, puedes hacer montones de cosas en tu blog.
Como ejemplo vamos a hacer algo muy simple: recrear el widget de categorías de este blog y que ahora mismo se encuentra en la parte de arriba en la barra lateral derecha. Además, como verás, será exacto, un calco del widget original.
En el lado izquierdo se puede ver cómo queda el widget si se usa HTML sin más, sin aplicar estilos CSS.
En el lado derecho se ve el widget de categorías de Ciudadano 2.0 con el aspecto que tiene en el momento de la publicación de este post usando los correspondientes estilos CSS.
En el lado derecho se ve el widget de categorías de Ciudadano 2.0 con el aspecto que tiene en el momento de la publicación de este post usando los correspondientes estilos CSS.
Para el ejemplo hemos incluido dos descargas:
1. Página de demo
Esta página contiene el widget y permite ver muy bien cómo se ha construido el código HTML del widget y cómo se ha incrustado en la propia página, puedes descargar el código aquí. Para poder verla, simplemente descomprime el fichero comprimido y una vez descomprimido, abre el fichero “categories.html” en la carpeta “demo-widget” que se habrá creado en tu ordenador.
Si quieres trastear un poco con el código, usa un editor de calidad que sepa tratar correctamente la codificación de caracteres (encoding) como Notepad++ para PC o TextWrangler para Mac.
2. Código listo para usarse en un blog como widget
Ésta descarga contiene un trozo de código HTML que implementa una versión del widget lista para usarse en cualquier blog que admita el uso de HTML como WordPress o Blogger.
En WordPress, por ejemplo, es tan sencillo como crear un widget de texto (viene por defecto en WordPress) y pegar el trozo de HTML descargado en el área de texto del widget. Si el enlace anterior se te hubiese abierto como texto en el navegador, simplemente copia y pega ese texto.
El código es idéntico al que usa el widget de este blog, aunque aquí lo hemos implementado como un plugin a medida que ofreceremos próximente en nuestras descargas. Si quieres enterarte de ello, ya sabes dónde suscribirte :-)
El código HTML pegado en el área de texto del widget de texto estándar de WordPress.
Para tener el aspecto que tiene era necesario definir algunos estilos CSS (el siguiente tema en esta serie) los cuales no se han definido en un fichero CSS aparte (como es habitual), sino que se han incluido en el atributo “style” de los elementos HTML para que el widget sefácil de integrar. Por tanto, para cambiar su aspecto es necesariopersonalizar estos estilos CSS.
Por otra parte, para adaptarlo a tu blog, es tan simple como cambiar el texto de los elementos “<a>” junto con el correspondiente enlace en el atributo “href” y, según tengas más o menos categorías, añadir o eliminar elementos “<a>”.
Por último, ten en cuenta que, según los estilos CSS que use tu blog, es posible que el aspecto del widget varíe ligeramente. En este caso, si quieres eliminar estas diferencias, será necesario tener conocimientos CSS para modificar ligeramente los estilos CSS de tu blog o los del widget.
Cómo ver el HTML de cualquier página web
Ahora que ya conoces los fundamentos de cómo se construye una página web, te animo a que “cotilles” un poco cómo están hechas algunas de ellas.
Captura del inspector de HTML de Chrome:
En la parte inferior derecha el usuario ha seleccionado un elemento HTML que el inspector resalta en la página y para el cual muestra los estilos CSS en la parte derecha.
En la parte inferior derecha el usuario ha seleccionado un elemento HTML que el inspector resalta en la página y para el cual muestra los estilos CSS en la parte derecha.
Para ello te recomiendo usar losinspectores de código que traen Firefox, Chrome o el Internet Explorer y que en los tres puedes activar con latecla F12. En vez de visualizar el código HTML simplemente como texto, lo visualizan como árbol, lo que lo hace mucho más fácil de entender y de inspeccionar.
Ahora bien, dicho esto, una advertencia:
No te asustes cuando veas ejemplos de código real, hoy en día la gran mayoría de las páginas web son muy grandes y complejas, de modo que si ves ese código HTML por primera vez, de entrada, te puede impresionar algo. Pero no te preocupes, si lo miras con calma, reconocerás los elementos que hemos comentado aquí y te podrás hacer perfectamente una idea de cómo está hecha la página en cuestión. Aun así te recomiendo que busques ejemplos sencillos al principio.
Conclusiones
Como ves, no es difícil entender cómo funciona el lenguaje HTML e, incluso, con un conocimiento tan básico como el que has podido adquirir en este post, ya se pueden hacer cosas muy interesantes para personalizar un blog.
No obstante, la realidad es que tener conocimientos de HTML sin conocer también el lenguaje CSS es prácticamente absurdo porque sin saber CSS las opciones de diseño son tan limitadas que en la práctica no puedes hacer nada decente sin usar también CSS.
Por eso el siguiente post se centrará en las hojas de estilo CSS que, al igual que el HTML, a un nivel básico ya dan bastante de sí y a ese nivel tampoco son difíciles de aprender.
Si quieres que te avisemos de la publicación de este post, suscríbete a continuación a nuestra lista de correo:
¡Apúntate a nuestra lista de correo! Podrás recibir contenidos exclusivos, avisos de posts, de cursos y más...
Referencias
Si quieres aprender HTML a fondo, puedes encontrar muchísima información de calidad en la web entre la cual me gustaría destacar estos recursos:
- Librosweb.es: Una gratuita y completísima colección de libros online para aprender tecnologías web desde cero orientada a principiantes. Es una muy buena opción para empezar con coste cero.
- Learning Web Design: Éste es el libro con el que he aprendido yo. Después de ver muchos, me sigue pareciendo el mejor. Cubre HTML + CSS.
- Lista de etiquetas HTML: Una lista muy práctica para consultar los detalles de las etiquetas HTML.
- Editor Notepad++ (PC).
- Editor TextWrangler (Mac):
Y en este enlace te dejo un vídeo-tutorial HTML + CSS básico bastante bueno:
Berto López
Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho. Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicosen sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes. De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.
No hay comentarios:
Publicar un comentario