none
HTML en produccion

    Pregunta

  • Hola compañeros Foreros:

    tengo la siguiente duda y no  le he podido resolver, he notado que paginas como la microsoft cuando ves el codigo fuente este se muestra sin espacios y no como loas demas paginas que muestran el codigo como se escribio.

    como logran esto, ya que me parece que lograr esto haria de mi aplicacion un poco mas rapida el no tener espacios en blnco ni tabulaciones que ocupen espacio y se transmitan por la red

    Codigo Microsoft.com

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"><head><title>Microsoft Corporation</title><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta id="WtCampaignId" name="DCSext.wt_linkid" content="30-00-111SXX02977;01-27-111SXX02992;01-27-113LMUS004274;02-27-113LMUS004231;03-27-111SXX02933;15-27-113LMUS004274;15-27-113LMUS004231;15-27-111SXX02933;04-00-111SXX02990;04-00-111SXX02991;08-00-113LSUS004361;08-00-113GMUS004288;08-00-112SUS04016;08-00-113LSUS004797;08-00-111SUS03185;08-00-111SXX02933;08-00-112LSUS004244;08-00-111SXX03251;08-27-111SUS03004;08-00-111SXX03253;08-00-111SXX03252;08-00-111SXX03257;08-00-111SXX03259;08-00-111SXX03255;08-00-111SXX03256;08-00-112LSUS004201;08-00-112LSUS004200;08-00-112LSUS004214;09-00-113GMUS004288;09-00-113LMUS004289;09-00-113GMUS004363;09-00-112LSUS004224;09-27-113LMUS004274;09-00-111SUS02857;09-00-113GSUS004237;09-00-113GMUS004212;09-00-111SXX03571;09-00-113GMUS004254;09-00-113LMUS004231;09-00-111SUS03406;09-00-113LMUS004239;09-00-111SXX02980;09-00-111SXX02962;09-00-111SXX02933;09-00-111SXX03252;10-00-113LSUS004228;10-00-113LSUS004781;10-00-113LSUS004585;10-00-113GSUS004237;10-00-112SUS03926;10-00-112SUS03899;10-00-111SXX03748;10-00-113GMUS004288;10-00-112LSUS004232;10-00-113LSUS004418;10-00-113LSUS004587;10-00-111SUS04003;10-00-111SXX02980;10-00-111SXX02983;10-00-112LSUS004203;10-00-112SUS03991;10-00-111SUS03062;10-27-113LMUS004274;10-00-112LSUS004353;10-00-113LMUS004231;10-00-113LMUS004239;10-00-111SUS03410;10-00-113LMUS004198;10-00-111SUS03731;10-00-111SXX02984;11-00-113LMUS004216;11-00-113GSUS004286;11-00-111SUS03409;11-00-111SUS03413;11-00-113GSUS004472;11-00-113GSUS004259;11-00-111SUS03125;11-00-111SXX03256;11-00-111SUS03716;11-00-111SUS03195;11-00-111SXX03252;11-00-111SXX03257;11-00-111SXX03253;11-00-111SXX03586;11-00-111SXX03587;11-00-111SXX03259;12-00-113LSUS004253;12-00-112SXX04013;12-00-113GSUS004286;12-00-113LSUS004415;12-00-113LSUS004287;12-00-111SUS03230;12-00-111SXX03638;12-00-111SXX03589;12-00-112SUS03749;12-00-111SXX03591;12-00-111SXX03593;12-00-111SUS03594;12-00-111SXX03596;12-00-111SXX03599;12-00-111SXX03600;12-00-111SXX03601;13-00-113LSUS004715;13-00-112SUS04109;13-00-113LSUS004275;13-00-113LSUS004379;13-00-112SUS03782;13-00-113LSUS004622;13-00-111SUS02999;13-00-113LMUS004262;13-00-112SUS04072;13-00-111SXX03602;13-00-111SXX03250;13-00-111SXX03603;13-00-111SXX03604;13-00-111SXX03618;13-00-111SUS03605;13-00-111SXX03606;13-00-111SXX03607;13-00-111SUS03452;40-00-111SXX02973;40-00-111SXX02971;40-00-111SXX02972;40-00-111SXX02975;40-00-111SXX02976;40-00-111SXX02974" /><meta id="WtTarget" name="DCSext.wt_target" content="Colombia;Generic;Opera;Windows 7" /><meta id="WtSp" name="WT.sp" content="_en_us_" /><script type="text/javascript" src="/en/shared/core/2/js/js.ashx?s=Csp;shared"></script><link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&pc=/En/us/PageConfig/takeover/Beta/Beta_page.config.xml&m=cspMscomHomePageBase" /><link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Beta/Beta_page.config.xml&amp;c=cspMscomHeader;cspMarketingComponent" /><script type="text/javascript" src="/en/shared/core/2/js/js.ashx?c=cspMarketingComponent"></script><script type="text/javascript" src="/en/shared/core/2/js/js.ashx?pt=cspMscomHomePage&c=cspSearchComponent;cspMedia;cspMscomMasterNavigation;cspMscomNewsBand;cspVerticalRolloverTab;cspMscomVerticalTab;cspSilverGate"></script><link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Beta/Beta_page.config.xml&amp;pt=cspMscomHomePage&amp;c=cspMscomSiteBrand;cspSearchComponent;cspMscomFeaturePanel;cspMscomMasterNavigation;cspMscomNewsBand;cspVerticalRolloverTab;cspAdControl;cspMscomVerticalTab;cspSilverGate" /><script type="text/javascript" src="http://i3.microsoft.com/library/svy/broker.js"> </script><link rel="stylesheet" type="text/css" href="/global/En/us/RenderingAssets/takeover/Beta/Beta.css" /><meta name="SearchTitle" content="Microsoft.com" scheme="" /><meta name="Description" content="Get product information, support, and news from Microsoft." scheme="" /><meta name="Title" content="Microsoft.com Home Page" scheme="" /><meta name="Keywords" content="Microsoft, product, support, help, training, Office, Windows, software, download, trial, preview, demo, business, security, update, free, computer, PC, server, search, download, install, news" scheme="" /><meta name="SearchDescription" content="Microsoft.com Homepage" scheme="" /><meta name="WT.z_gTrackExceptions" content="sg-install,sg-no-thanks,h15-group,h15-link,h15-menu,h15-groups,nbd_newsBand,smp_menu,smp_map,h15-marketing,cspSearchComponent,vt_tabPanel,mshpCrs" scheme="" /><meta name="DCSdir.ClearVars" content="DCSext.ngn_clevel,DCS.ngn_type,WT.si_p,DCSext.ngn_lname,DCSext.ngn_spdl,DCSext.ngn_spn" scheme="" /><meta name="DCSext.wt_pt" content="HP" scheme="" /><link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Beta/
    

     

    codigo generado en aspx.

     

     <div id="ctl00_ContentPlaceHolder_TabContainer_TpOrdenMedica_TabRecetas_TpServicios_PnGvServicio" style="height:230px;width:120%;overflow-y:scroll;">
    								
                <table id="ctl00_ContentPlaceHolder_TabContainer_TpOrdenMedica_TabRecetas_TpServicios_TablaServicio" class="Tabla">
    									<tr>
    										<th width="20">
                   </th>
    										<th width="90">
                     Código Fuente
                   </th>
    										<th>
                     Nombre Procedimiento
                   </th>
    										<th align="center" width="50">
                     Cantidad
                   </th>
    										<th width="75" align="center">
                     Cubre Conv.
                   </th>
    										<th width="100" align="center">
                     Ultima Orden
                   </th>
    										<th align="center">
                     Observación
                   </th>
    									</tr>
    								</table>
    								
                
               
    							</div>
             
    						</div><div id="ctl00_ContentPlaceHolder_TabContainer_TpOrdenMedica_TabRecetas_TpMedicamentos" class="ajax__tab_panel" style="display:none;visibility:hidden;">
    
    

    les agradezco si me ayudan ¿como hago para que el HTML se muestre de esa manera en produccion?

     

    Gracias,

    Dorian Rallón

     

     


    Dorian Ferney Rallón Galvis
    Bucaramanga - Colombia
    miércoles, 09 de febrero de 2011 14:56

