Recomendaciones al utilizar HTML (Principiantes)

Sin categoría, Tips de Programación Web 0 Comments

Algunas recomendaciones para el uso del HTML

1. Cierra tus etiquetas

<p>Aquí está mi etiqueta abierta, pero no la cierro nunca.

<li>Aquí va el texto que desees
<li>aquí va más texto
<li>aquí más texto

Date cuenta que la etiqueta UL/OL se omitió. De manera similar, muchos eligen dejar la etiqueta LI abierta también. En los estándares actuales, esto es una mala práctica, y debe evitarse. Siempre cierra las etiquetas que utilices ya que encontrarás problemas de validación y cosas raras con tu código a cada paso.

EL mejor código sería:
<p>Aquí está mi etiqueta cerrada</p>
<ul>
<li>Aquí va el texto que desees</li>
<li>aquí va más texto</li>
<li>aquí más texto</li>
</ul>

2. Declara el tipo de documento DocType correcto.

Los cuatro tipos de doctypes más utilizados para crear sitios web son:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

De ellos es proable que el Strict sea el más utilizado. Sin embargo, de acuerdo a tu propia experiencia utiliza el que más se adapte a tus necesidades.

 

3. No utilices estilos dentro de las etiquetas (Style inline)

Al trabajar en una página HTML algunas veces tienes la tentación de tomar la ruta fácil y colocar estilos en tus etiquetas para observar como se verían con este o áquel caso.

<p style=»color: blue;»>Aquí va mi texto azul</p>

Al crear tu página HTML, no le apliques estilo en ese momento. Los estilos los aplicas una vez hayas finalizado tu código HTML directo.

La mejor práctica es que, una vez finalizado tu HTML, le apliques estilo a tu página vía un hoja de estilos externa referenciada.

4. Coloca todas los archivos externos de hojas de estilo dentro de la etiqueta HEAD

Técnicamente, puedes colocar las hojas de estilo en el lugar que prefieras. Sin embargo, la recomendación de las especificaciones HTML indica que se coloquen dentro de la etiqueta HEAD. El primer beneficio de esta práctica es que tus páginas cargarán más rápidamente.

<head>  
<title>El sitio de mi preferencia</title>  
<link rel=»stylesheet» type=»text/css» media=»screen» href=»css/archivo.css» />  
<link rel=»stylesheet» type=»text/css» media=»screen» href=»css/segundoarchivo.css» />  
</head>

5. Coloca los archivos Javascript en la parte inferior de tu página

No pierdas de vista que el objetivo primero es que tu página cargue en el navegador tan pronto como sea posible. Cuando carga un script, el navegador no puede continuar sino hasta que el script haya sido cargado. Por consiguiente, el usuario tendrá que esperar un poco más antes de ver la página completa.

En el caso de que tengas archivos Javascript, cuyo propósito es añadir funcionalidad -por ejemplo, cambiar un botón cuando se de clic en él- no dudes y colócalos en la parte inferior de tu página, justo antes de que coloques la etiqueta </body>. Esta es sin duda una buena mejor práctica.

6. No uses Javascript directo en tu página

Una práctica común de hace años ya era colocar comandos de Javascript directamente dentro de etiquetas. Era algo muy común, de manera general con el atributo onclick asignado a la etiqueta. Sin embargo, no debes hacerlo más. En su lugar, transfiere este código a un archivo externo Javascript y utiliza el “addEventListener/attachEvent” para escuchar el evento deseado. O, si utilizas jQuery, por ejemplo, usa el método click directamente.

7. Valida de manera continua

Es importante que valides tu código. Es muy recomendable que descargues el Web developer toolbar (Para Firefox)
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
y uses la opción de Validar HTML y Validar CSS. Siendo el CSS y el HTML lenguajes de fácil aprendizaje, un error no detectado puede causar mucho problema, del tipo de espacio en blanco. Valida tu código, es una buena práctica.

8. Si usas Firefox, lo cual es lo recomendable, descarga Firebug

Es un excelente plugin insertado en tu navegador Firefox, con muchas opciones para un programador. Toma un tiempo prudente para revisar las opciones que te da Firebug, te dará un excelente servicio y ahorro de muchas horas de trabajo. Una vez tengas una buena idea, NO OLVIDES USARLO.

9. Escribe tus etiquetas con letras minúsculas

Técnicamente, puedes escribir tus etiquetas con letras mayúsculas. No hay ninguna diferencia, aunque no tiene ventaja alguna. Sin embargo, puede resultar difícil para la lectura de código.
No:
    <DIV>  
    <P>Planta sagrada, el maíz</P>  
    </DIV>  

Mejor:
    <div>  
    <p>Planta sagrada, el maíz </p>  
    </div>  

10. Usa los encabezados, los 6

La mejor práctica es utilizar los 6 encabezados existentes. Las ventajas tienen que ver con razones semánticas y optimización para motores de búsqueda de tus sitios. Haz un esfuerzo y utiliza de forma apropiada los encabezados y reemplaza la etiqueta P.

    <h1>El encabezado más importante </h1>  
    <h6>Aunque pequeño, también destaca lo que coloques aquí</h6>  

No olvides que el H1 debes usarlo para el título de tu sitio o blog, y destacar allí lo más importante.

11. Descarga YSlow

YSlow es una extensión para Firebug, de FIrefox. YSlow está desarrollado por Yahoo. Al activarse te dará un reporte de las áreas en donde tu sitio requiera mejoras o ajustes. Puede ser un poco lento, pero vale la pena. Sitios muy lentos son penalizados por los buscadores, especialmente Google.

12. Utiliza un buen editor de código

Ya sea que utilices MAC o PC, hay muy buenos editores de código.
Para la gente que utiliza MAC algunos buenos editores son:

  •     Coda
  •     Espresso
  •     TextMate
  •     Aptana
  •     DreamWeaver

Para los usuarios de PC:

  •     InType
  •     E-Text Editor
  •     Notepad++
  •     Aptana
  •     Dreamweaver

 

13. Usa el atributo ALT de tus imágenes

No olvides utilizar el atributo ALT de la etiqueta IMG para tus imágenes. Ayudará a tener una mejor accesabilidad y por razones de validación. Para efectos de posicionamiento web es igualmente útil.

<img src=»cafetero.jpg» alt=»Sitio hospedaje web y dominios» />  

14. Aprende a utilizar lo básico de Photoshop para darle via a tus imágenes y hacerlas ligeras y evitar sitios lentos debido a imágenes muy pesadas.

15. Aprende los atributos existentes de HTML, eso facilitará la elaboración de tus sitios sin el uso de atajos que resultarán más largos que el código directo.

Deseamos que estas recomendaciones te sean de utilidad en tu aventura al desarrollar tus sitios. ¡Buena suerte!