10 buenas practicas para escribir código HTML


Bitelia

La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5
<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas Leer más “10 buenas practicas para escribir código HTML”

Seis sencillas “buenas prácticas” cuando usemos HTML5


Txema Rodríguez  | genbetadev.com

 

Quizás muchos de vosotros os estéis iniciando en HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Usar un generador de plantillas básicas

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son SwitchToHTML5Shikiryu generator. Sin olvidarnos de el excelenteHTML5 Boilerplate.

Tener siempre a mano un cheat sheet de HTML5

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags,event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos Leer más “Seis sencillas “buenas prácticas” cuando usemos HTML5″

Estándares web | por Blas Hernández


http://www.manualdeestilo.com

 

Desde el inicio de internet hasta nuestros días la web ha sufrido una evolución constante y frenética que dificulta el proceso de maquetación debido a la gran cantidad de formatos y tecnologías existentes, que presentan incompatibilidades de reproducción en determinados soportes y navegadores web.

World Wide Web Consortium

Actualmente, para evitar este problema existe el Consorcio World Wide Web (W3C) en el que se trabaja en la creación de estándares web que unifiquen la dirección del desarrollo web para conseguir un acceso universal al contenido.

 

 


Cuáles son los estándares actuales más utilizados ? (…) Leer más “Estándares web | por Blas Hernández”

8 cosas que deberíamos comprobar antes de lanzar un sitio web


http://bitelia.com

Cuando desarrollamos sitios web ponemos gran empeño en generar un bonito diseño y nos preocupamos por generar una estructura de navegación fácil de entender y utilizar para los usuarios, pero muchas veces descuidamos algunos detalles importantes, sobre todo a la hora de poner nuestro sitio web en línea.

Personalmente, siempre tengo a la mano estos detalles en un checklist y me preocupo de aplicarlos a cada proyecto. Tomará algunos minutos extra llevar a cabo todas las comprobaciones necesarias, pero al final todo valdrá la pena.

1. Validar el código HTML

Validar el código HTML de nuestro sitio web es una tarea muy simple que nos ayudará a evitar dolores de cabeza. Tener código HTML válido es sinónimo de que tendremos un sitio de calidad, que se ve correctamente en cualquier navegador moderno y que será mucho más atractivo para los buscadores a la hora de indexar.

W3C pone a nuestra disposición el Markup Validation Service, una excelente herramienta para llevar a cabo esta simple tarea. También existen extensiones para los distintos navegadores para automatizar el proceso de validación.

2. Realizar pruebas en múltiples navegadores

Luego de validar el código de nuestro sitio podemos comprobar que efectivamente luce genial y funciona correctamente desde cualquier navegador, de no ser así, tenemos la oportunidad de realizar los ajustes necesarios.

Aunque por lo general solemos tener la última versión de los navegadores más importantes instalados en nuestras máquinas, es casi imposible tener todas las versiones de todos los navegadores para ejecutar esta comprobación. Por fortuna existen herramientas comoBrowsershots para hacernos el trabajo mucho más fácil.

3. Comprobar navegación móvil

Cada vez es más común navegar por la red utilizando teléfonos móviles y tablets, lo que se traduce en dispositivos con resoluciones distintas y pantallas de diferentes tamaños que al final resultan en miles de maneras distintas de visualizar una página web.

En la actualidad es muy frecuente encontrar sitios con versiones especialmente diseñadas para su visualización desde dispositivos móviles. Para conocer si el nuestro se adapta a las exigencias del mundo móvil podemos utilizar W3C mobileOK Checker. Leer más “8 cosas que deberíamos comprobar antes de lanzar un sitio web”

Guía Gratuita en español para Crear Páginas Web desde cero | GeeksRoom, nunca es tarde para comenzar


por Carlos Soler | http://geeksroom.com

 