Respuestas

Todas las respuestas

  • hola

    si la idea es proteger el codigo, a esto se lo denomina Ofuscar

    html-obfuscator

    JavaScript HTML Code/Text Obfuscator

     

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    miércoles, 09 de febrero de 2011 15:18
  • Hola Leandro.

     

    no la idea no es proteger el codigo, es que lei en algun lugar que si enviamos el codigo HTML y javascript sin espacios en blanco ahorramos Kb de transmision y pues eso se ve reflejadoe n el performance de la aplicacion


    Dorian Ferney Rallón Galvis
    Bucaramanga - Colombia
    miércoles, 09 de febrero de 2011 15:21
  • ahh entocnes comprimelo

    10 Tips for Writing High-Performance Web Applications

    revisa el titulo "Tip 9—Use Gzip Compression"

    con esto reducen la cantidad de kb enviados al canal

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    miércoles, 09 de febrero de 2011 15:27
  • Hola amigo Portescheller y Tuttini esa no es la solucion a mi duda  o planteamiento, no se si en el inicio de la pregunta no me hice entender, no estoy pidiendo que me indique como comprimir mi HTML ni como ofuscar, la pregunta en simple y sencilla como logro anular los espacios en blanco cuando mi pagina se renderiza en el servidor?, se que eso se puede pues una vez en un web cast lo vi, solo que en ese mo mento no le di la importancia que se merecia ahora quiero saber como se hace pero no encuantro la solucion por ningiun lado.

    Gracias,


    Dorian Ferney Rallón Galvis
    Bucaramanga - Colombia
    viernes, 11 de febrero de 2011 18:45
  • Hola Dorian,

     

    Para remover los espacios podrias utilizar un modulo HTTP que haga la tarea o algo mas complicado.

    En los siguientes enlaces tienes unos buenos ejemplos y muy sencillos por cierto de como realizarlo.

    Cleaning HTML Code

    Remove White Space

     

    Saludos,



    Jason Ulloa
    Mi Blog
    viernes, 11 de febrero de 2011 19:42
  • Hola

    Agregando a lo que comenta Jason Ulloa... (que me gustaron los enlaces)

    Esto de "minimizar", "minificar" los espacios de HTML y los saltos de linea, hoy por hoy no es un lugar para IR A OPTIMIZAR DE PRIMERA MANO, ya que no se gana mucho, podrias si hacerlo con los archivos de JS y CSS (agruparlos, minidifarlos, comprimirlos y obuscarlos) y con eso.. 
    Con la compresión HTTP (Gzip) ya basta y sobra.

    Pero si quieres ver como se implementaría, y sufrir un poco

    Pero aqui tienes 5 opciones para implementar la "modificación de la salida HTML" (vaa son 4 opciones, y una idea)

    FIjate la parte de los cuidados que hay que tener, incluso en el ejemplo para descargar tienes algo

    Espero que te sirva de ayuda o guía.



    @ Jason Ulloa: Gracias por el enlace que compartiste Cleaning HTML Codeno tenia esa opcion de como implementar con PageParserFilter (lo agregue en mis post y te agradeci alli tambien)


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja
    martes, 15 de febrero de 2011 13:13
  • Hola,

     

    Jose A. Fernandez , es un placer ver que los enlaces te han sido de provecho y que con ellos también transmites las ideas a otros. Ese es el objetivo de toda buena comunidad y de todos los que en ellas estamos.

     

    Y por supuesto, tambien agradecerte por haberme incluido en los posts.

     

    Un cordial Saludo,

     

     



    Jason Ulloa
    Mi Blog
    martes, 15 de febrero de 2011 14:47
  • hola

    solo una consulta de curiosidad, hacer esto y comprimir no seria lo mismo ? al menos a efectos de transferencia de informacion, ya que desminuye el volumne de info transportada

    salvo por el efecto de ver el codigo sin espacios, lo cual se que en el browser hay tools que identan el html nuevamente para poder analizarlos, que otro efecto se logra al quitar los espacion

    o sea la compresion quitaria los espacios para reducir el tamaño en la comunicacion, pero afecta a la transferencia, despeus que se vea con espacio o no en el cliente porque es imporante ? salvo que se quiera evitar la lectura, pero para esto se aplica la ofuscacion del codigo

    a dodne apuntos es que se aplciaria comrpesion para optimizar el transporte, y ofuscacion para evitar la lectura, pero esto de quitar lso esapacio que ventaja aporta ?

     

    en resumen no le veo la ventaja obtenida entre esto y la compresion, cual seria ?

     

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    martes, 15 de febrero de 2011 15:20
  • Hola Leandro

    Efectivamente, no hay ninguna ganancia.  Hoy en dia con la compresión GZIP el envio de HTML es rapida (solo hay un % de navegadores  antiguos que no los soporta, y nosotros a esos usuarios no lo podemos matar je)

    En el articulo alli comento que lo mejor es empezar a optimizar por otro lado, como dije:
       "Lo que hay que agrupar, minimizar, ofuscar y comprimir archivos .JS y .CSS"

    • Agrupar: si tienes varios archivo .js, .css hay que agruparlos en uno solo para la descarga
    • Minimizar: Quitar caracteres innecesarios, espacios en blanco, saltos de linea, comentarios
    • Ofuscar: Modificar nombre de vbles y funciones, optimizando cantidad de caracters e incluso lo hace dificil de entender
    • Comprimir: Al enviar al cliente se puede comprimir con Gzip (esto lo hace el mismo servidor web, IIS, hay que configurarlo)

     

    O sea, entre Optimizar el HTML y tomar una cerveza... vamos por la cerveza, y dejemoles a IIS que envie comprimido

    Igualmente en el articulo aclaro eso al comienzo y  al final, pero hay objetivos secundarios. Aprender a modificar la salida HTML y conocer alternativas (y quitarme un post en borrador que lo tenia hace tiempo, y esperar que le sirva a alguien)

     

    Espero que sirva de ayuda o guia.

     


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja
    martes, 15 de febrero de 2011 15:34
  • Hola a todos:

    Pues la verdad me causo curiosisdad lo de quitar los espacios en blanco y los comentarios a raiz de un webcast que vi del sr. Jose Manuel Alarcón en el que decia que para cuando nuestro desarrollo pasa a produccion era muy buena practica el eliminar los espacios en blanco y los comentarios en todos nuestros archivos .html, .css y . js, ya que esto reduciria el tiempo de transmision y carga de nuesta webs.

    Gracias por la colaboracion de todos.

     


    Dorian Ferney Rallón Galvis
    Bucaramanga - Colombia
    martes, 15 de febrero de 2011 16:22