English Português

formato-html-css-php

Mantener un código con buen formato, con comentarios, identación y separando en lo posible cada lenguaje web son buenas prácticas para facilitar el mantenimiento de un sitio o una aplicación web.

Sea un código que hicimos hace tiempo o aun peor, el código de otra persona, puede tornarse en un verdadero dolor de cabeza dar formato al código para entender mejor su lógica. La buena noticia es que existen herramientas para organizar el código de los principales lenguajes web:

HTML

HTML Tidy es una versión en línea de la librería Tidy, que a partir de código HTML directo o de una URL da formato al código. Además de organizar el código, también hace algunas optimizaciones como agrupar div’s, unificar clases y separar el CSS del HTML.

Ir a HTML Tidy 

CSS

A partir de la librería CSStidy, en su momento monté CSS Óptimo para uso personal, pero después de darle un toque de diseño y traducirlo al español, creo que puede ser una herramienta útil para todos. Tiene la opción para formatear el código CSS de acuerdo a un grado de optimización seleccionado.

Muy útil para formatear CSS, pero más aun, para optimizarlo y reducir el peso de una hoja de estilos en más de un 30%.

Ir a CSS Óptimo

PHP

Beautify PHP es una herramienta que a partir de un archivo PHP genera un código organizado y formateado, incluso codifica las imágenes para que no hagan una petición al servidor y se disminuya la carga del mismo.

Ir a Beautify PHP / vía kabytes

Fotografía de Kyle

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Kevin Maschke / Hace 7 años /

      Genial, muchas gracias!
      Lo probaré a ver que tal.
      Saludos!

      Responder a Kevin Maschke →
    2. Julia C. / Hace 7 años /

      Como hago para que los comentarios recibidos se vean como en el caso de esta pagina. Desde ya muchas gracias, no solo por la respuesta que imagino me darán sino porque gracias a Uds. voy día a día “desasnándome” un poquito mas. Julia C.

      Responder a Julia C. →
    3. Francisco / Hace 7 años /

      @Julia, creo que sería dificil contestar en un comentario. Se hace todo con CSS, son bordes y un color de fondo. Que se muestre en color intercalado (blanco/gris) lo hace este caso WordPress, en Blogger me parece existe un script (no lo encontré 🙁 )

      Responder a Francisco →
    4. Julia C. / Hace 7 años /

      Gracias Francisco, intentaré el script.

      Responder a Julia C. →
    5. @sebasxnco / Hace 7 años /

      exelente esta herramienta muy util por que cuando uno esta programando cualquier web se le vuelve un enredo todo el codigo

      Responder a @sebasxnco →
    6. valeria / Hace 7 años /

      hola..mira sigo el blog tienen cosas muy interesantes, quisiera saber y perdon si no es la entrada adecuada, si existe algun codigo para enlazar una entrada a una imagen o hacer que la imagen para que en vez que se vea el contenido escrito se vea solo la imagen, posteo sobre peliculas y me gustaria q se vea mas estetico probe con la plantilla gallery pero me dejaba muy chatas las imagenes. Te agradere alguna respuesta. Saludos

      Responder a valeria →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad