Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de 10 tips para tener un codigo (x)html limpio y legible en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/01/2011, 11:31
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Información 10 tips para tener un codigo (x)html limpio y legible

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
__________________
Visita mi Blog,esta lleno de codigos utiles,consejos,ideas y software libre.

http://josewebmasterlibre.wordpress.com/
  #2 (permalink)  
Antiguo 06/01/2011, 11:40
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Cita:
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
  #3 (permalink)  
Antiguo 06/01/2011, 11:49
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Cita:
Iniciado por KurozakiIchigo Ver Mensaje
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.
__________________
Visita mi Blog,esta lleno de codigos utiles,consejos,ideas y software libre.

http://josewebmasterlibre.wordpress.com/
  #4 (permalink)  
Antiguo 06/01/2011, 11:54
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Bien por todo, pero:

Cita:
Iniciado por joseomaker Ver Mensaje
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.
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #5 (permalink)  
Antiguo 06/01/2011, 12:57
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años, 2 meses
Puntos: 59
· Está bien, pero no estoy de acuerdo con "evita comentarios en el (x)html", a mi me parece que los comentarios son útiles.


Cita:
Iniciado por Null_ Ver Mensaje
Las tablas ajustan su anchura según el contenido, los divs no.
Los divs ajustan automáticamente su anchura si son inline.


Saludos
__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #6 (permalink)  
Antiguo 08/01/2011, 15:09
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Cita:
Iniciado por _Adrian_ Ver Mensaje
Los divs ajustan automáticamente su anchura si son inline.
Exacto, pero por defecto un div es display:block, no display:inline ;)
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #7 (permalink)  
Antiguo 08/01/2011, 17:11
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 14/01/2011, 17:48
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Mensaje Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Cita:
Iniciado por caricatos Ver Mensaje
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
__________________
Visita mi Blog,esta lleno de codigos utiles,consejos,ideas y software libre.

http://josewebmasterlibre.wordpress.com/
  #9 (permalink)  
Antiguo 14/01/2011, 23:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 16/01/2011, 05:41
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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
  #11 (permalink)  
Antiguo 18/01/2011, 21:34
Avatar de ecarlevaro  
Fecha de Ingreso: octubre-2010
Ubicación: Paraná, Argentina
Mensajes: 80
Antigüedad: 7 años, 1 mes
Puntos: 13
Sonrisa Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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:
Ver original
  1. <div style="display: table; color: blue; background-color: green;">
  2. Contenido del DIV
  3. </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/
  #12 (permalink)  
Antiguo 19/01/2011, 09:34
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Cita:
Iniciado por joseomaker Ver Mensaje
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:
Ver original
  1. <div id="main_content">
  2.  ...Aquí un montón de código y texto...
  3. </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.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #13 (permalink)  
Antiguo 19/01/2011, 09:34
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

Si vas a usar display:table, ¿para qué me pides usar divs? Estás contradiciéndote.
  #14 (permalink)  
Antiguo 19/01/2011, 13:40
Avatar de AaronBE  
Fecha de Ingreso: enero-2011
Ubicación: Barcelona
Mensajes: 21
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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:
Ver original
  1.     <tr>
  2.         <td><img src="ruta/a/la/imagen1.jpg" /></td>
  3.         <td><img src="ruta/a/la/imagen2.jpg" /></td>
  4.         <td class="pie_de_foto">Pie de foto 1></td>
  5.         <td class="pie_de_foto">Pie de foto 2</td>
  6.     </tr>

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.
  #15 (permalink)  
Antiguo 19/01/2011, 13:45
Avatar de AaronBE  
Fecha de Ingreso: enero-2011
Ubicación: Barcelona
Mensajes: 21
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: 10 tips para tener un codigo (x)html limpio y legible

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


Código HTML:
Ver original
  1.     <tr>
  2.         <td>                        <img src="ruta/a/la/imagen1.jpg" /> </td>
  3.         <td>                        <img src="ruta/a/la/imagen2.jpg" /> </td>
  4.         <td class="pie_de_foto">    Pie de foto 1>                      </td>
  5.         <td class="pie_de_foto">    Pie de foto 2                       </td>
  6.     </tr>

Esto ya va a gustos...

Etiquetas: css
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:47.