¿Herramientas para refactorizar diseños HTML basados ??en tablas a CSS?

StackOverflow https://stackoverflow.com/questions/151369

Pregunta

Dada una página HTML que tiene un diseño complejo basado en tablas y muchas etiquetas que están duplicadas y son innecesarias, por ejemplo: 

td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.

¿Existen herramientas para ayudar en la tarea de refactorizar la página en una forma más compacta? Por ejemplo, ¿una herramienta que genera automáticamente estilos y selectores CSS? ¿Eso convierte las tablas en diseños div?

Solo para dar una idea del orden del problema, la página que estoy viendo es > 8000 líneas de HTML y JavaScript, que son 500Kb sin contar imágenes.

Actualización: en re. " renunciar y comenzar desde cero " comentarios ¿Qué significa eso en el mundo real? ¿Imprimir la página, escanearla, configurarla como imagen de fondo en Dreamweaver y comenzar con eso? ¿Seriamente? ¿Sería realmente más eficiente que refactorizar?

Actualización: no estoy denigrando "trazarlo desde cero" Tampoco quise decir que Dreamweaver sea de ninguna manera mi herramienta de elección. Estoy muy sorprendido de que refactorizar un diseño se considere un problema insoluble.

¿Fue útil?

Solución

Estoy de acuerdo con TimB en que las herramientas automatizadas van a tener problemas para hacer esto, en particular haciendo los saltos relacionales para combinar y resumir CSS de la manera más eficiente.

Si presenta datos tabulares, puede ser razonable intentar refactorizar el CSS en línea a clases reutilizables.

Si tiene muchas tablas similares con estilos en línea, puede refactorizar gradualmente el CSS mediante una simple búsqueda y reemplazo. Esto le dará muchas clases que coinciden con un subconjunto de tablas similares y muchas clases algo similares. Desglosar esto en diseño y presentación sería un buen comienzo, y luego reemplazarlos con clases específicas para cada tema o elemento semánticamente relacionado.

Todavía recomendaría comenzar desde cero , probablemente será más rápido, y puede recrear solo lo que necesita para presentar la página, y puede reutilizar elementos o colecciones de elementos en una fecha posterior .

El tiempo empleado también pagará significativamente si alguna vez se necesita modificar la página.

Pero eso es nada , ¿es probable? : D

Otros consejos

No conozco herramientas específicas, solo las genéricas de cafeína y Firebug , que cualquiera que esté haciendo CSS el trabajo debe tener en cuenta.

Creo que el problema es lo suficientemente difícil como para que las herramientas automatizadas tengan dificultades para producir marcas y CSS buenos y mantenibles.

Parece que está buscando medios más automatizados para refactorizar un diseño antiguo basado en tablas para los estándares CSS. Sin embargo, estoy de acuerdo con algunos de los otros comentarios para "comenzar desde cero".

Lo que esto significa para usted es que debe intentar reconstruir (usando CSS) el aspecto que se logró usando una tabla HTML. Si este concepto se le escapa, entonces sugeriría buscar en Google algunos tutoriales de CSS para principiantes, tal vez incluso algunos que se centren en enseñar el concepto de diseños de Table & > CSS ...

Otra herramienta a tener en cuenta (que posiblemente podría ayudarlo aún más) sería algún tipo de CSS "marco". Recomiendo Blueprint CSS para esto, ya que ayuda en la creación de cuadrícula / tabla diseños con un mínimo esfuerzo. Otra buena es Yet-Another-Multicolumn-Layout , que tiene un generador de diseño de varias columnas .

No lo tires solo en Dreamweaver o cualquier herramienta que elijas y córtala. Escriba el HTML primero, en un estilo puramente semántico. por ejemplo, un diseño muy común terminaría siendo: 

<body>
  <div id="header">
    <img id="logo"/>
    <h1 id="title">
      My Site
    </h1>
    <div id="subtitle">Playing with css</div>
  </div>
  <div id="content">
    <h2>Page 1</h2>
    <p>Blah blah blah..</p>
  </div>
  <div id="menu">
    <ul>
      <li><a>Some link</a></li>
      ...
    </ul>
  </div>
</body>

Haz el HTML de una manera que tenga sentido con tu contenido. Debería ser utilizable si no tiene CSS en absoluto. Después de eso, agregue el CSS para que se vea de la manera que desee. Con el estado de los navegadores / CSS ahora, probablemente todavía tenga que agregar algunos decoradores al HTML, por ejemplo, envolver algunas cosas en divs adicionales, solo para poder obtener el contenido de la manera que desee.

Sin embargo, una vez que haya terminado, tendrá un diseño muy flexible que se puede modificar fácilmente con CSS, y tendrá una página accesible, tanto para personas con discapacidad como para motores de búsqueda.

Se necesita un poco de aprendizaje antes de tener la habilidad, pero vale la pena. Resista la tentación de darse por vencido y volver a los diseños basados ??en tablas, y simplemente avance. Todo se puede hacer con HTML semántico y CSS.

Denigras este enfoque en tu pregunta, pero te recomiendo que tomes una captura de pantalla de tu página en el navegador cuya representación te guste más, declara que es tu referencia y comienza a intentar recrearla. Es más fácil de lo que piensas. Tuve que tomar diseños antiguos basados ??en tablas y convertirlos en plantillas CMS hechas con técnicas modernas y no es un mal trabajo.

Estoy abordando un problema similar en este momento, no tan desordenado como parece, pero el producto de formularios web asp.net realmente malos, estado de vista exagerado y controles de servidor profundamente anidados que formatean los resultados de búsqueda de una base de datos . Resultando en ~ 300 - 400K de marcado para 50 filas de DB - semana.

No he encontrado ninguna herramienta automatizada que haga un trabajo razonablemente medio de refactorizarla.

Comenzar con una herramienta como Visual Studio que puede usar para reformatear el código de manera consistente ayuda. Luego puede usar combinaciones de expresiones regulares y selección rectangular para comenzar a eliminar la basura y eliminar el marcado redundante, para comenzar a clasificar lo que es importante y lo que no, y luego comenzar a definir, a mano, un patrón eficiente para presentar la información.

El truco consiste en dividir en trozos manejables y construirlo desde allí.

Si tiene muchos "datos tabulares" reales para formatear, y es solo una vez, he encontrado que Excel es mi salvador en algunas ocasiones, pego los datos en una hoja y luego uso una combinación de concatenar y llenar para generar el marcado de los datos tabulares.

Comenzar desde cero significa volver al tablero de diseño. Si necesita refactorizar tal monstruosidad, entonces, durante todo el tiempo que dedicará a mejorarla, también podría haber realizado un rediseño completo.

Si quieres alejarte de las etiquetas duplicadas y derrochadoras, debes escapar de Dreamewaver. Un buen editor de texto (jedit, emacs, vim, eclipse, etc.) es realmente todo lo que necesita. Si personaliza su editor correctamente, ni siquiera se perderá Dreamweaver. (Emacs con nXhtml y yasnippets es mi favorito).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top