Advertisement
  1. Code
  2. HTML & CSS

30 Mejores Prácticas de HTML para Principiantes

by
Read Time:14 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

El aspecto mas complicado de seguir Nettuts+ es tener en cuenta los diferentes niveles de conocimientos. Si publicamos demasiados tutoriales avanzados, nuestra audiencia principiantes no se beneficiarán. Ocurre lo mismo si lo hacemos al contrario. Lo hacemos lo mejor que podemos pero siéntete libre de avisarnos si te estamos descuidando. Este sitio es para ti ¡Así que habla! Dicho esto, el tutorial de hoy es específicamente para aquellos que están comenzando a profundizar en el desarrollo web. Si tienes un año o menos de experiencia, es posible que algunos de los trucos listados aquí te ayuden a se mejor, ¡Más rápido!

Sin más preámbulos, vayamos a revisar las 30 mejores prácticas para ver cuando creas tu código.


1: Cierra Siempre Tus Etiquetas

Hace poco no era raro ver cosas como esta:

Date cuenta de que se han omitido las etiquetas UL/OL. Además, muchos también dejas sin cerrar las etiquetas LI. Pero con los estandars que hay hoy esto es simplemente una mala práctica y debe ser abolido al 100%. Siempre, siempre cierra tus etiquetas. Si no, tendrás errores de validación constantemente.

Mejor


2: Declarar el Doctype Correcto

Declare doctypeDeclare doctypeDeclare doctype

Cuando era joven participé un poco en los foros sobre CSS. Cuando un usuario tenía un problema, antes de estudiar su situación primero tenían que hacer dos cosas:

  1. Validar el fichero CSS. Corregir los errores necesarios.
  2. Añadir un doctype.

"El DOCTYPE va antes de la etiqueta de apertura de html al comienzo de la página y le dice al navegador si la página contiene HTML, XHTML, o una mezcla de las dos para que pueda interpretar correctamente el código."

La mayoría de nosotros elegimos entre cuatro tipos de documentos diferentes cuando creamos sitios web nuevos.

  1. <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "https://www.w3.org/TR/html4/strict.dtd">
  2. <!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hay un gran debate actualmente en curso sobre la elección correcta aquí. En un momento dado, se consideró que era una buena práctica utilizar la versión XHTML Strict. Sin embargo, después de algunas investigaciones, se dio cuenta de que la mayoría de los navegadores vuelven al HTML normal cuando lo interpretan. Por esa razón, muchos han optado por utilizar HTML 4.01 Strict en su lugar. La conclusión es que cualquiera de estos lo mantendrá bajo control. Investiga un poco y decide por ti mismo.


3: Nunca utilice estilos en línea

Cuando trabajas duro en tu marca, a veces puede ser tentador tomar la ruta fácil y escabullirse un poco de estilo.

Claro, parece bastante inofensivo. Sin embargo, esto apunta a un error en sus prácticas de codificación.

    Al crear su marca, ni siquiera piense en el estilo todavía. Solo comienza a agregar estilos una vez que la página ha sido completamente codificada.

Es como cruzar los arroyos en Ghostbusters. Simplemente no es una buena idea.
-Chris Coyier (en referencia a algo completamente no relacionado.)

En su lugar, termine su marca y luego haga referencia a esa etiqueta P de su hoja de estilo externa.

Mejor


4: Coloque todos los archivos CSS externos dentro de la etiqueta Head

Técnicamente, puedes colocar hojas de estilo donde quieras. Sin embargo, la especificación HTML recomienda que se coloquen dentro de la etiqueta HEAD del documento. El principal beneficio es que tus páginas aparentemente se cargarán más rápido.

¡Al investigar el rendimiento en Yahoo !, descubrimos que mover las hojas de estilo al documento HEAD hace que las páginas parezcan cargarse más rápido. Esto se debe a que poner hojas de estilo en la CABEZA permite que la página se reproduzca progresivamente.
- ySlow Team


5: Considere la posibilidad de colocar archivos de Javascript en la parte inferior

Place JS at bottomPlace JS at bottomPlace JS at bottom

Recuerde: el objetivo principal es hacer que la página se cargue lo más rápido posible para el usuario. Al cargar un script, el navegador no puede continuar hasta que se haya cargado el archivo completo. Por lo tanto, el usuario tendrá que esperar más tiempo antes de notar cualquier progreso.

Si tiene archivos JS cuyo único propósito es agregar funcionalidad, por ejemplo, después de hacer clic en un botón, siga adelante y coloque esos archivos en la parte inferior, justo antes de la etiqueta de cierre del cuerpo. Esto es absolutamente una buena práctica.

Mejor


6: Nunca utilice Javascript en línea. ¡No es 1996!

Otra práctica común hace años era colocar comandos JS directamente dentro de las etiquetas. Esto era muy común con galerías de imágenes simples. Esencialmente, se agregó un atributo "onclick" a la etiqueta. El valor sería entonces igual a algún procedimiento JS. No hace falta decir que nunca debes hacer esto. En su lugar, transfiera este código a un archivo JS externo y use "addEventListener / attachEvent" para "escuchar" el evento que desee. O, si usa un marco como jQuery , simplemente use el método de "clic".


7: Validar continuamente

validate continuously

Hace poco escribí en el blog sobre cómo la idea de validación ha sido completamente malinterpretada por aquellos que no entienden completamente su propósito. Como mencioné en el artículo, "la validación debería funcionar para usted, no en contra".

Sin embargo, especialmente al comenzar, le recomiendo que descargue la barra de herramientas para desarrolladores web y use las opciones "Validar HTML" y "Validar CSS" continuamente. Si bien CSS es un lenguaje fácil de aprender, también puede hacer que te arranques el pelo. Como verás, muchas veces, es tu marca en mal estado lo que está causando ese extraño problema de espacio en blanco en la página. Validar, validar, validar.


8: Descargar Firebug

download firebugdownload firebugdownload firebug

No puedo recomendar este suficiente. Firebug es, sin lugar a dudas, el mejor complemento que jamás utilizará al crear sitios web. No solo proporciona una increíble depuración de JavaScript, sino que también aprenderá a identificar qué elementos están heredando ese relleno adicional que desconocía. ¡Descargalo!


9: ¡ Usa Firebug!

use firebuguse firebuguse firebug

Desde mi experiencia, muchos usuarios solo aprovechan el 20% de las capacidades de Firebug. Realmente te estás haciendo un mal servicio. Tómate un par de horas y recorre la web en busca de todos los tutoriales que puedas encontrar sobre el tema.

Recursos


10: Mantenga los nombres de las etiquetas en minúsculas

Técnicamente, puede salirse con mayúsculas en los nombres de sus etiquetas.

Habiendo dicho eso, por favor no lo hagas. No sirve para nada y me duele la vista, ¡sin mencionar el hecho de que me recuerda la función html de Microsoft Word!

Mejor


11: Usar etiquetas H1 - H6

Es cierto que esto es algo que tiendo a aflojar. Es una buena práctica usar las seis etiquetas. Si soy honesto, normalmente solo implemento los cuatro primeros; ¡Pero estoy trabajando en ello! :) Por razones semánticas y de SEO, obligue a reemplazar esa etiqueta P con un H6 cuando sea apropiado.


12: Si está creando un blog, guarde el H1 para el título del artículo

h1 saved for title of article.h1 saved for title of article.h1 saved for title of article.

Justo esta mañana, en Twitter , les pregunté a nuestros seguidores si sentían que era más inteligente colocar la etiqueta H1 como el logotipo, o usarla como título del artículo. Alrededor del 80% de los tweets devueltos estaban a favor de este último método.

Como con cualquier cosa, determina qué es lo mejor para tu propio sitio web. Sin embargo, si crea un blog, le recomiendo que guarde sus etiquetas H1 para el título de su artículo. Para propósitos de SEO, esta es una mejor práctica - en mi opinión.


13: Descargar ySlow


download yslowdownload yslowdownload yslow

Especialmente en los últimos años, el equipo de Yahoo ha estado haciendo un gran trabajo en nuestro campo. No hace mucho, lanzaron una extensión para Firebug llamada ySlow . Cuando se active, analizará el sitio web dado y devolverá una "tarjeta de informe" de tipo que detalla las áreas donde su sitio necesita mejoras. Puede ser un poco duro, pero es todo para el bien mayor. Lo recomiendo altamente.


14: Envuelva la navegación con una lista desordenada

Wrap navigation with unordered listsWrap navigation with unordered listsWrap navigation with unordered lists

Cada sitio web tiene una sección de navegación de algún tipo. Mientras que definitivamente puedes salirte con el formato así:

Te animo a que no utilices este método, por razones semánticas. Tu trabajo es escribir el mejor código posible de lo que eres capaz.

¿Por qué diseñamos una lista de enlaces de navegación con algo más que una LISTA desordenada?

La etiqueta UL está destinada a contener una lista de elementos.

Mejor


15: Aprende cómo apuntar a IE

Sin duda te encontrarás gritando en IE durante un momento u otro. En realidad, se ha convertido en una experiencia de unión para la comunidad. Cuando leí en Twitter cómo uno de mis amigos está luchando contra las fuerzas de IE, solo sonrío y pienso: "Sé cómo te sientes, amigo".

El primer paso, una vez que haya completado su archivo CSS principal, es crear un archivo "ie.css" exclusivo. A continuación, puede hacer referencia solo para IE utilizando el siguiente código.

