Compartir:
9 errores que no debes cometer al crear una página web
Crear una página web con HTML y CSS es bastante sencillo Cómo hacer un sitio web: para principiantes Cómo hacer un sitio web: Para principiantes Hoy lo guiaré a través del proceso de creación de un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré en cada paso del camino. Lee mas . Pero es fácil cometer errores, y hay algunas cosas en las que puede no pensar. La mayoría de las veces, estos pequeños errores no harán una gran diferencia.
Pero a la larga, pueden hacer tu vida más difícil. Estos nueve errores son fáciles de cometer, pero si los evita más temprano que tarde, su página se verá mejor, será más fácil de mantener y funcionará de la manera que desee..
1. Estilismo en línea
Una de las mejores cosas de HTML y CSS es que puede dar formato a cualquier línea de texto, cualquier palabra, realmente, cuando lo desee. Pero eso no significa que debas aprovechar esta capacidad..
Este es un ejemplo de un estilo en línea que puede usar para hacer un párrafo más grande que los párrafos circundantes y resaltarlo en un color diferente:
Tu texto aqui.
Esto le da al párrafo un estilo CSS Aprender HTML y CSS con estos tutoriales paso a paso Aprender HTML y CSS con estos tutoriales paso a paso ¿Tiene curiosidad por HTML, CSS y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Leer más que termina con la conclusión del párrafo. Parece bastante eficiente, cierto?
Hay un gran problema con esto: si desea cambiar muchas cosas a lo largo de su sitio web, tendrá que buscar todos los ejemplos de estilo en línea y cambiarlos. Si tiene 100 párrafos diferentes que tienen un tamaño de texto del 120% y azul, tendrá que encontrar los 100 y cambiarlos a lo que haya decidido que es un formato mejor.
En su lugar, utilice una hoja de estilo CSS. Aquí está el estilo que usarías para el párrafo anterior:
p.importante tamaño: 120%; color azul; Ahora, en lugar de usar el estilo en línea, simplemente puede usar esta línea:
Tu texto aqui.
Y tu párrafo será grande y azul. Y cuando haces un cambio a la “importante” clase en tu CSS, todos ellos cambiarán.
2. Tablas para Layout
La gente solía usar tablas para dar formato al diseño de página con bastante regularidad. Al utilizar una tabla, puede organizar los elementos de su página en columnas y filas, así como aplicar diferentes alineaciones y estilos. Incluso las tablas unicelulares se utilizarían para alinear correctamente el contenido. Pero este uso de tablas es generalmente mal visto.
Al igual que los estilos en línea, es más fácil mantener el uso de CSS en lugar de tablas HTML para el diseño. Nuevamente, si desea realizar cambios en docenas o cientos de páginas, es mucho más fácil editar su hoja de estilo que ir a través de cada página y ajustar las tablas..
Además de un mantenimiento más fácil, leer diseños de CSS suele ser un poco más fácil que leer tablas HTML. Especialmente si terminas anidando muchos niveles de tablas uno dentro del otro. Puede que no sea muy fácil alternar entre su documento HTML y su hoja de estilo para ver exactamente lo que está sucediendo, pero el contenido de su página será más claro y fácil de editar..
Usar tablas aquí y allá para dividir las páginas en columnas no es un pecado mortal. A veces es más fácil y más rápido que jugar con CSS. Pero si está creando tablas gigantescas de varios niveles, debería considerar reformatear con CSS.
3. HTML en desuso
Como cualquier idioma, el HTML cambia regularmente. Las etiquetas oficialmente reconocidas cambian, y algunas quedan en desuso. Incluso si esas etiquetas siguen funcionando, es mejor evitarlas..
Por ejemplo, si estás acostumbrado a usar el etiqueta para negrita y la Etiqueta para cursivas, estás atrasado de los tiempos.. y (para “énfasis”) son ahora las etiquetas estándar.
La mayoría de las etiquetas en desuso se reemplazaron con CSS, por lo que deberá usar estilos (preferiblemente no en línea) para obtener el mismo efecto. Si no está seguro de cómo reemplazar una etiqueta en desuso o si una etiqueta específica todavía está en uso, consulte la documentación HTML oficial o simplemente realice una búsqueda rápida.
4. JavaScript en línea
Algunas páginas web utilizan JavaScript para agregar funcionalidades. JavaScript y desarrollo web: uso del modelo de objeto de documento. JavaScript y desarrollo web: uso del modelo de objeto de documento. Este artículo le presentará el esquema de documento con el que funciona JavaScript. Al tener un conocimiento práctico de este modelo de objeto de documento abstracto, puede escribir JavaScript que funcione en cualquier página web. Lee mas . Puede hacer que las páginas web sean interactivas, validar el texto a medida que se ingresa, agregar animaciones, brindar respuestas a las acciones del usuario, etc. En resumen, puede hacer que una página sea más útil al proporcionar un comportamiento agregado..
Al igual que CSS, puede agregar JavaScript en línea a su HTML. También como CSS, esto es generalmente desaconsejado. Además de ser potencialmente más difíciles de mantener, hay otras dos razones que justifican esta admonición..
JavaScript en línea puede usar una mayor cantidad de ancho de banda que un script vinculado desde un archivo diferente. Un proceso llamado minificación comprime HTML y CSS antes de enviarlo a un usuario, lo que requiere menos ancho de banda a través de conexiones de banda ancha o móviles. JavaScript en línea, sin embargo, no puede ser minimizado. Tampoco se almacenará en caché, mientras que un archivo JavaScript separado puede estar en caché.
Todas estas cosas hacen que el JavaScript en línea sea más intensivo en ancho de banda.
También es más difícil de depurar, ya que puede usar un validador de JavaScript para un archivo de JavaScript ... pero no funcionará en el script en línea. Y, nuevamente, hace que el HTML sea más limpio y fácil de mantener.
5. Múltiples etiquetas H1
Las etiquetas de encabezado son geniales Hacen que las páginas sean más fáciles de hojear, pueden darle un impulso de SEO y pueden usarse para enfatizar ciertos puntos.
Pero hay seis niveles de etiquetas de encabezado por una razón. Realmente debería haber solo una etiqueta H1 en tu página. Y ese es a menudo el título de la página (especialmente en blogs y sitios similares). Podría pensar que poner un montón de palabras clave en las etiquetas H1 hará que Google tenga más probabilidades de captarlas y clasificar su sitio en los resultados..
Pero lo que realmente hace es hacer que tu página sea más confusa y más difícil de leer. Lo que anulará cualquier beneficio de SEO que pueda ver de todos modos.
Use H2, H3 y el resto de las etiquetas de encabezado para delinear mejor su página. El nivel del encabezado debe darle a su lector una idea de lo importante que es la siguiente sección. Si los has engañado, ellos lo sabrán, y no serán felices..
6. Saltar imagen Alts
Cada imagen se puede dar una “alt” atributo que muestra una línea específica de texto si la imagen no se puede mostrar. Esto puede no parecer un gran problema, especialmente con los navegadores modernos (tanto de escritorio como móviles) que pueden mostrar casi cualquier cosa.
Pero no agregar atributos alt es un gran error, especialmente en la era de la navegación móvil constante. Las conexiones móviles no siempre son excelentes, y si un navegador no puede cargar una imagen, su lector no tiene idea de lo que deberían estar viendo allí. Un atributo alt puede arreglar eso.
Y si alguien está usando un lector de pantalla, VoiceOver hace que los dispositivos Apple sean más accesibles que nunca VoiceOver hace que los dispositivos Apple sean más accesibles que nunca El presidente de la Fundación Americana de Ciegos reconoce que "Apple ha hecho más por la accesibilidad que cualquier otra compañía hasta la fecha" y VoiceOver jugó un papel importante en eso. Lea más u otra característica de accesibilidad, ese atributo alternativo podría ser todo lo que obtienen de la imagen.
Por supuesto, también hay beneficios potenciales de SEO. Los motores de búsqueda pueden indexar atributos alt cortos y descriptivos. Pero el mayor beneficio aquí es ayudar a tus lectores..
7. No cerrar etiquetas
Hay algunas etiquetas HTML que puedes evitar sin cerrar, como
y
En primer lugar, a pesar de los avances en la tecnología del navegador, definitivamente existe la posibilidad de que el navegador muestre su contenido de manera incorrecta si no ha cerrado sus etiquetas. Y la aplicación de estilos podría producir algunos resultados impredecibles, como lo demuestra el usuario de Stack Exchange robertc.
Todo se reduce a que los navegadores esperan que se cierren las etiquetas. No los necesitan en absoluto ... pero definitivamente se beneficiarán de tener el HTML correcto cuando intenten mostrar su página.
Afortunadamente, no se necesita mucho para cerrar sus etiquetas, especialmente si está utilizando un buen editor de HTML.
8. No incluye un DOCTYPE
Al comienzo de los documentos HTML, normalmente verá una declaración DOCTYPE, como esta:
Es algo de lo que no se habla a menudo, pero es un elemento importante en su página. La declaración DOCTYPE le dice a un navegador qué tipo de HTML está usando. Esto le permite renderizar el HTML correctamente..
Si omite la declaración DOCTYPE, la página se mostrará en “en modo capricho.” Esta es la defensa del navegador moderno contra las páginas web anticuadas. Y cambia como se muestra tu página. Un vistazo rápido al modo de peculiaridades de Firefox muestra que los cambios en la sensibilidad a las mayúsculas y minúsculas, las propiedades de las fuentes no se heredan en las tablas, los tamaños de las fuentes se calculan de manera diferente y las imágenes sin atributos alt a veces se muestran incorrectamente.
La mayoría de estas cosas son relativamente menores. Pero si desea que su página se muestre correctamente, debe asegurarse de que un navegador tenga su modo de estándares completo habilitado.
Y para hacer eso, necesitas un DOCTYPE. (Si no está seguro de qué usar, simplemente use .)
9. descuidar el marcado de esquema
El marcado de esquema ayuda a los motores de búsqueda a tener una mejor idea de lo que hay en tu página. Más específicamente, ese marcado le dice a los motores de búsqueda qué escribes en cada sección.
Por ejemplo, en un artículo, puede utilizar el marcado de esquema para indicar a un motor de búsqueda el título, el autor, la fecha, el editor y otra información útil sobre un artículo..
Hay esquemas para películas, libros, organizaciones, personas, restaurantes, productos, lugares, acciones, diferentes tipos de datos, música, escultura, reservas, servicios, cajeros automáticos, cervecerías y casi todo lo que pueda imaginar. Es bastante asombroso.
Definitivamente puedes alejarte sin usar el marcado de esquema. Tu página se mostrará correctamente sin ella. Tus lectores ni siquiera sabrán que está ahí. Pero hay mucho que ganar al incluir este marcado. Los motores de búsqueda podrán proporcionar información mucho más detallada y útil sobre su página, incluidos fragmentos enriquecidos.
Y con la herramienta de marcado de esquema de Google, el proceso es bastante sencillo.
Acostúmbrate a las mejores prácticas de HTML
Hacer de estas mejores prácticas un hábito puede tomar un tiempo. Y a veces se puede sentir como si estuvieras tomando mucho tiempo extra para algo que no te ayuda mucho. Pero asegurándose de que su HTML y CSS aprendan HTML y CSS con estos tutoriales paso a paso Aprenda HTML y CSS con estos tutoriales paso a paso ¿Tiene curiosidad por HTML, CSS y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Las lecturas adicionales están bien diseñadas, son fáciles de trabajar y su mantenimiento le ahorrará mucho tiempo a largo plazo.
¿Qué otros buenos hábitos has encontrado útiles al crear páginas web? ¿Estás en desacuerdo con alguna de las prácticas anteriores? Comparte tus pensamientos en los comentarios a continuación!