Categorías: Labs

Algunos consejos sobre HTML

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Hace algún tiempo escribí un artículo sobre algunos consejos CSS, ¡ahora es el momento de perfeccionar nuestro HTML! En este artículo compartiré algunos trucos y consejos sobre código HTML. Algunas de estas directrices serán las más adecuadas para principiantes – cómo construir párrafos adecuadamente, uso de cabeceras, o mejorar formularios, pero también comentaremos acerca de sprites SVG para íconos, un tema un poco más avanzado.

Texto

Párrafos

La mayoría de nuestro contenido está estructurado en párrafos, y hay un elemento HTML para ello: <p>. No uses la etiqueta de salto de línea <br> para separar bloques de texto en pseudo párrafos, ya que la función de  saltos de línea no es para eso.

Evitar:

Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly
beans muffin donut marzipan oat cake.
 
<br />
 
Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding
chocolate cake cheesecake toffee.

Recomendado:

<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream
pie jelly beans muffin donut marzipan oat cake.</p>
 
<p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes
pudding chocolate cake cheesecake toffee.</p>

Un uso legítimo para saltos de línea sería, por ejemplo, separar versos de un poema o una canción.

<p>So close, no matter how far<br />
Couldn’t be much more from the hearth<br />
Forever trusting who we are<br />
And nothing else matters</p>

Cabeceras

Las etiquetas de cabecera, de <h1> a <h6>, tienen un rango implícito asignado a ellas, desde el 1 (el más importante) al 6 (el menos importante).

Para manejar la semántica correctamente, elige tu rango de cabeceras en orden secuencial, no solo por el tamaño que el navegador usará para visualizar la cabecera. Tu puedes – ¡y deberías! – usar CSS para esto, y en su lugar escoger un rango adecuado.

Evitar:

<article>
    <h1>Monkey Island</h1>
    <h4>Look behind you! A three-headed monkey!</h4>
    <!-- ... -->
</article>

Recomendado:

<article>
    <h1>Monkey Island</h1>
    <h2>Look behind you! A three-headed monkey!</h2>
    <!-- ... -->
</article>

Otra cosa a tener en cuenta es cómo crear subcabeceras o líneas para acompañar las cabeceras. La recomendación de W3C es usar marcado de texto normal en lugar de una cabecera de menor rango.

Evitar:

<header>
    <h1>Star Wars VII</h1>
    <h2>The Force Awakens</h2>
</header>

Recomendado:

<header>
    <h1>Star Wars VII</h1>
    <p>The Force Awakens</p>
</header>

Formularios

Placeholders

Un atributo placeholder en un elemento <input> de un formulario te permitirá mostrar un valor de ejemplo para el usuario que será automáticamente borrado una vez el usuario escriba algo en el campo. Los placeholders son para mostrar ejemplos de formato válidos para un campo.

Desafortunadamente, existen multitud de placeholders actuando como elementos <label>, informando acerca de lo que el campo significa en lugar de servir como ejemplo de un valor de entrada válido. Esta práctica no es accesible, y deberías evitarla.

Evitar:

<input type="email" placeholder="Your e-mail" name="mail"/>

Recomendado:

<label>
    Your e-mail:
    <input type="email" placeholder="darth.vader@empire.gov" name="mail"/>
</label>

Teclados en dispositivos móviles

Es crucial proporcionar consejos de escritura para la gente que visita con un dispositivo móvil, como un teléfono o una tablet. Podemos lograr fácilmente esto mediante la selección del tipo correcto para nuestro elemento <input>.

Por ejemplo, type="number" hará que un teléfono móvil muestre un teclado numérico en lugar del teclado alfanumérico normal. Lo mismo ocurre para type="email", type="tel", etc.

Evitar:

<label>Phone number: <input type="text" name="mobile"/></label>

Recomendado:

<label>Phone number: <input type="tel" name="mobile"/></label>

Aquí se muestra una comparación: en el lado izquierdo, el teclado muestra cuando se usa type="text"; a la derecha el teclado para type="tel".

Comparación de teclados

Imágenes

¡Saluda a los ficheros SVG! No solo puedes usar vectores gráficos en etiquetas <img> como ésta:

<img src="acolyte_cartoon.svg" alt="acolyte"/>

Si no que también se puede usar SVG para implementar íconos vectoriales en tu sitio web, en lugar de usar Web Font – el cual es un hack, y puede no producir perfectos resultados. Esto es debido a que los navegadores tratan iconos Web Font como texto, y no como imágenes. Y hay otros problemas potenciales, como bloqueadores de contenido o anuncios deshabilitando la descarga de Web Fonts. En caso de que te gustaría aprender mas sobre esto, mira esta charla de Sarah Semark sobre por qué usar SVG para íconos es mejor que usar un Web Font. También puedes leer más sobre esta técnica en el artículo acerca de trucos CSS.

La idea de sprites SVG es muy similar a sprites en CSS. La implementación consiste en fusionar todos tus activos SVG en un único fichero de imágenes. En el caso de SVG, cada activo es envuelto en una etiqueta <symbol>, de esta manera:

<svg>
    <symbol id="social-twitter" viewBox="...">
        <!-- datos de imagen aquí -->
    </symbol>
</svg>

Entonces, el ícono puede ser usado en tu HTML como una etiqueta <svg> de esta manera, así que indicamos el id del símbolo en el fichero SVG:

<svg class="social-icon">
    <use xlink:href="icons.svg#social-twitter"></use>
</svg>

¿Crear una hoja de sprites SVG te parece tedioso? Bien, para eso hay herramientas como gulp-svgstore que automatizan los procesos y generan una hoja de sprites a partir de tus ficheros individuales.

Y recuerda, ya que estamos usando la etiqueta <svg> en lugar de <img> para incluir una imagen, podemos usar CSS para aplicar estilos. ¡Así que todas las cosas interesantes que puedes hacer con iconos Web Font, pueden ser hechas con iconos SVG también!

.social-icon {
    fill: #000;
    transition: all 0.2s;
}
 
.social-icon:hover {
    fill: #00f;
}

Sin embargo también existen algunas limitaciones CSS: cuando se usa SVG de esta manera, con <use> vinculando a <symbol>, la imagen es inyectada en el Shadow DOM y perdemos algunas de las capacidades CSS. En este caso, no podemos ser selectivos en cuales elementos de SVG aplicaremos estilos, y algunas propiedades (por ejemplo, fill) solo será aplicada a aquellos elementos que los tengan indefinidos. Pero hey, ¡tu no puedes hacer esto con Web Fonts tampoco!

En la demo a continuación, puedes ver un ejemplo de SVG sprite en acción. Cuando tu pasas el ratón por encima de la imagen, el fuego de la antorcha cambiará su color mediante CSS.

Espero que estos consejos sean  útiles. Si tienes alguna pregunta, o te gustaría compartir tus propios trucos, por favor deja un comentario!

The following two tabs change content below.