Formatear documento HTML

Eleкtro · 21 Enero 2014, 04:07 AM

Hola

Estoy usando un website builder de tipo WYSIWYG, pero me crea un documento HTML complétamente sin indentación alguna, y como programador ...esto me resulta algo asqueroso e indecente:

Código (html4strict) [Seleccionar]

</style>
</head>
<body>
<div id="container">
<div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
<img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px"></div>
<div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
<img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px"></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
<img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;"></div>
<div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
<img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px"></div>
<div id="wb_Text5" style="position:absolute;left:21px;top:425px;width:465px;height:92px;text-align:left;z-index:8;border:0px #C0C0C0 solid;overflow-y:hidden;background-color:transparent;">
<div style="font-family:Arial;font-size:13px;color:#000000;">
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;"><strong>Welcome to our website</strong></span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">Lorem ipsum dolor sit amet, autem consectetuer adipiscing elit, sed diam </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">nonummy nibh euismod iusto tincidunt ut laoreet dolore magna aliquam erat </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">volutpat. Ut wisi enim ad minim veniam, quis nostrud facer exerci tation </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">ullamcorper suscipit lobortis nisl ut aliquip ex ea delenit commodo consequat.</span></div>
</div>
</div>

No hay por donde cojer el código, no se puede trabajar así.

Al igual que existen ciertos programas para formatear un documento XML (para indentarlo y colocarlo todo en su sitio siguiendo las buenas prácticas de programación) como también existen formateadores online, yo busco alguno que sea capaz de formatear un documento HTML para obtener un resultado decente y organizado como esto:

( además de los tags, nótese también la indentación y saltos de linea en los atributos )

Código (html4strict) [Seleccionar]

<body>

	<div id="container">

		<div id="wb_Shape1" 
		     style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">

		<img src="images/img0001.png" 
		     id="Shape1" 
		     alt="" 
		     title="" 
		     style="border-width:0;width:281px;height:4150px">
	</div>

	<div style="text-align:left">

		<span style="font-family:'Trebuchet MS';font-size:11px;color:#7B7E83;">
			erat volutpat.
		</span>

	</div>
	
</body>

El problema es que hay muchos softwares distintos y estoy seguro de que algunos de estos programas se deben tomar más en serio el formato del código que otros programas... por ese motivo acudo a ustedes, para no malgastar el tiempo comparando decenas de programas hasta encontrar uno que merezca la pena... ya que ustedes tienen la experiencia que yo no tengo para recomendarme un formateador de documentos HTML que se adapte a mis necesidades.

Gracias por leer!

#!drvy · 21 Enero 2014, 05:38 AM

Netbeans tiene su propio formateador aunque creo que no vas a querer usar un IDE pesado solo para formatear código xD.

http://ctrlq.org/beautifier/

La he usado varias veces y me va bien.. asi es como te dejaria el que has puesto:

Código (html4strict) [Seleccionar]

<body>
  <div id="container">
    <div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
      <img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px">
    </div>
    <div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
      <img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px">
    </div>
    <div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
      <img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;">
    </div>
    <div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
      <img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px">
    </div>
    <div id="wb_Text5" style="position:absolute;left:21px;top:425px;width:465px;height:92px;text-align:left;z-index:8;border:0px #C0C0C0 solid;overflow-y:hidden;background-color:transparent;">
      <div style="font-family:Arial;font-size:13px;color:#000000;">
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;">
            <strong>
              Welcome to our website
            </strong>
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            Lorem ipsum dolor sit amet, autem consectetuer adipiscing elit, sed diam 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            nonummy nibh euismod iusto tincidunt ut laoreet dolore magna aliquam erat 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            volutpat. Ut wisi enim ad minim veniam, quis nostrud facer exerci tation 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            ullamcorper suscipit lobortis nisl ut aliquip ex ea delenit commodo consequat.
          </span>
        </div>
      </div>
    </div>

Saludos

karmany · 21 Enero 2014, 23:06 PM

Ciertamente así no hay quien trabaje, el código y la indentación son horribles.

Yo no sé si lo quieres de escritorio pero actualmente la mayoría trabaja con editores WYSIWYG (suelen trabajar con javascript) en la misma web. A mi por ej, me gusta mucho TinyMCE

Eleкtro · 22 Enero 2014, 17:46 PM

Cita de: @drvy en 21 Enero 2014, 05:38 AM
Netbeans tiene su propio formateador aunque creo que no vas a querer usar un IDE pesado solo para formatear código xD.

http://ctrlq.org/beautifier/

Muchas gracias Drvy, pero ciértamente como has comentado no es lo que busco, el tipo de formtao que le da NetBeans es idéntico al que le puede dar cualquier formateador normalito online, para eso como bien has dicho no me apetece usar una IDE XD, aunque ...si que usaría esa IDE si fuese capaz de darle un formato más avanzado como al que a mi me gustaría, pero no es el caso.

Cita de: karmany en 21 Enero 2014, 23:06 PM
A mi por ej, me gusta mucho TinyMCE

Gracias por la recomendación, yo estoy usando WYSIWYG Web Builder y prefiero este producto que estoy usando por su semejanza con la IDE de VisualStudio y lo sencillo que es de manejar absolútamente todo de esa manera, aparte de la cantidad de templates y otros addons que existen por google para el producto.

Lo único malo es eso ...la basura de HTML que genera.

Saludos!

Test Foro de elhacker.net SMF 2.1

Formatear documento HTML

Eleкtro

#!drvy

karmany

Eleкtro