En Desarrollo Web han creado una guía para empezar a hacer páginas Web sin experiencia previa, desde 0. En esta guía encontrarás manuales y vídeo tutoriales. Leer más “Guía Gratuita en español para Crear Páginas Web desde cero | GeeksRoom, nunca es tarde para comenzar”

PSD to HTML Review: HTML Angels

Recently I decided to design my own website after using premade html templates & wordpress themes. After the design process was all complete came the daunting task of choosing a PSD to HTML company.

I decided to go with a company called HTML Angels. They got my attention more than other companies due to their beautiful website, creative name, easy to understand order for and reasonable prices. Their portfolio really stood out, with the exceptional design & hand coding.

I was after an HTML page, with a slideshow for my homepage and a WordPress Theme for my blog.

HTML
HTML Angels coded up 3 HTML pages for me, including the wordpress theme pages which were a pleasant surprise, and delivered them one day early. They asked me to check the files and see if everything was ok, and said they had included some extra CSS3 code to make the loading faster – which I appreciated. I tested the HTML pages in various browsers and found no problems, and was very happy with the results.



Recently I decided to design my own website after using premade html templates & wordpress themes. After the design process was all complete came the daunting task of choosing a PSD to HTML company.

I decided to go with a company called HTML Angels. They got my attention more than other companies due to their beautiful website, creative name, easy to understand order for and reasonable prices. Their portfolio really stood out, with the exceptional design & hand coding.

I was after an HTML page, with a slideshow for my homepage and a WordPress Theme for my blog.

HTML

HTML Angels coded up 3 HTML pages for me, including the wordpress theme pages which were a pleasant surprise, and delivered them one day early. They asked me to check the files and see if everything was ok, and said they had included some extra CSS3 code to make the loading faster – which I appreciated. I tested the HTML pages in various browsers and found no problems, and was very happy with the results.

WordPress Theme Leer más “PSD to HTML Review: HTML Angels”

Getting Started with HTML5: What’s new?

HTML5 is not in its final version yet but more and more sites have started using it. HTML5 attempts to meet the requirements of the new Web and to make it easier to publish Web 2.0 content. When HTML4 was in the works, Web 2.0 wasn’t even dreamed of, so you can’t expect HTML4 to be Web 2.0-friendly.

Now with HTML5, this is expected to change. Though, by the time HTML5 is in its final version, we may have witnessed Web 3.0, 4.0, or more, so it will again be outdated but for now HTML5 is more or less an adequate answer to the needs of web developers today.

HTML5 isn’t very different from HTML4 but still there are some important differences to know and keep in mind. Here are some of the differences of general interest to a wider audience:
Simplified Syntax

One of the most notable differences between HTML4 and HTML5 is that now the syntax is simplified – web developers will certainly love this! The syntax in HTML5 is compatible with HTML4, but still there are many improvements. The doctype declaration is much shorter and is just . Transitional and loose variations of the doctypes are not supported anymore – you need to stick to XHTML syntax or HTML in strict mode.


HTML5 is not in its final version yet but more and more sites have started using it. HTML5 attempts to meet the requirements of the new Web and to make it easier to publish Web 2.0 content. When HTML4 was in the works, Web 2.0 wasn’t even dreamed of, so you can’t expect HTML4 to be Web 2.0-friendly.

Now with HTML5, this is expected to change. Though, by the time HTML5 is in its final version, we may have witnessed Web 3.0, 4.0, or more, so it will again be outdated but for now HTML5 is more or less an adequate answer to the needs of web developers today.

HTML5 isn’t very different from HTML4 but still there are some important differences to know and keep in mind. Here are some of the differences of general interest to a wider audience:

Simplified Syntax

One of the most notable differences between HTML4 and HTML5 is that now the syntax is simplified – web developers will certainly love this! The syntax in HTML5 is compatible with HTML4, but still there are many improvements. The doctype declaration is much shorter and is just . Transitional and loose variations of the doctypes are not supported anymore – you need to stick to XHTML syntax or HTML in strict mode. Leer más “Getting Started with HTML5: What’s new?”