elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Security Series.XSS. [Cross Site Scripting]


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Formatear documento HTML
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Formatear documento HTML  (Leído 2,702 veces)
Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.878



Ver Perfil
Formatear documento HTML
« en: 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
  1. </head>
  2. <div id="container">
  3. <div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
  4. <img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px"></div>
  5. <div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
  6. <img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px"></div>
  7. <div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
  8. <img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;"></div>
  9. <div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
  10. <img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px"></div>
  11. <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;">
  12. <div style="font-family:Arial;font-size:13px;color:#000000;">
  13. <div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;"><strong>Welcome to our website</strong></span></div>
  14. <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>
  15. <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>
  16. <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>
  17. <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>
  18. </div>
  19. </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
  1.  
  2. <div id="container">
  3.  
  4. <div id="wb_Shape1"
  5.     style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
  6.  
  7. <img src="images/img0001.png"
  8.     id="Shape1"
  9.     alt=""
  10.     title=""
  11.     style="border-width:0;width:281px;height:4150px">
  12. </div>
  13.  
  14. <div style="text-align:left">
  15.  
  16. <span style="font-family:'Trebuchet MS';font-size:11px;color:#7B7E83;">
  17. erat volutpat.
  18. </span>
  19.  
  20. </div>
  21.  
  22. </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!


« Última modificación: 21 Enero 2014, 04:19 am por Eleкtro » En línea



#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Formatear documento HTML
« Respuesta #1 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/

La he usado varias veces y me va bien.. asi es como te dejaria el que has puesto:
Código
  1.  <div id="container">
  2.    <div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
  3.      <img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px">
  4.    </div>
  5.    <div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
  6.      <img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px">
  7.    </div>
  8.    <div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
  9.      <img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;">
  10.    </div>
  11.    <div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
  12.      <img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px">
  13.    </div>
  14.    <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;">
  15.      <div style="font-family:Arial;font-size:13px;color:#000000;">
  16.        <div style="text-align:left">
  17.          <span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;">
  18.            <strong>
  19.              Welcome to our website
  20.            </strong>
  21.          </span>
  22.        </div>
  23.        <div style="text-align:left">
  24.          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
  25.            Lorem ipsum dolor sit amet, autem consectetuer adipiscing elit, sed diam
  26.          </span>
  27.        </div>
  28.        <div style="text-align:left">
  29.          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
  30.            nonummy nibh euismod iusto tincidunt ut laoreet dolore magna aliquam erat
  31.          </span>
  32.        </div>
  33.        <div style="text-align:left">
  34.          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
  35.            volutpat. Ut wisi enim ad minim veniam, quis nostrud facer exerci tation
  36.          </span>
  37.        </div>
  38.        <div style="text-align:left">
  39.          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
  40.            ullamcorper suscipit lobortis nisl ut aliquip ex ea delenit commodo consequat.
  41.          </span>
  42.        </div>
  43.      </div>
  44.    </div>

Saludos


En línea

karmany
Colaborador
***
Desconectado Desconectado

Mensajes: 1.615


Sueñas que sueñas


Ver Perfil WWW
Re: Formatear documento HTML
« Respuesta #2 en: 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
En línea

Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.878



Ver Perfil
Re: Formatear documento HTML
« Respuesta #3 en: 22 Enero 2014, 17:46 pm »

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.

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!
« Última modificación: 22 Enero 2014, 17:48 pm por Eleкtro » En línea



Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como cargar una documento .html
Java
EricCorona 4 5,461 Último mensaje 10 Diciembre 2009, 21:50 pm
por Blitzkrieg'
Forma correcta de empezar un documento .html
Desarrollo Web
Caster 4 2,762 Último mensaje 23 Noviembre 2013, 23:52 pm
por HackID1
leer un documento HTML,cada etiqueta debe guardarse en un nodo de un árbol
Programación C/C++
mcMario 0 1,941 Último mensaje 12 Diciembre 2016, 02:40 am
por mcMario
Realizar un echo e ir concatenando en un documento html[RESUELTO]
PHP
Xargam 1 2,216 Último mensaje 17 Septiembre 2019, 20:24 pm
por mchojrin
Boton para ir a la cierta coordenada en otro documento HTML
Desarrollo Web
UsuarioZ 4 3,777 Último mensaje 17 Mayo 2021, 03:00 am
por UsuarioZ
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines