   | |
| Moderador del foro: ZorG |
| Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Fundamentos de HTML |
| Fundamentos de HTML |
Como usar el tag video en HTML5 HTML5 incluye la capacidad de mostrar video en tu web, sin necesidad de usar Flash, Quicktime o cualquier otro plugin. Funciona en Firefox, Chrome, Safari, Opera y en Internet Explorer desde la versión 9. Todo es gracias al elemento <Video> en HTML5. En este tip te mostraré cómo usarlo. HTML5, elemento <video> Tomaremos como base de prueba, este video de Opera en OGG: http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv Básico:
Quote <video src="tu_video.ogv">Tu navegador no soporta HTML5 </video> Con controles:
Quote <video controls src="http://devfiles.myopera.com/articles/2642/sintel-trailer.ogv">Tu navegador no soporta HTML5 </video> Si abrimos nuestro video ya nos aparecerán los controles y tendremos la posibilidad de reproducir nuestro video, ahora vamos a agregarle una imagen previa antes de reproducir el video, para ello agregamos poster="tu_poster.png" con nuestro poster.
Quote <video controls src="tu_video.ogv" poster="tu_poster.png" >Tu navegador no soporta HTML5 </video> Lo siguiente seria agregar el tipo de video que estamos agregando con type="video/mp4". Atento al tipo de elemento que estas usando.
Quote <video controls src="tu_video.ogv" poster="tu_poster.png" type="video/ogg">Tu navegador no soporta HTML5 </video> Reproducir video en múltiples codecs (H264 / On2 VP8 : mp4 / ogg) en HTML5 con <source>
Quote <video autoplay controls> <source src="tu_video.ogv" type="video/ogg" /> <source src="tu_video.mp4" type="video/mp4" /> <p>Tu navegador no soporta HTML5</p> </video> Y para los navegadores que no soportan html5 como IE agregaremos el video en flash con .flv.
Quote <video autoplay controls> <source src="tu_video.ogv" type="video/ogg" /> <source src="tu_video.mp4" type="video/mp4" /> <object width="160" height="90" data="video.flv"> <param name="movie" value="tu_video.flv"> <embed src="tu_video.flv" width="160" height="90"> </object> <p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p> </video> Si queremos añadirle un tamaño en especifico solamente agregamos height="x" y width="x". Para que nuestro reproductor se reproduzca en el momento que termine de cargarse podemos agregar autoplay. Listo ahora ya sabemos como empezar a utilizar el Elemento Video en HTML5. Aquí podrás ver el Ejemplo Terminado. Estos son los tipos de formatos para los videos. Nota: El .ovg es para Firefox y .mp4 es para Safari. Saludos a todos espero que esto les sirva de algo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
HTML5 Geolocalización HTML5 trae consigo muchas novedades y una de ellas es la integración con una nueva API de geolocalización. Dicha API no forma parte de forma estricta de HTML5, sino que está siendo normalizado por el Geolocation Working Group, que es independiente del HTML5 Working Group. El soporte para la API de geolocalización está disponible, de momento, para los navegadores más actuales como Firefox 3.5+ o Chrome 5+. Un modo sencillo de acceso al API de geolocalización sería: Ver ejemplo en funcionamiento » » Con el anterior ejemplo, si el navegador soporta el acceso a la API, el usuario da su consentimiento y... no hay ningún problema se obtiene la geolocalización del usuario al hacer click sobre el enlace "Mostrar Posición". Puesto que el éxito de la geolocalización depende de varios factores, lo mejor es gestionar los posibles errores que se puedan producir. Podemos añadir un segundo argumento a la función obtener_localizacion: una función para gestionar los errores. Los errores que se pueden obtener son: Ver ejemplo en funcionamiento » » Con el ejemplo anterior controlamos los errores durante el proceso de geolocalización pero no controlamos si el navegador soporta o no este servicio. Para hacer este último control podemos comprobar si existe el objeto navigator.geolocation. Ver ejemplo en funcionamiento » » Una vez hemos obtenido las coordenadas mediante la API es bastante sencillo integrar Google Maps para mostrar un mapa con la posición del visitante. El siguiente ejemplo utiliza jQuery para crear un mapa una vez obtenida la posición mediante la API de geolocalización. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Atributos globales que se podrán utilizar con HTML 5 Con la llegada de la versión 5 de HTML, también nos encontramos con nuevas etiquetas que nos proporcionará nuevas funcionalidades. Para estas etiquetas y para algunas que ya existían, aparecen nuevos atributos que se pueden utilizar en la mayoría de las etiquetas. Vamos a repasar algunos atributos que se pueden utilizar en la mayoría de las etiquetas. Accesskey En este caso, para poder acceder hasta ahí con el teclado, se debería de pulsar “Ctrl + Alt + A, pero cada navegador podría tener su combinación de teclas. Class Contenteditable Contextmenu Dir Draggable Hidden itemid, itemprop, itemref, itemscope y itemtype El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el que da los valores. Spellcheck Tabindex Data-* Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Almacenamiento local utilizando HTML 5 HTML5 proporciona una forma de almacenar información en el navegador, similar a como lo hacen las Cookies, pero que permiten almacenar información más grande, ya que las cookies tienen un tamaño limitado. El utilizar el almacenamiento respecto a utilizar las cookies tiene ventajas, sobre todo de tráfico, ya que cuando se almacena algo en las Cookies, al entrar en la web, estas son enviadas al servidor, consumiendo ancho de banda y tiempo. HTML 5 permite el almacenamiento de 3 formas distintas. * Local: los datos son almacenados en la máquina del usuario como pares de clave/valor. Nosotros vamos a centrar en los dos primeros tipos de almacenamiento. El almacenamiento local y de sesión, implementan la misma interfaz Storage, por lo que su funcionamiento será muy similar. Los navegadores compatibles con HTML 5 dispondrán de los objetos localStorage y sessionStorage, para el almacenamiento local y sesión respectivamente. Esta interfaz ofrece los siguientes métodos. Método Length Método SetItem(key, value) Método Key(n) Método getItem(key) Método removeItem(key) Método clear() Cuando almacenamos pares claves/valor, lo que hace la interfaz es almacenar la información como si fueran cadenas, por lo que podemos utilizar la notación JSON para poder almacenar objetos o cualquier otra cosa que nos interese. Este tipo de almacenamiento nos puede ser muy útil si necesitamos almacenar alguna preferencia del usuario, o bien productos de una tienda, para almacenarlos en sessionStorage. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Validación de formularios en HTML 5 Con la llegada de HTML 5, los desarrolladores tendrán más facilidad a la hora de realizar tareas cotidianas como era la validación de formularios. HTML 5 incluye nuevas etiquetas que nos ayudarán a este propósito. Vamos a ver un listado de atributos que podremos utilizar para validar los datos que hemos metido en nuestros campos. Required Pattern Maxlength Min, Max, Step JavaScript Ahora tendremos el objeto “element.validity”, que nos da información referente a la validación del elemento. * boolean valueMissing; — Devuelve true si el elemento está vacío y requerido. También tendremos el método “element.setCustomValidity()”, que es un método definido para especificar un mensaje de error personalizado a un elemento. CSS también nos traerá nuevas pseudoselectores que nos ayudará a dar los estilos a los campos inválidos. Para ello podemos utilizar “:invalid”, y dentro poner los estilos que más nos interesen. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
contentEditable: Contenido editable en HTML5 Explicamos el uso y funcionamiento de uno de los nuevos atributos que acompañan a HTML5: contentEditable. Los navegadores más modernos soportan esta especie de “rich text box” de forma que el usuario pueda editar contenido HTML “in situ”. ¿Qué es contentEditable? El atributo designMode está enfocado en la edición de todo el documento, por tanto podríamos decir que es un editor HTML al uso con el que editar todo un documento. Por otra parte contentEditable sólo permite editar los elementos que tengan este atributo asignado dentro de un documento, además de los elementos “hijo” contenidos dentro del “padre”. Los atributos designMode y contentEditable se emplean para activar el modo edición en documentos enteros o elementos concretos respectivamente. Si bien actualmente existen multitud de editores “WYSIWYG” (What You See Is What You Get / lo que ves es lo que obtienes), es de esperar que con el avance y estandarización de HTML5, estos vayan quedando en un segundo plano en pro de la integración nativa con los navegadores y su modo de edición. Aprendiendo a utilizar contentEditable en HTML5 Basta con asignar el atributo editableContent=”true” a la lista ordenada para poder editar los elementos actuales e incluso introducir más elementos a la misma. El código CSS Empleamos [contenteditable] y [contenteditable]:hover para asignarle estilo a los elementos que tengan activo el modo edición, tanto para su estado normal como para cuando el usuario pasa el cursor por encima de los mismos. No es espetacular pero ayuda a orientar al usuario: [ Para los más inexpertos en HTML5 simplemente comentarles que las etiquetas <header> y <section> son nuevas y simplemente se emplean para separar dentro de un artículo <article> con cabecera y secciones del mismo. ¿Qué navegadores lo soportan? • Firefox 3. Y como más de uno habrá podido deducir con las comillas anteriores “sin problemas”… el demonio está en los detalles, por lo que os aconsejo esta demo online con la que probar los distintos navegadores. Como curiosidad acerca de sus orígenes… Conclusión final Me viene a la cabeza Erasmusu… en su día implementáramos nuestro propio rich text box con emoticonеs, negrita, cursiva, etc, para los comentarios y foros y la verdad es que fue un dolor de cabeza continuo. Al final optamos por el texto plano enriquecido de toda la vida. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Como se deben utilizar los lenguajes HTML y XHTML A pesar de que todos conocen cuáles son las mejores formas de utilizar los lenguajes HTML y XHTML, todavía puede verse algunos códigos que emplean técnicas desfasadas. Un código limpio y bien escrito, no solo resulta útil para que los buscadores no encuentren dificultades para indexar los contenidos de la página, sino que también son una carta de presentación y una satisfacción personal. Declaración del tipo de documento (codtype) Determinar el juego de caracteres Mantener la estructura básica de una web Inclusión y elección del título de la página Escribir las etiquetas en minúsculas No olvidar el cierre de las etiquetas Sin embargo, cuando se trata de etiquetas que pueden contener elementos del mismo tipo anidados, los navegadores simplemente entienden que dicha etiqueta continúa abierta. Además de producir dificultades y errores en la maquetación de la página, se trata de errores en el uso del lenguaje, por lo que el código no pasará la validación. Separar la presentación mediante el uso de CSS Si se va un poco más lejos, la inclusión del CSS en la cabecera (head) del documento HTML también resulta inconveniente, ya que produce un código muy extenso en las primeras líneas del código y por consiguiente, de carga más lenta. Siempre es mejor utilizar archivos separados para la inclusión del CSS. Alinear mediante el uso de CSS Utilización de listas Declarar correctamente los scripts Utilizar correctamente los encabezados <h1>, <h2>, etc. Cada una de estas etiquetas definen un título de texto o encabezado de primer nivel, segundo nivel, etc., para ordenar en forma adecuada el contenido textual de una página web. Para la presentación de los mismos, siempre debe utilizarse CSS. Conocer todas las etiquetas HTML y XHTML Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Tutorial de HTML5 – Semántica HTML5 introduce nuevos elementos "inline" muy útiles para aumentar nuestro existente arsenal de "span, strong, em, abbr, etc". A partir de ahora a estos elementos ya no se les llamará "inline", sino “text-level semantics.”- mark Se podría utilizar el o strong pero semánticamente no sería correcto ya que no querrías otorgarle una “importancia” al término de búsqueda, simplemente queremos que de alguna manera quede resaltado. Introduzcamos el elemento mark: El elemento mark no lleva implícito ninguna importancia para el contenido salvo el mostrarlo como algo de interés en el contexto en que esté. Según la especificación, mark denota fragmento de texto de un documento marcado o iluminado con fines de referencia debido a su importancia en otro contexto. meter No es obligatorio escribir el valor máximo si no quiere, para eso se puede utilizar el atributo max. Existe un atributo sin correspondiente. También se puede utilizar los atributos high, low y optimum. Si lo desea, puede incluso ocultar la medición dentro del atribulo value. progress Otra vez se pueden utilizar los atributos sin, max y value: El elemento progress es más útil cuando se utiliza combinado con DOM Scripting. Se puede utilizar JavaScript para actualizaciones dinámicas del valor, permitiendo al navegador comunicar el cambio al usuario. Muy útil para cargar archivos con Ajax. Estructura section Usted podría sustituir a algunos de sus elementos div con elementos section, pero recuerde siempre preguntarse ¿Está todo el contenido relacionado? header Existe una diferencia crucial entre el elemento header en HTML5 y el uso aceptado y generalizado de la palabra encabezado o cabecera. Por lo general en una página existe una sola cabecera pero un documento puede tener múltiples encabezados, o lo que sería lo mismo múltiple elementos “header”. Se puede utilizar un elemento header dentro de un elemento section por ejemplo. Las especificaciones describen los elementos section como “a thematic grouping of content, typically with a heading”, o sea, una agrupación temática de contenido, generalmente con un encabezado. El elemento header aparecerá por lo general en la parte superior de un documento o section, no tiene que ser así obligatoriamente. Ha sido definido por su contenido — introductorio o elemento para la navegación — sea cual sea su posición. footer Mientras estamos acostumbrados a tener un pie para todo un documento, HTML5 nos permite también tienen pies dentro de las secciones. aside El elemento aside se debe utilizar para un contenido que esté relacionado tangencialmente. Si usted tiene un contenido que considera debe estar separado del contenido principal, entonces probablemente sería adecuado utilizar el elemento aside para que contenga esta contenido. Pregúntese si el contenido que hemos colocado dentro de aside puede ser eliminado y esta acción no resta o altera el significado del contenido principal del documento o de la sección. Por poner un ejemplo del tipo de contenido del que hablamos, podemos mencionar frases entrecomilladas con notable relevancia. (Imagen) Es un contenido directamente relacionado con el contenido principal, pero si se eliminara, este último no perdería su comprensión ni su estructura semántica. Recuerde, sólo porque su diseño visual requiere un cierto contenido que aparezca en una barra lateral, no significa necesariamente que aside es el contenedor que debe contener los elementos correctos. nav Aclaremos un poco eso. El elemento nav está destinado a la información de navegación principal. El hecho de que un grupo de enlaces se agrupan en una lista no es razón suficiente para utilizar el elemento nav. Toda la navegación del sitio, en cambio, casi con toda seguridad pertenece al elemento nav. Muy a menudo, un elemento nav aparecerá dentro de un elemento header. Eso tiene sentido si se considera que el elemento header se puede utilizar para "ayudas a la navegación" o colocar el menú principal. article El elemento article es otro tipo de sección especializada. Se utiliza como contenedor de un tipo de contenido que esté relacionado consigo mismo. ¿Difícil de entender? Pregúntese si se sindicará el contenido en un RSS o Atom feed. Si el contenido todavía tiene sentido en ese contexto, entonces article será probablemente el elemento correcto a utilizar. De hecho, article es un elemento que está diseñado específicamente para sindicación de contenido. Si tiene más de un elemento time en un artículo, solamente podrá uno de ellos podrá contener el atributo pubdate. El elemento article es muy útil para artículos de Bitácoras (Blogs), noticias, comentarios, críticas y artículos de foros. Lo que es más problemático es que article y section son muy similares. Todo lo que les separa es la palabra o el concepto "relacionado entre sí". Sería muy fácil si existiera una regla a seguir, pero en este caso todo se basa en la "interpretación". Se puede tener múltiples article dentro de una etiqueta section, se puede tener múltiples section dentro de un article, se pueden anidar article dentro de article y section dentro de section. Es cuestión de cada uno la selección que semánticamente más se adecue a uno u otro elemento teniendo en cuenta que "todo" el contenido de section debe estar relacionado entre si, y el contenido de article, que ha sido pensado para artículos y puedan ser sindicados. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
HTML5: Cómo crear barras del ancho del navegador con texto centrado En estos días no se suele ver texto configurado para cubrir el ancho total de la ventana del navegador (en el caso de laptops y PCs de escritorio) ya que resulta demasiado ancho. Si intentas crear un elemento que ocupe el ancho total pero limite el texto que contiene dentro a un tamaño legible, aquí te enseñaremos cómo hacerlo. Haz clic aquí para ver una demostración >> Es posible con pseudo-elementos. En lugar de utilizar envolturas en cada header, envolveremos el área por completo: Quote <section> <h2>Header</h2> <p>... text ... </p> <h2>Header</h2> <p>... text ... </p> </section> Ahora limitaremos el ancho con el elemento, aunque eso limitará el ancho de nuestros headers también. Es allí donde entran en juego los pseudo-elementos. Los usaremos para crear extensiones a la izquierda y derecha del header: Quote section { width: 50%; margin: 0 auto; } h2 { position: relative; background: black; } h2:before, h2:after { content: ""; position: absolute; background: black; top: 0; bottom: 0; width: 9999px; } h2:before { right: 100%; } h2:after { left: 100%; } Debemos ser cuidadosos con los excesivos anchos aquí, ya que no queremos causar scroll horizontal: Quote body { overflow-x: hidden; } Haz clic aquí para ver una demostración >> Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Etiquetas HTML5: Hgroup, Aside y Mark La codificación con HTML5 ha venido a bombardear la mente de varios desarrolladores en los últimos meses, su incorporación al mundo de la programación ha hecho que más de uno se interese por aprender los nuevos estándares y aplicaciones que esta nueva versión del lenguaje de etiquetas nos brinda. Si bien es un tema que se ha venido tratando por varios meses incluso años, HTML5 ha tomado una relevancia especial a últimas horas por su gran avance en cuestiones de desempeño en el lado cliente. Si tú eres de esas personas que se han mantenido al tanto de lo nuevas tecnologías web, debes estar consciente de los grandes avances que se han alcanzado, la manera en que HTML5 ha logrado agrupar e incorporar funciones que antes parecían imposibles de realizar utilizando únicamente el navegador del usuario, desde almacenaje propio hasta animaciones. Además de esto, HTML5 trae consigo una nueva manera de estructurar nuestros sitios web, etiquetas como section, article, header y footer nacieron para unirse a otras ya conocidas como body y div. Con esto cada parte de una página quedará mejor delimitada, entendiendo con un simple vistazo la función o el rol que juegan dentro de la estructura. Un cambio en estructura siempre es un parte fundamental por aprender, es por esto que muchos recomiendan que entre los primeros pasos a realizar cuando comenzamos con el trato de HTML5 se encuentre el dejar fuera etiquetas de estilo y comenzar con la construcción de las páginas con los nuevos elementos semánticos. Si bien las etiquetas ya mencionadas son los elementales para comenzar a desarrollar, al momento de realizar una estructura no debemos olvidarnos de esos pequeños pero fundamentales elementos que nos ayudarán a crear una mejor semántica. Me refiero a etiquetas como mark, hgroup o asidе que si bien son pequeñas, pueden representar gran funcionalidad para la estructura. Etiqueta hgroup de HTML 5 La función del elemento hgroup es agrupar un conjunto de encabezados en un sólo bloque para que puedan ser manejados como una unidad. Cuando mencionamos la palabra encabezado nos estamos refiriendo nada más y nada menos que las etiquetas que van de h1 a h6, y que nos sirven para darle un formato a los títulos de nuestros artículos, entradas o nombres lo que hace resaltarlos del resto del texto. Si tuviéramos un título y un subtítulo que quisiéramos relacionar y agrupar, el tag adecuado para ello es hgroup. Una aplicación común en un sitio web es el agregar un “eslogan” al título de nuestra página o quizás la fecha al título de una entrada, para ello comúnmente se maneja un nivel de encabezado para el título principal y otro nivel de encabezado inferior para el lema o eslogan. Hgroup será el encargado de agrupar los dos títulos para manejarlos como unidad en el árbol del documento, esto sin comprometer el valor semántico de cada etiqueta. Debemos aclarar que dentro de un elemento hgroup solo podemos manejar etiquetas de tipo encabezado, por lo que no es permitido introducir párrafos o algún otro tipo de etiqueta. Su aplicación en el código HTML quedaría de la siguiente manera: Code <hgroup> <h1>uCoz</h1> <h2>Portal para crear sitio web gratis y fácil</h2> </hgroup> Debido a la envoltura hgroup, el lema del sitio no está incluido en el esquema del documento, y eso es exactamente lo que queremos. Aunque el uso más práctico de hgroup es para establecer frases, también se puede utilizar para agrupar metadata o algún otro texto auxiliar cuyo contenido no queremos que aparezca en la estructura del documento. Etiqueta aside de HTML 5 El elemento aside es utilizado para envolver todo aquel contenido que sea relativo a la sección principal de un sitio y es a menudo representado con las famosas barras laterales en los sitios web. Aunque si bien es cierto que la mayor parte del tiempo encontraremos a esta etiqueta envolviendo contenido que se encuentra a un lado del sitio, debemos aclarar que la etiqueta en sí no esta relacionada con ninguna posición, tanto puede estar a un lado como en el centro o incluso el tope superior o inferior de la página. Su función como ya mencionábamos consiste en envolver una sección de contenido que tiene alguna clase de relación el texto más grande donde aparece, por lo que no puede valerse por si misma como una pieza portable de contenido. Es por ello se puede hacer uso de ella para mostrar mensajes de publicidad, alguna cita o una aclaración relacionada con la entrada o el texto donde se despliega. Por ejemplo, si quisiéramos una caja de publicidad enseguida de un artículo en este blog podríamos hacer algo como esto: Code <aside style="background: #DEDEDE; color:steelblue; float:right; width:220px; padding: 20px; border: 1px solid #CCCCCC"> <span style="font-weight:bold">¿Necesitas una web?</span><br/> ¡Nosotros te la diseñamos! </aside> <hgroup> <h1>Diseño de formularios con CSS y HTML</h1> <h2>Artículo creado el 9/05/07</h2> </hgroup> <p>En este artículo, veremos la variedad de caminos con los cuales podemos hacer formularios atractivos para nuestros sitios y servicios web usando sencillamente CSS. Los formularios son parte importantes, pero poco elegantes, de muchos sitios. CSS hace más fácil la creación de formularios atractivos rápidamente, porque una vez que se ha desarrollado un diseño lo podemos reproducir en cada formulario del sitio.</p> Etiqueta mark en HTML 5 El último elemento a analizar en este artículo es la etiqueta mark, como se puede deducir por su nombre esta es utilizada para marcar el contenido de manera que pueda resaltarse y diferenciarse de los demás, su particularidad viene a que su función puede ser una dependencia del comportamiento del usuario, ya que en algunas ocasiones esta etiqueta puede indicar algún tipo de actividad reciente. La etiqueta en sí se encarga de agregar distintos estilos al texto para que este destaque del resto, ya sea un color de fondo o algún relieve, con esto se pretende mejorar la experiencia del usuario en caso de que este haya realizado una consulta o de que haya realizado alguna actividad donde el marcado le resulte de ayuda. Si marcamos aquellas palabras que el usuario introdujo en la casilla de búsqueda le resultará mucho más sencillo identificar el párrafo o sección donde se habla del tema buscado. Fuera de esta función, la etiqueta se puede utilizar para mejorar la interacción del usuario con el contenido, haciendo destacar fragmentos. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
El mal uso de etiquetas HTML Es común que por factores como la costumbre que nos fue heredada por nuestros predecesores o el uso común que se les da en la programación informal, hayamos utilizado etiquetas HTML de manera errónea en más de un caso y durante mucho tiempo. Al ver el código fuente de varias páginas podemos apreciar a menudo los mismos errores que aparecen una y otra vez, estos errores suelen ser producidos por los hábitos que recogimos durante nuestros primeros días en el mundo de la codificación o por la falta de esclarecimiento sobre la verdadera función de cada etiqueta. En este artículo veremos algunas de las etiquetas que comúnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente. Etiqueta “br” Es muy probable que esta etiqueta haya estado a tu lado casi desde el día en que te iniciaste como programador web, es una de las etiquetas de uso más común al momento de codificar y por lo tanto una de las que más reciben un mal uso; y es que basta con recordar que fue hasta la aparición de CSS cuando dejamos de usarla para hacer prácticamente todo lo referente a espacios entre dos bloques de elementos. Esta etiqueta no se debe de utilizar para crear espacios vacíos en tus documentos o contenido, su función es únicamente dar un salto de línea en una oración. Si lo que deseas es tener espacio entre un elemento y otro entonces la etiqueta para eso es “p”, que nos ayuda a crear párrafos, y podemos complementarlo con la adición de márgenes mediante CSS, lo que nos permitirá determinar la distancia entre los elementos. Un claro ejemplo del mal uso de esta etiqueta se puede observar al utilizar editores del tipo WYSIWYG (What You See Is What You Get – Lo que ves es lo que obtienes), estos programas se encargan de maquetar el sitio utilizando estas etiquetas y párrafos vacíos para recrear el diseño que tu hiciste, es por ello que es bastante recomendable mantenerte alejado de esta clase de editores. Etiqueta “div” Esta etiqueta quizás no ha estado dentro de tu repertorio durante tanto tiempo como la etiqueta br, pero sin duda se ha convertido en una de las más utilizadas en los últimos años. La etiqueta div vino a cambiar la manera en que diseñábamos la estructura de nuestras páginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS, podíamos adaptar nuestro sitio. Pero la fascinación por su uso terminó llevando a más de uno a la rutina, su implementación se fue haciendo más común y para situaciones donde realmente no debería de usarse, hay sitios que basan prácticamente toda su estructura de elementos en “divs”, incluso para mostrar elementos de texto o imagen, esto está totalmente mal. No tenemos que rodear todos los elementos de un sitio con un div, quien te diga lo contrario esta mintiendo, no existe ninguna estandarización que nos obligue a ello, ni mucho menos utilizarlos en lugar de etiquetas cuya función especifica es la que estamos haciendo, como mostrar una imagen. Es perfectamente aceptable utilizar la etiqueta div para definir la estructura de la página, pero siempre tratando de hacer uso de etiquetas más adecuadas y especializadas para los elementos de tu página, etiquetas como el párrafo y las listas pueden ser una opción mucho más semánticamente correcta. Etiqueta “title” Una etiqueta fundamental en cualquier estructura de código HTML es title, su función es básica para el sitio ya que sin ella nuestra página no tendría un título que indique de que trata el contenido que estamos por ver, el problema es que su uso se ha venido degradando últimamente para convertirla en una etiqueta más de meta-data y con funciones de SEO. No estamos en contra del SEO para nada, pero si queremos hacer un uso adecuado de etiquetas debemos respetar su función. En el caso de “title” su función es muy sencilla, se encargará de mostrar una descripción concisa del contenido de la página, donde será importante incluir palabras clave relacionadas, lo que permitirá a la página ser reconocida por los motores de búsqueda, pero no debemos abusar de esto. Es común caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada importante en ella o la llenamos de información que realmente no tiene cabida en ella. Debemos evitar estos dos extremos y utilizar las etiquetas meta para esta clase de información. Etiqueta “img” El problema con la etiqueta img es utilizarla demasiado, no uses imágenes para casos donde realmente no se requiera, no tienes que convertir todo en imágenes recuerda que esto es malo para que la página pueda ser analizada por motores de búsqueda, en esta nueva era donde el contenido lo es todo es muy importante no encapsular tu información en imágenes. A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de alt, cuya función es contener una descripción precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto irrelevante. Etiqueta “small” Esta etiqueta quizás no es tan popular como el resto, pero se ha mantenido durante varias versiones del lenguaje y es importante definir su función. Con ella nos encargamos de definir el texto catalogado como “Smallprint”, es decir todo aquel que hable de condiciones de uso o marcos legales. Generalmente los desarrolladores cometen el error de utilizarla para definir el tamaño de un texto, cuando quieren que este se vea pequeño, pero para eso se debe definir un tamaño mediante CSS no utilizando esta etiqueta. Conclusión Existen muchos casos de etiquetas que son utilizadas de manera errónea, muchos pueden abogar por el caso diciendo que lo que importa al final es el producto, pero ¿No te sentirías mejor si tu producto ofrecería también calidad en el código?, para qué utilizar etiquetas en algo que no es su función si ya existe otra que si fue hecha para eso. No nos olvidemos de investigar antes de actuar, si tenemos una duda sobre la función de una etiqueta o queremos saber si la que estamos usando para una tarea es la correcta, debemos sentarnos y leer un poco antes de codificar. Se que suena a más trabajo pero al final es la única forma de eliminar esos malos hábitos que hemos adquirido con el tiempo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
El potencial impacto de HTML5 sobre el SEO La nueva versión del lenguaje de etiquetas HTML, si bien es un trabajo aún en proceso, es candidato a convertirse en el siguiente gran estándar de la web. Esta versión nos permitirá estructurar y presentar nuestro contenido mediante nuevas etiquetas que alimentarán a los motores de búsqueda y potenciará positivamente al SEO de nuestros sitio. HTML es el encargado de proporcionar a los motores de búsqueda el contexto que necesitan para entender lo que está contenido en una página web. Con HTML5 existe la oportunidad de impactar en gran medida a los algoritmos de los buscadores, de eso hablaremos en este post. Segmentación y semántica en HTML5 La segmentación y una mayor semántica son dos propiedades que nos ofrece agregar HTML5 a nuestras páginas, un componente clave de esta versión del lenguaje, es que añade nuevos elementos que nos van a ayudar a expresar mejor lo que se está mostrando en una página web, con esto se logra mejorar la segmentación y distinguir entre los distintos elementos como el encabezado, pie de página y el contenido principal. Se proyecta que eventualmente con el paso del tiempo, los motores de búsqueda incluyan por completo y utilicen estos nuevos elementos para que les ayuden a encontrar contenido de interés dependiente del segmento o sector de la página donde se ubican. En la actualidad esta segmentación se lleva acabo mediante elementos de tipo capa, comúnmente identificados con la etiqueta div, estos son utilizados para organizar y crear secciones. El problema con el uso de estos elementos es que no tiene un significado específico, es decir no añade el valor semántico correcto al código, ya que no da un contexto de lo que existe en su interior. Con los nuevos elementos header, article, aside y footer, la segmentación de la página toma un papel relevante y se hace más significativo tener una buena estructura. Al utilizarlas, le permitiremos al motor de búsqueda saltear secciones que no le interesan o utilizar algunas otras para identificar información relevante que debe de existir en ese lugar, como por ejemplo la licencia de uso que regularmente se coloca en el footer de un sitio o el logotipo que se coloca en el encabezado. Esta indexación del motor de búsqueda permitirá que la investigación que realicemos sea más eficiente, significativa y en teoría más avanzada. Elementos HTML5 para indexación Como dijimos HTML5 es un proyecto aún en proceso, y aunque ya es una realidad es muy probable que en un futuro existan nuevas etiquetas, por el momento existe un grupo de elementos que nos permiten tener un mayor impacto sobre el SEO, y son los que expondremos en esta ocasión. Empezaremos con el elemento article, quizás el más relevante de todos en base al contenido que alberga. Como es de todos saber, el contenido es la parte que juega el rol más fundamental en una página web, sin buen contenido un sitio esta destinado a tener muy bajo ranking en los buscadores, es por eso que dentro de esta etiqueta se debe colocar la mejor información posible, ya que se encargará de indicar el contenido principal de la página. Es muy probable que eventualmente todos los buscadores pongan más atención a esta sección sobre todas las demás que conforman el sitio, es por ello que la etiqueta article toma tal relevancia. Dejando la relevancia atrás y pasando al orden por uso tenemos a la etiqueta section, quizás la más utilizada a lo largo de la estructura ya que se encargará de indicar las diferentes secciones de una página. Con esto cada sección de la página puede tener su propio título, independiente al que se dio al documento HTML, esto permitirá a los buscadores tener una mejor comprensión de como esta segmentada y estructurada la página. También tenemos al elemento header el cual se encargará de dar una idea a los motores de donde encontrar el nombre del sitio y el logotipo que representa a la compañía o sitio. Cerca de él tenemos a nav, elemento que dará pistas sobre la arquitectura del sitio, tal como en la actualidad los mapas del sitio nos ayudan a conocer mejor la estructura. Finalmente tenemos footer, dicha etiqueta se encargará de indicar el pie de página, sección que suele contener información complementaria o auxiliar, como es las licencias o derechos sobre el sitio, políticas de privacidad, estadísticas y enlaces hacia las principales redes sociales donde se encuentra presente el sitio. Gracias a esto los motores podrán analizar aspectos legales de manera rápida, simplemente analizando el contenido de esta sección, al igual podrán detectar cuales son los perfiles oficiales del sitio en las redes sociales. Enlaces e hipervínculos Una de las manera más comunes de determinar el posicionamiento de un sitio por parte de los buscadores es utilizar y analizar los enlaces de una página web. Es decir, los motores se encargan de estudiar los “links” para ver a que sitios redireccionas y que sitios redireccionan hacia el tuyo. Pensando en esto, los desarrolladores de HTML5 decidieron añadir distintos tipos de enlaces lo que permitirá darle distintos valores a nuestros vínculos, permitiendo dar más contexto a los buscadores sobre los enlaces que se encuentran en nuestra página. Quizás ya habías manejado este tipo de clasificación con anterioridad, al utilizar atributos como rel que al darle un valor como nofollow le indicaba al buscador que el enlace no era totalmente respaldado por nuestro sitio. Los nuevos tipos de enlace son muy parecidos a esta clase de práctica, de hecho utilizamos el mismo atributo rel. Ahora podemos dar nuevos valores a este atributos, tales como auto o licence, lo que nos permitirá describir mejor cada vínculo, incluso podemos dar valores como prev o next que indicarán que esos enlaces apuntan hacia una página del mismo sitio que continúa mostrando el contenido que fue paginado. Media Es importante mencionar también a las etiquetas de media, como audio y video, que incrementar la interoperabilidad con los motores de búsqueda, un ejemplo de ello se puede observar en Google que presenta los videos de YouTube en sus resultados de búsqueda. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
HTML5: Cómo usar el tag de video en tu sitio web HTML5 trae consigo muchas de las principales innovaciones, incluyendo el nuevo tag video que nos permite incrustar fácilmente un video a nuestro sitio. Aquí te explicamos más... Antes de HTML5. solíamos utilizar los tags embed y object para colocar un video en nuestro sitio web. Como habrás notado, esto requiere de fuentes externas para procesar el contenido, y no siempre son 100% compatibles con tu contenido. El tag video, en cambio, es bastante simple: intentará mostrar las fuentes de video que le indiques, y en caso de no encontrarlas, arrojará un mensaje alternativo (al igual que hacen las imágenes cuando usamos el tag img). Este es el código que puedes utilizar: Code <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Malas noticias, no podrás ver algo genial y todo por por culpa de tu conexión. </video> Aquí necesitarás fuentes que sean .mp4, .mp3, .ogg, o .webm. Si no tienes ninguno de esos formatos, puedes utilizar varios conversores HTML5 que existen online hoy en día. Necesitas diferentes tipos de archivo porque Firefox (3.5+), Opera(10.5+) y Chrome(5.0+) soportan .ogg, pero Internet explorer(9.0+) y Safari(3.0+) sólo soportan .mp4. Lo bueno es que, en vez de solicitarle a tus visitantes que cambien de navegador cuando no pueden ver el video, en cambio puedes valerte de varias alternativas para asegurarte que tu video será visto. Eso es todo por ahora ¡Hasta la próxima! Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Como añadir html dentro un elemento con javascript Utilizando javascript es posible introducir nuevo html dentro un elemento de una página. Por ejemplo, tienes el siguiente div: Code <div id="contenedor"></div> Y necesitas introducir nuevo código html en el interior de este div de forma dinámica, por ejemplo para actualizar el contenido html via ajax. La solución con javascript cuenta con dos opciones, dependiendo de tu situación te será mejor una que otra, veamos: Inserción de html en un elemento html utilizando innerHTML Una posibilidad que nos brinda javascript para introducir código html dentro de un elemento ya existente es simplemente utilizando la función innerHTML. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo. Ejemplo: Tenemos este html: Code <div id="contenedor"> <p>Contenido original</p> </div> y aplicamos el siguiente javascript: Code function replace(){ var contenedor = document.getElementById('contenedor'); contenedor.innerHTML = '<p>Nuevo contenido</p>'; } El html quedará: Code <div id="contenedor"> <p>Nuevo contenido</p> </div> Para que no se elimine el contenido previamente existente podemos usar la adición en lugar de la igualdad simple: Code function addElement() { var contenedor = document.getElementById('midiv'); var nuevodiv = '<div id="nuevodiv"><p>Este el contenido del nuevo div</p></div>'; contenedor.innerHTML += nuevodiv; } Inserción de html dentro de otro elemento html utilizando la función appendChild Utilizando la función appendChild de javascript podemos introducir cualquier elemento html, y su contenido, donde queramos. Lo único que hay que tener claro es que el elemento html a introducir debe existir en el DOM, y si no existe hay que crearlo primero con la función createElement. Por ejemplo: Code function addElement() { var contenedor = document.getElementById('midiv'); var nuevodiv = document.createElement('div'); var divid = 'nuevodiv'; nuevodiv.setAttribute('id',divid); nuevodiv.innerHTML = '<p>Este el contenido del nuevo div</p>'; contenedor.appendChild(nuevodiv); } Si llamamos a la función anterior introducirá el nuevo div con su contenido dentro del primer div. Con la función javascript appendChild]/b] el nuevo contenido introducido se irá al final del elemento contenedor. En nuestro caso el html quedaría, tras llamar a la función: Code <div id="contenedor"> <div id="nuevodiv"> <p>Este el contenido del nuevo div</p> </div> </div> Del mismo modo podemos eliminar cualquier elemento html, y su contenido, utilizando la función javascript [b]removeChild: Code function removeElement() { var contenedor = document.getElementById('midiv'); var nuevodiv = document.getElementById('nuevodiv'); contenedor.removeChild(nuevodiv); } La última vez que tuve que hacer algo parecido tuve que elegir la primera opción pues me resultó más cómodo para agregar, que no reemplazar, el código html que recibía de una llamada ajax al contenido html ya existente previamente. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Formato de textos en HTML A pesar de que con el paso de los años las imágenes, los videos y las animaciones han tomado gran relevancia como medios de contenido por Internet, el texto sigue representando la principal fuente de información y la de uso más común. Debido a que su aplicación es sencilla, muchos consideran al texto algo fácil de implementar en una estructura HTML sin embargo se omiten muchos aspectos relativos a su formato. La importancia de manejar correctamente un texto va desde la codificación hasta la interfaz, sin texto no tendríamos hipervínculos y no podríamos compartir y vincular sitios, no tendríamos una manera tangible de presentar información en páginas, ni siquiera tendríamos XHTML o CSS. En este artículo estudiaremos la manera en que se debe estructurar un texto, como aplicar de manera correcta las etiquetas HTML que se relacionan con él y cómo lograr su manipulación para generar una buena semántica en el código y una presentación adecuada en la interfaz. Estructuración del texto con HTML El lenguaje de marcado especializado en el texto es un campo aún no muy explorado por los diseñadores web, nos concentramos tanto en aspectos de la estructura del sitio, capas, links, secciones, que nos olvidamos que existen toda una gama de etiquetas desarrolladas exclusivamente para dar un formato correcto al texto. Con la llegada de CSS muchas de estas etiquetas fueron quedando enterradas y en el olvido, ya que los estilos podían replicar lo que se hacía con ellas, pero esto no significó que se declararan obsoletas; por lo contrario, su uso sigue siendo considerado lo correcto, pues agregan una correcta semántica al código y delimitan correctamente la función de cada parte del texto. Desgraciadamente, actualmente siguen siendo muchas las malas costumbres que se tienen en relación al texto, una de las más comunes es el manejo del salto de línea br para dar la presentación que deseamos, usamos saltos de línea en todos lados, para separar trozos de texto, para separar títulos e incluso para imitar funciones de padding. Debemos recordar que existen etiquetas como p párrafo que cumplen mejor con una función de segmentación y que los títulos deben ser definidos mediante cabeceras de h1 hasta h6. El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que cumplan la misma función, debemos aprender a marcar los elementos de texto como citas, abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes. Elementos básicos del texto Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web. Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la clausura, como esto: Code <p>Este es un párrafo sencillo</p> <p>Este es otro párrafo sencillo</p> Una distancia será agregara entre los dos párrafos, pues las reglas de escritura nos indican que así debe de ser. Las ventajas que conlleva el agrupar el texto de esta manera en vez de utilizar un br en medio de los 2 textos, es que ahora cada texto es una unidad y como tal puedo aplicarle estilos e incluso efectos con JavaScript. Esto no significa que este incorrecto usar etiquetas br en ocasiones, si por ejemplo queremos definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto: Code <p>Este es un párrafo sencillo.<br/>Aquí continuamos el texto del párrafo</p> Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos alternativas, podemos utilizar la etiqueta em para dar un énfasis con letra de tipo itálica o strong si queremos dar un mayor énfasis y poner el texto en negrita. Code <p>Este es un párrafo con <em>énfasis</em>. Como ya dije, con <strong>¡énfasis!</strong></p> Cabeceras y títulos En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para darle una mejor estructura al documento. Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por los nombres h1, h2, h3, h4, h5 y h6. El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde se aplica, resaltándola sobre el resto del texto. Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de la letra y las pone en negritas. La etiqueta h1 representa el nivel más alto y por consecuente h6 el más bajo, así que debemos respetar esta jerarquía al momento de estar escribiendo, ya que si usamos la etiqueta h2 para definir el título del artículo no podemos usar h1 para un subtítulo. Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes en la página, no te preocupes recuerda que siempre puedes editar esto con CSS. Code <h1>Título del escrito</h1> <p>Introducción al escrito.</p> <h2>Subtítulo del escrito</h2> <p>Texto sobre el subtítulo</p> <h3>Tercer nivel del escrito</h3> <p>División del tema manejado en el subtítulo</p> <h2>Otro subtítulo del escrito</h2> <p>Más texto</p> Citas Conforme vamos avanzando nos encontremos con etiquetas menos utilizadas cuya función es marcar tipos muy específicos de texto, dentro de esta clase encontramos a las citas. El hecho de que sean utilizadas con menos frecuencia que los párrafos o los saltos de línea, no significa que no sean importantes, su función esta en aplicar un significado a una parte específica del texto y con ello aumentar el valor del código. La principal etiqueta para agregar una cita es blockquote, y se usa para señalar un bloque de texto grande, que por lo general se busca presentar de manera individual. Entre los aspectos relevantes de esta etiqueta, encontramos que su contenido se presenta mediante párrafos y podemos agregar un link hacia una página, en caso de que el contenido pueda ser observado por Internet. Code <blockquote cite=”http://www.ucoz.es/“> <p>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</p> </blockquote> Otra etiqueta que también puede ser utilizada, en este caso para citas pequeñas, es q. A diferencia de blockquote, esta etiqueta se utiliza más para desplegar citas inline es decir en una sóla línea sin desplegar un bloque individual. También existe la etiqueta cite que da un estilo diferente a la cita, ya que convierte la fuente en tipo itálica. Code <p>Como se menciona en el artículo de <cite>La Webera</cite> sobre el HTML: <q>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</q></p> Abreviaturas y acrónimos Otro caso muy específico que podemos encontrar son las abreviaturas y acrónimos, son pocas veces las que llegamos a utilizar estas etiquetas, pero ya dijimos siguen siendo importantes. Si te encuentras con una abreviatura debes marcarla como tal y para ello tenemos la etiqueta abbr, por otro lado si lo que tienes es un acrónimo, es decir una abreviatura que se puede leer y pronunciar como una sola palabra entonces puedes usar acronym. Ambas etiquetas puedes contener el atributo title lo que permitirá añadir su significado, así cada vez que el usuario pase el cursor sobre la palabra un tooltip se encargará de presentarle el nombre o significado completo. Code <p>La <acronym title="Fédération Internationale de Football Association">FIFA</acronym>, es el órgano que rige el fútbol</p> Código en el texto Si eres diseñador o desarrollador y te has encontrado con la necesidad de escribir algún artículo para tu página web que explique el trabajo que realizaste, es muy probable que hayas tenido la necesidad de plasmar una parte de tu código, si lo hiciste de forma correcta utilizaste la etiqueta code para envolver dicho texto. La etiqueta code nos permite introducir marcado HTML en un párrafo para identificarlo y manejarlo como tal. Code <code> <p>Este es el código de un <strong>párrafo HTML</strong>.</p> </code> Si queremos que la indentación de dicho código se respete tenemos que introducirlo en un elemento de tipo pre, ya que por default HTML no toma como referencia los espacios en blanco o los tabs que agreguemos. Y así como estás existen muchas otras clases de etiquetas muy específicas como address que nos sirve para especificar la dirección de un establecimiento, generalmente utilizado en la sección de contacto o kbd que sugiere la parte donde un usuario debería introducir texto. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||