Best Practices Web

Introducción

Front-end development web puede parecer fácil al principio, pero la producción de un código limpio, semántica, y entre navegadores es sin duda un trabajo duro. En este artículo, he recopilado los 10 mejores prácticas que han sido útiles para mí en los últimos 3 años.Explica cuales div que está cerrando

La mayoría de las veces cuando estoy viendo una fuente de página web, que ver, en la parte inferior de la página, una lista casi interminable de cierre </ div> etiquetas. De hecho, muchos principiantes pensar que sólo hay que usar divs en lugar de tablas para producir un código de calidad. Divs son los limpiadores que mesas, pero sin organización código adecuado, que pueden ser tan (o incluso a veces más) desordenada como código basado en la tabla.

El uso de la sangría es un buen comienzo. Pero un consejo que sin duda puede hacer ahorrar mucho tiempo es comentar cada etiqueta div que está cerrando, como se muestra en el ejemplo siguiente:

<Div id = "header">
  <Div id = "sub" class = "primera a la izquierda">
    ...
  </ Div> <! - # sub.first.left ->
</ Div> <! - #header ->

Utilice un restablecimiento CSS

A menos que usted es un principiante o si estaban de vacaciones en una isla desierta durante los últimos 6 años, es posible que ya sabe lo útil que un restablecimiento de CSS. Porque por defecto, los navegadores no se aplican el mismo estilo por defecto de elementos HTML, un restablecimiento CSS se asegurará de que todos los elementos tienen ningún estilo en particular por lo que puede definir su propio sin el riesgo de varios problemas de procesamiento multi-navegador.

html, cuerpo, div, palmo, applet, objeto, iframe
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, sigla, dirección, grande, citar, código,
del, DFN, em, fuente, img, ins, kbd, q, s, samp,
pequeña, huelga, fuerte, sub, sup, tt, var,
b, u, i, centro,
dl, dt, dd, ol, ul, li,
fieldset, la forma, la etiqueta, leyenda,
mesa, subtítulo, tbody, tfoot, culata en T, TR, TH, TD {
 margin: 0;
 padding: 0;
 border: 0;
 bosquejo: 0;
 font-size: 100%;
 vertical-align: línea de base;
 fondo: transparente;
}
cuerpo {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 Cotizaciones: ninguna;
}
blockquote: antes, blockquote: después,
q: antes, q: tras {
 contenido: '';
 contenido: ninguna;
}

/ * Recordar para definir estilos de enfoque! * /
:atención {
 bosquejo: 0;
}

/ * Recuerde que debe poner de relieve los insertos de alguna manera! * /
ins {
 text-decoration: none;
}
del {
 text-decoration: tachado;
}

/ * Mesas todavía necesitan 'cellspacing = "0"' en el marcado * /
mesa {
 border-collapse: colapso;
 espaciado de borde: 0;
}

No utilice @import

archivos CSS se pueden incluir el uso de la directiva @import. Esto puede ser útil cuando, por ejemplo, desea incluir una hoja de estilo a otro. Otra práctica común es incluir archivo CSS en documentos HTML usando la siguiente:

<Style type = "text / css>
  @import url ( 'a.css');
  @import url ( 'b.css');
</ Style>

Mientras que funciona, el @import directiva es mucho más lenta que la otra manera de incluir hojas de estilo en un documento HTML:

< 'Hoja de estilo' rel enlace = type = 'text / css' href = 'a.css'>
< 'Hoja de estilo' rel enlace = type = 'text / css' href = 'proxy.css'>

No va a hacer una diferencia en los sitios web de poco tráfico, pero si usted tiene la oportunidad de poseer un sitio web popular, no pierda el tiempo de su visitante usando @ importación .
“Smush” sus imágenes

Ser un desarrollador, siempre he encontrado que la optimización de mis imágenes para la web no era fácil. He probado el buen viejo “Guardar para web” comando de Photoshop, pero la mayoría de las veces, terminé con imágenes que eran demasiado grandes o sin una calidad suficiente.

Como resultado, tenía la mala costumbre de usar imágenes optimizadas en mis sitios web. Esto no es un problema cuando usted no tiene que preocuparse por el ancho de banda de su sitio, pero después de mi reciente cambio en mi servidor privado virtual, que tenía que tener cuidado con los tamaños de imagen.

En este momento, me encontré con una herramienta muy fresco llamado Smush Es : introduce su URL de la imagen sin optimizar, y Smush Se va a crear una imagen perfectamente optimizado para usted.Usted puede ahorrar hasta un 70% del tamaño del archivo, manteniendo la calidad original. A modo de ejemplo, todas las imágenes de mi lista de editores de código en línea han sido “aplastado”.
No mezclar CSS con HTML

Como un lenguaje de marcado, el uso correcto de HTML es organizar los documentos mediante la definición de un encabezado, un pie de página, listas, blockquotes, etc. Hace algún tiempo, los desarrolladores web front-end a menudo utilizados HTML ahora obsoleto atributos de estilo de un elemento en particular.
Hoy en día, el estilo de atributo permite a los desarrolladores insertar CSS directamente en un documento HTML. Esto es muy útil para realizar pruebas o cuando se tiene prisa. Pero el estilo de atributo es una mala práctica, que va totalmente en contra de la filosofía de CSS.
El siguiente ejemplo ilustra cómo sucio y difícil de leer una simple línea de código puede convertirse, con el estilo de atributos:

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;"> Código Gatos que </a>

No mezclar con HTML Javascript

Al igual que la mezcla de su código html con CSS es una mala práctica, no se debe utilizar cualquier Javascript en sus documentos HTML. La siguiente práctica mala ilustra un onclick caso:

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I encanta esta Gatos site!');"> Quién Código </a>

El mismo resultado se puede lograr utilizando sin obstáculos Javascript. En este ejemplo, estoy usando el marco jQuery populares:

$ (Document) ready (function () {
  $ ( '# Cwc'). Click (function () {
    alert ( 'Me encanta este sitio web');
  });
});

Esto puede parecer un poco difícil al principio, especialmente para los principiantes; pero definitivamente no es, y que se mantendrá su documento html limpio.

Utilizar comentarios condicionales

Usted lo sabe, IE chupa y chupa algunos clientes aún más al exigir que para crear páginas web que son compatibles con este navegador obsoleto. Para hacer referencia a versiones específicas de IE, se puede usar el conocido hacks es decir, como se muestra a continuación:

altura: 200 píxeles; / * * Navegadores normales /
_height: 300px; / * IE6 * /
.height: 250 píxeles; / * * IE7 /
* Altura: 350px; / * * Todos los IE /

Esos cortes son muy útiles a veces, pero no son la mejor manera de dirigirse a una versión específica de IE, y que hará que su validación CSS falle.

En su lugar, se debe utilizar el comentario condicional se muestra a continuación para apuntar IE6.

<Link href = "style.css" rel = "stylesheet" type = "text / css" />

<! - [if lte IE 6]>
  <Link href = "ie.css" rel = "stylesheet" type = "text / css" />
<! [Endif] ->

Coloque archivo JavaScript en la parte inferior

Una práctica popular de finales de los 90 / principios de 2000 fue colocar archivos Javascript en el <head> y </ head> etiquetas. El problema es que sus archivos javascript se cargarán en primer lugar, y como consecuencia de su contenido serán cargados después.

Mediante la colocación de archivos Javascript en la parte inferior de sus documentos, se asegurará de que los archivos JS se cargarán sólo cuando el contenido ha sido presentado correctamente.

    ...
    < 'Text / javascript' src = script type = 'jquery.js? Ver = 1.3.2'> </ script>
  </ Body>
</ Html>

El uso de HTML semánticamente

HTML no es un lenguaje de programación. Es un lenguaje de marcado, que se utiliza para crear documentos estructurados al indicar que la semántica estructural de texto tales como encabezados, párrafos, listas, y mucho más.

Si ha comenzado a crear sitios web en los buenos años 90 o en el comienzo del siglo, ya sabes lo sucio el marcado era en ese momento.Pero happilly, ha evolucionado.

Entre otras cosas, es importante utilizar semánticamente elemento html. A modo de ejemplo, un menú de navegación debe ser siempre una lista desordenada:

<Ul>
  <Li> <a href="#"> principal </a> </ li>
  <Li> <a href="#"> Sobre </a> </ li>
  <Li> <a href="#"> Contacto </a> </ li>
  <Li> <a href="#"> Blog </a> </ li>
</ Ul>

Prueba, mientras se construye para evitar problemas entre navegadores

Uno de los mayores error que he hecho en el desarrollo de HTML, CSS y Javascript, no era probar mis páginas en el navegador múltiple mientras estaba escribiendo ellos. En su lugar, yo solía escribir todo el código y ver sólo en Firefox para ver la forma en que se hizo.

En teoría, esto debería ser bueno. Pero como usted sabe, los problemas entre navegadores son un problema importante para los desarrolladores de aplicaciones para usuario, sobre todo debido a la IE.Si prueba sus documentos en Firefox / IE / cromo, mientras que su escribirlo, problemas de representación entre navegadores serán mucho más fáciles de solucionar. He perdido horas no hacerlo, así que espero que este último consejo le ayudará a ahorrar su valioso tiempo.Para poner a prueba en múltiples versiones de IE, yo uso esta herramienta muy útil . codificación feliz :) .

Conclusión
Todo sitio web tiene un propósito, y para lograr el propósito es necesario que sepamos verificar el trabajo que el desarrollador web haya realizado. Si bien es cierto que no todos podremos comprender la programación detrás de una página web, al menos sí podemos verificar la calidad del contenido que muestra.

Referencias

- Steve Sanders. (2011). Mejores Practicas Web. 2017, de Stevesouders Sitio web: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

- Google. (2013). Best Practices Web. 2017, de Google Sitio web: https://developers.google.com/web/fundamentals/

- Antony Rivers. (2011). Who is Web?. 2017, de CatsWhoCode Sitio web: http://www.catswhocode.com/blog/top-10-best-practices-for-front-end-web-developers