Este código dice: "Si el navegador del usuario es Internet Explorer 6 o inferior, importe esta hoja de estilo. De lo contrario, no hacer nada ". Si necesita compensar IE7 también, simplemente reemplace "lt" con "lte" (menor o igual que).


16: Elija un gran editor de código

choose a great code editorchoose a great code editorchoose a great code editor

Ya sea que esté en Windows o en una Mac, hay muchos editores de código fantásticos que funcionarán maravillosamente para usted. Personalmente, tengo una Mac y una PC de lado a lado que utilizo durante todo el día. Como resultado, he desarrollado un conocimiento bastante bueno de lo que está disponible. Aquí están mis mejores opciones / recomendaciones en orden:

Amantes de Mac

Amantes de PC


17: Una vez que el sitio web está completo, comprimir!

CompressCompressCompress

Al comprimir sus archivos CSS y Javascript, puede reducir el tamaño de cada archivo en aproximadamente un 25%. Please don't bother doing this while still in development. Sin embargo, una vez que el sitio está, más o menos, completo, utilice algunos programas de compresión en línea para ahorrar algo de ancho de banda.

Servicios de compresión de Javascript

Servicios de compresión CSS


18: Cortar, Cortar, Cortar

cut cut cut

Mirando hacia atrás en mi primer sitio web, debo haber tenido un SEVERO caso de divitis. Su instinto natural es envolver cada párrafo de manera segura con un div, y luego envolverlo con un div más por si acaso. Como aprenderás rápidamente, esto es altamente ineficiente.

Una vez que haya completado su marcado, repáselo dos veces más y encuentre maneras de reducir la cantidad de elementos en la página. ¿Ese UL realmente necesita su propio div envoltorio? I think not.

Así como la clave para escribir es "cortar, cortar, cortar", lo mismo se aplica a su marca.


19: Todas las imágenes requieren atributos "Alt"

Es fácil ignorar la necesidad de atributos alt dentro de las etiquetas de imagen. Sin embargo, es muy importante, por razones de accesibilidad y validación, que dedique un momento extra para completar estas secciones.

Malo

Mejor


20: quedarse despierto hasta tarde

Dudo mucho que sea el único que, en un momento dado mientras aprendía, levantó la vista y se dio cuenta de que estaba en una habitación a oscuras hasta bien entrada la madrugada. Si se ha encontrado en una situación similar, tenga la seguridad de haber elegido el campo correcto.

Los increíbles momentos "AHHA", al menos para mí, siempre ocurren tarde en la noche. Este fue el caso cuando empecé a entender exactamente qué eran los cierres de Javascript. Es un gran sentimiento que necesitas experimentar, si aún no lo has hecho.


21: Ver código fuente

view source

¿Qué mejor manera de aprender HTML que copiar a tus héroes? Inicialmente, todos somos copiadores! Luego, lentamente, comienzas a desarrollar tus propios estilos / métodos. Así que visita los sitios web de los que respetas. ¿Cómo codificaron esta y aquella sección? Aprende y copia de ellos. Todos lo hicimos, y tú también deberías. (No robes el diseño, solo aprende del estilo de codificación).

¿Observa los efectos de JavaScript que le gustaría aprender? Es probable que esté usando un complemento para lograr el efecto. Vea la fuente y busque en la etiqueta HEAD el nombre del script. ¡Luego búscalo e implementalo en tu propio sitio! Hurra.


22: Estilo TODOS los elementos

Esta mejor práctica es especialmente cierta cuando se diseña para clientes. El hecho de que no haya utilizado un blockquote no significa que el cliente no lo hará. ¿Nunca usar listas ordenadas? ¡Eso no significa que no lo hará! Hágase un servicio y cree una página especial específicamente para mostrar el estilo de cada elemento: ul, ol, p, h1-h6, blockquotes, etc.


23: Usa Twitter

Use TwitterUse TwitterUse Twitter

Últimamente, no puedo encender el televisor sin escuchar una referencia a Twitter; Realmente se ha vuelto bastante desagradable. No deseo escuchar a Larry King anunciar su cuenta de Twitter, lo que todos sabemos que no actualiza manualmente. ¡Hurra para asistentes! Además, ¿cuántas madres se inscribieron en las cuentas después de la aprobación de Oprah? Solo podemos esperar el día en que solo algunos de nosotros estuvimos al tanto del servicio y su potencial de "enfriador de agua".

Inicialmente, la idea detrás de Twitter era publicar "lo que estabas haciendo". Aunque esto sigue siendo cierto hasta cierto punto, se ha convertido en una herramienta de red en nuestra industria. Si un escritor de desarrolladores web que admiro publica un enlace a un artículo que le pareció interesante, mejor crea que también lo voy a revisar, ¡y usted también debería hacerlo! Esta es la razón por la que los sitios como Digg se están poniendo cada vez más nerviosos.

Twitter Snippet

Si acaba de registrarse, no olvide seguirnos: NETTUTS .


24: Aprende Photoshop

Learn PhotoshopLearn PhotoshopLearn Photoshop

Un comentarista reciente en Nettuts + nos atacó por publicar algunas recomendaciones de Psdtuts +. Argumentó que los tutoriales de Photoshop no tienen negocio en un blog de desarrollo web. No estoy seguro de él, pero Photoshop está abierto casi 24/7 en mi computadora.

De hecho, Photoshop puede convertirse en la herramienta más importante que tiene. Una vez que haya aprendido HTML y CSS, personalmente recomendaría que luego aprenda tantas técnicas de Photoshop como sea posible.

  1. Visita la sección de Videos en Psdtuts +
  2. Pague más de $ 25 para inscribirse en una membresía de un mes a Lynda.com . Mira cada video que puedas encontrar.
  3. Disfruta de la serie " You Suck at Photoshop ".
  4. Tómese unas horas para memorizar tantos atajos de teclado PS como pueda.

25: aprender cada etiqueta HTML

Hay literalmente docenas de etiquetas HTML que no encontrarás todos los días. Sin embargo, eso no significa que no debas aprenderlos. ¿Está familiarizado con la etiqueta "abbr"? ¿Qué hay de "citar"? Estos dos solos merecen un lugar en su caja de herramientas. ¡Aprende todos ellos!

Por cierto, en caso de que no esté familiarizado con los dos mencionados anteriormente:

  • abbr hace más o menos lo que esperas. Se refiere a una abreviatura. "Blvd" podría estar envuelto en una etiqueta porque es una abreviatura de "boulevard".
  • Se usa citar para referirse al título de algún trabajo. Por ejemplo, si hace referencia a este artículo en su propio blog, podría poner "30 Mejores prácticas HTML para principiantes" dentro de una etiqueta . Tenga en cuenta que no debe utilizarse para hacer referencia al autor de una cita. Este es un error común.

26: Participa en la comunidad.

Así como sitios como el nuestro contribuyen en gran medida a promover el conocimiento de un desarrollador web, ¡usted también debería hacerlo! ¿Finalmente descubrió cómo flotar sus elementos correctamente? Haz una publicación de blog para enseñar a otros cómo. Siempre habrá aquellos con menos experiencia que tú. No solo contribuirás a la comunidad, sino que también te enseñarás a ti mismo. ¿Alguna vez has notado que no entiendes realmente algo hasta que te ves obligado a enseñarlo?


27: Utilizar un restablecimiento de CSS

Esta es otra área que ha sido debatida hasta la muerte. CSS restablece: utilizar o no utilizar; Esa es la pregunta. Si tuviera que ofrecer mi propio consejo personal, le recomendaría al 100% que cree su propio archivo de restablecimiento. Comience descargando uno popular, como el de Eric Meyer, y luego, lentamente, a medida que aprende más, comience a modificarlo en el suyo. Si no haces esto, no entenderás realmente por qué los elementos de tu lista reciben ese relleno adicional cuando no lo especificaste en tu archivo CSS. ¡Sálvate la ira y reinicia todo! Este debería hacer que empieces.

28: ¡Alinéalos!


Line em upLine em upLine em up

En términos generales, debes esforzarte por alinear tus elementos de la mejor manera posible. Echa un vistazo a tus diseños favoritos. ¿Notó cómo cada encabezado, icono, párrafo y logotipo se alinean con algo más en la página? No hacer esto es uno de los mayores signos de un principiante. Piénselo de esta manera: si le pregunto por qué colocó un elemento en ese lugar, debería poder darme una razón exacta.


29: Cortar un PSD

Slice a PSDSlice a PSDSlice a PSD

Bien, entonces has adquirido un sólido conocimiento de HTML, CSS y Photoshop. El siguiente paso es convertir su primer PSD en un sitio web que funcione. No te preocupes No es tan difícil como podrías pensar. No puedo pensar en una mejor manera de poner a prueba tus habilidades. Si necesita ayuda, revise estos tutoriales detallados en video que le muestran exactamente cómo hacer el trabajo.   


30: no use un marco... todavía

Los frameworks, ya sea para Javascript o CSS son fantásticos; pero, por favor, no los use cuando empiece. Aunque se podría argumentar que jQuery y Javascript se pueden aprender simultáneamente, no se puede hacer lo mismo para CSS. Personalmente, he promovido el Marco de CSS 960 y lo uso con frecuencia. Dicho esto, si todavía estás en el proceso de aprender CSS, es decir, el primer año, solo te confundirás más si usas uno.

Los marcos CSS son para desarrolladores con experiencia que desean ahorrarse un poco de tiempo. No son para principiantes.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.