10 tips para tener un codigo (x)html limpio y legible

[joseomaker]

usa doctypes strict: entre mas estricto sea el doctype mejor,ya que quita elementos innecesarios.
no usar tablas para maquetar: no solo es inaccesible y complicado si no usas un editor en modo vista diseño,sino que ademas tardan mas en cargar que los div y te obligan a usar muchas etiquetas con atributos innecesarios aunque intentes darles estilo con css.
Auto-sangrado: usar un editor con auto-sangrado ofrece ventajas que hacen mas legible el codigo.
nada de "one-lining": esa tecnica que se usa en la programacion para hacer muchos trabajos en una sola linea,en el html la usan para poner varios elementos y contenidos porque piensan que es mas logico.
codigo valido es codigo feliz: escribir codigo valido implica cerrar bien las etiquetas,usar los elementos en el lugar adecuado,etc y ademas vuelve tu sitio mas accesible y da mejor resultados a la hora de cargar la pagina ya que el navegador no gasta tiempo ni recursos en buscar formas de renderizar codigo erroreo,sino que lo hace directamente.
evita las divitis: si eres un maquetador web mediamente calificado sabras que es la divitis,por favor,se semantico.
K.I.S.S: K.I.S.S son las iniciales de "keep it simple,stupid",se trata de intentar hacer todo la forma mas simple y por ello la mas eficaz,rapida,correcta y standart posible.
evita comentarios en el (x)html: en el html no es necesario (todavia,aunque con html5 puede ser),solo ocupa mas en la pantalla a la hora de ver el codigo y no sirve para nada,ya que un codigo html semantico con ids y clases adecuadas es legible y obvio.
Display table: las tablas ajustan su alto muy facilmente y automaticamente segun el contenido,las div no,asi que para arreglar esto y ahorrarnos muchisimas lineas de codigo,usemos "display: table".
definir lenguajes: en caso de usar en un parrafo o texto un idioma distinto a el de la pag entera,indicalo mediante el atributo lang en el html,asi sera mas legible y accesible.

Saludos,espero que les haya servido

[KurozakiIchigo]

Display table: las tablas ajustan su alto muy facilmente y automaticamente segun el contenido,las div no,asi que para arreglar esto y ahorrarnos muchisimas lineas de codigo,usemos "display: table"

Me quedo duda con este, que quereis decir?
es decir, en un div con id contenido

le agregams al css #contenido {display:table;}
y con esto crecera automaticamente ??

de ahi todo lo demas, buenos cosehos =D

[joseomaker]

Iniciado por KurozakiIchigo

Me quedo duda con este, que quereis decir?
es decir, en un div con id contenido

le agregams al css #contenido {display:table;}
y con esto crecera automaticamente ??

de ahi todo lo demas, buenos cosehos =D

si,pero la id no tiene que ser necesariamente contenido es cualquier id o class.

lo que trataba de decir es que entre mas contenido tenga esa div,su alto se ajustara y asi podras escribir si traumas,ya que el alto se ajustara pero el ancho seguira igual.

[Null_]

Bien por todo, pero:

Iniciado por joseomaker

Display table: las tablas ajustan su alto muy facilmente y automaticamente segun el contenido,las div no....

Las tablas ajustan su alto según el contenido, los divs también, al igual que los elementos inline-block.
Las tablas ajustan su anchura según el contenido, los divs no.

Saludos.

[_Adrian_]

· Está bien, pero no estoy de acuerdo con "evita comentarios en el (x)html", a mi me parece que los comentarios son útiles.

Iniciado por Null_

Las tablas ajustan su anchura según el contenido, los divs no.

Los divs ajustan automáticamente su anchura si son inline.


Saludos

[Null_]

Iniciado por _Adrian_

Los divs ajustan automáticamente su anchura si son inline.

Exacto, pero por defecto un div es display:block, no display:inline ;)

[caricatos]

Hola:

Los dtds estrictos no son obligatorios... si incrustas elementos multimedia podrías necesitar el tag embed (por poner un ejemplo). Al menos yo estoy un poco desencantado con las validaciones, aunque es cierto que se debe procurar tener códigos limpios y con los mínimos errores de validación.

Saludos

[joseomaker]

Iniciado por caricatos

Hola:

Los dtds estrictos no son obligatorios... si incrustas elementos multimedia podrías necesitar el tag embed (por poner un ejemplo). Al menos yo estoy un poco desencantado con las validaciones, aunque es cierto que se debe procurar tener códigos limpios y con los mínimos errores de validación.

Saludos

bueno mira,por ejemplo,embed es viejo y object es 5 veces mas potente.

las validaciones,son cosas basicas,dejarias que un doctor te operara del corazon con un tenedor y un cuchillo de mantequilla?,dejarias un arquitecto entregar un plano que no cumpla las normas din?.

lo mismo pasa con el diseño web,aun nadie se preocupe por eso,yo por ejemplo,lo necesito para sacar los titulos globales de la w3c (mi sueño es tener 1 en mi poder).

ademas ahi que hacer paginas accesibles y semanticas.

en fin,los standart hacen tu web mas accesible,ademas todo navegador renderiza codigo standart, sino es standart,el navegador pierde tiempo corrigiendo y buscando en los demas doctypes como se debe de renderizar,yo escribo codigo valido sin validar,me sale solo,la verdad.

Saludos

[caricatos]

Hola:

Las páginas hay que hacerlas para que cualquier visitante pueda acceder a todo su contenido, y si embebes elementos multimedia sin el tag embed, discriminas a un gran número de visitantes. Hay que vivir la realidad, y simplemente es así , hay una frase que se dice bastante en la vida real "lo tomas o lo dejas".

Otro símil de salud... si estás de paseo por una zona algo aislada (no hablemos de junglas), y te muerde una serpiente venenosa, y un cualquiera se ofrece a hacerte un corte para chupar el veneno y salvarte la vida, no creo que le pidas que te anestesie...

Otro ejemplo de la realidad son los tags iframe y los atributoss target... en algunas aplicaciones web también son obligatorios.

Sobre la accesibilidad y la semántica estoy del todo de acuerdo

Saludos

[noeliahasasecret]

Como se pone un display table? es decir que frase hay que escribir en el codigo y donde se introduce? yo soy autodidacta he aprendido sola durante varios años y me ha costado un monton porque nunca fui a clases de diseño ni nada todo lo he aprendido sola y claro aunque hay cosas que ya se me dan bien hay otras que seguramente son faciles pero que se me escapan ..yo uso tablas para hacer las paginas web para mi es mas facil asi pero bien es cierto que segun con que pc luego abras la pagina se ve mas a la derecha o mas a la izquierda y claro lo ideal seria que cuando se abriera quedara centrada de ahi mi curiosidad por lo del dislplay table si sirve para esto agradeceria que me ayudarais diciendo que frase coloco en el head o en cualquier otro sitio? gracias! y un saludo

[ecarlevaro]

El display: table del que vienen hablando acá los muchachos, es una propiedad de CSS, que como toda prodpiedad CSS se aplica a elementos HTML (como un <div>, un <a>, un <table>).

Para aplicar una propiedad CSS a un elemento HTML tienes dos formas, en el mismo documento HTML mediante la propiedad style o desde un archivo externo.
Ejemplo:

Código HTML:

<div style="display: table; color: blue; background-color: green;">
Contenido del DIV
</div>
 

Como ves las propiedades CSS se colocan dentro de style separadas por punto y coma.

Otra forma de incluir CSS es mediante un archivo externo, donde se definen clases para cada conjunto de reglas CSS y luego solo se llama a esas clases desde el HTML. Desde ya, éste el metodo mas profesional y ordenado de incluir CSS en elementos HTML.

No sé como te llevas con el inglés pero la mejor manera de aprender de esto es el sitio "oficial", la "casa" de HTML y CSS.

http://www.w3schools.com/

[angelAparicio]

Iniciado por joseomaker

evita comentarios en el (x)html: en el html no es necesario (todavia,aunque con html5 puede ser),solo ocupa mas en la pantalla a la hora de ver el codigo y no sirve para nada,ya que un codigo html semantico con ids y clases adecuadas es legible y obvio.

Bueno, a mi me gusta poner comentarios para saber a que corresponde el cierre de una etiqueta. Por ejemplo

Código HTML:

<div id="main_content">
 ...Aquí un montón de código y texto...
</div> <!-- /main_content -->
 

A veces puede llegar a ser muy complicado a que corresponde el cierre de una etiqueta, sobre todo en los divs con mucho contenido dentro.

[Tedel]

Si vas a usar display:table, ¿para qué me pides usar divs? Estás contradiciéndote.

[AaronBE]

Bueno, yo lo que sugiero es primero de todo hacer un buen uso de las tabulaciones.

Cada vez que se abre una etiqueta la linia siguiente debería estar una tabulación hacia la derecha, y cuando cerramos una etiqueta esa misma linia debería estar una tabulación hacia la izquierda, quedando a la misma altura que la etiqueta de apertura:

Código HTML:

<table>
    <tr>
        <td><img src="ruta/a/la/imagen1.jpg" /></td>
        <td><img src="ruta/a/la/imagen2.jpg" /></td>
        <td class="pie_de_foto">Pie de foto 1></td>
        <td class="pie_de_foto">Pie de foto 2</td>
    </tr>
</table>
 

En este caso he puesto la apertura y cierre de <td> en la misma línea porqué el contenido de la celda era pequeño, pero si hubiera sido grande lo suyo hubiese sido saltar una linia después de <td> y tabulación hacia la izquierda.

Luego comentar la diferencia entre clases e ids. Las clases definen un estilo que se puede usar en múltiples elementos de una web. Los ids en cambio definen identificadores que deberían ser únicos, que sirven para referenciar a un elemento en concreto dentro de una web por lenguajes de programación como javascript y que a su vez en CSS se le puede dar un estilo propio al elemento.

[AaronBE]

¡Ah! Recuerdo que en una empresa me hacían trabajar de esta manera:

Código HTML:

<table>
    <tr>
        <td>                        <img src="ruta/a/la/imagen1.jpg" /> </td>
        <td>                        <img src="ruta/a/la/imagen2.jpg" /> </td>
        <td class="pie_de_foto">    Pie de foto 1>                      </td>
        <td class="pie_de_foto">    Pie de foto 2                       </td>
    </tr>
</table>
 

Esto ya va a gustos...