¿Cómo desordenan el código fuente los webmasters de MSN?

eduardobrutaldeath · #1 (**permalink**) 26/08/2013, 18:50

Hola a todos,
Quiero hacerles una pregunta quizá un poco tonta pero que me inquieta... Necesito saber ¿cómo hacen algunos web masters para poner el código fuente de su página desordenado? Ya sé que no se puede ocultar el código fuente así que me pareció una buena opción hacer lo que hacen los webmasters de la página MSN por ejemplo. Su código está tan desordenado que ni siquiera me tomaría la molestia de copiarlo

. Estoy imaginando que quizá desordenan todo el código en su documento original, y de ser así no me atrevería a imitarlos, porque sería muy molesto a la hora de subir información...

pzin · #2 (**permalink**) 27/08/2013, 00:15

Hay muchas formas. Puedes usar compresores/minificadores de código. Yo uso Sass para escribir CSS, y por defecto al compilar el código te lo deja así minificado.

Se hace por ahorrar espacio, no por otra cosa. En HTML y JavaScript se hace lo mismo.

Después hay herramientas para volver a ponerle una indentación y que se vea bonito de nuevo.

eduardobrutaldeath · #3 (**permalink**) 27/08/2013, 12:52

Cita:

Iniciado por pzin

Hay muchas formas. Puedes usar compresores/minificadores de código. Yo uso Sass para escribir CSS, y por defecto al compilar el código te lo deja así minificado.

Se hace por ahorrar espacio, no por otra cosa. En HTML y JavaScript se hace lo mismo.

Después hay herramientas para volver a ponerle una indentación y que se vea bonito de nuevo.

No pensé que tenía que descargar un programa para hacer eso... mmm que flojera; además, todavía no termino de comprender UBUNTU, ya que para instalar programas debo meter código PHYTON y en ese lenguaje estoy en un nivel menos que básico, por no decir muy flojo... Primero tengo que terminar de estudiar PHP, por eso se me hace fastidioso instalar programas en LINUX con el poco conocimiento de PHY que tengo (sólo tengo los programas básicos)... Si sabes alguna otra manera de hacer lo que he preguntado sin tener que descargar programas por favor me avisas, gracias...

pzin · #4 (**permalink**) 27/08/2013, 14:05

Siempre puedes buscar alguna extensión/plugin para el editor que uses. Por ejemplo, aquí hay unos para JavaScript y CSS para SublimeText. Todo es buscar.

Rafael · #5 (**permalink**) 27/08/2013, 14:51

No viene al caso, pero tal vez también te refieras a esto:
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm

Te acaba pasando todo a algo como JavaScript. Pero no le veo sentido.

pzin · #6 (**permalink**) 27/08/2013, 15:11

Lo que busca es básicamente meter todo el código HTML en una linea. De algo así:

Código HTML:

Ver original<html>
  <head>
    <title>Yuhuu!</title>
  </head>
  <body>
    <div>
      <p>Hola caracola</p>
    </div>
  </body>
</html>

A:

Código HTML:

Ver original<html><head><title>Yuhuu!</title></head><body><div><p>Hola caracola</p></div></body></html>

Hay herramientas online: http://www.willpeavy.com/minifier

Pero no tiene mucho sentido una herramienta online. Lo suyo es tener algún programa como CodeKit que lo haga automágicamente.

Rafael · #7 (**permalink**) 27/08/2013, 15:27

Si, Pzin, el minimizado, pero, igual, ya vez cómo nos llama la atención alguna palabra

Digo por la palabra desordenado. Hace tiempo era común que la gente buscara hacer eso.

eduardobrutaldeath · #8 (**permalink**) 27/08/2013, 18:21

Cita:

Iniciado por Rafael

No viene al caso, pero tal vez también te refieras a esto:
[url]http://www.dynamicdrive.com/dynamicindex9/encrypter.htm[/url]

Te acaba pasando todo a algo como JavaScript. Pero no le veo sentido.

Hola,
Oye verdad, hace unos días te dije que te iba a pasar la URL de la web que estaba haciendo para que verificaras si marcha bien en IE8; bueno, todavía no está terminada pero ya la subí... Tiene algunas fallas que estoy corrigiendo pero ya podrías verla en tu navegador... mira acá te dejo el link para que por favor me digas como la ves en una versión pasada de IE: [URL="http://www.semanariolaimprenta.com/"]http://www.semanariolaimprenta.com/[/URL].

POSDATA: Se me olvidaba, lo que más me importa que funcione es el menú desplegable que he creado con puro CSS3 y el pequeño efecto de animación que tiene el FOOTER... Y me avisas si hay algo malo, quizá algún código no esta funcionando en I8 aaa y puedes comparar con tu navegador moderno, bueno es todo gracias...

pzin · #9 (**permalink**) 27/08/2013, 23:03

Cita:

Iniciado por eduardobrutaldeath

Hola,
Oye verdad, hace unos días te dije que te iba a pasar la URL de la web que estaba haciendo para que verificaras si marcha bien en IE8;

http://www.forosdelweb.com/f53/browserstack-1055522

Rafael · #10 (**permalink**) 28/08/2013, 08:02

Acá está un screen capture de la web.

Lo que sí noto es que tienes un problema grave en el servidor. En diferentes navegadores hasta el tercer reload se cargaron las imágenes. Se tardó como 2 minutos en cargar el fondo. Y tengo un ISP bastante decente.

eduardobrutaldeath · #11 (**permalink**) 28/08/2013, 11:17

Cita:

Iniciado por Rafael

Acá está un screen capture de la web.

Lo que sí noto es que tienes un problema grave en el servidor. En diferentes navegadores hasta el tercer reload se cargaron las imágenes. Se tardó como 2 minutos en cargar el fondo. Y tengo un ISP bastante decente.

mmm... Yo he probado la página en FIREFOX, GOOGLE CHROME, APPLE SAFARI Y OPERA y en todos esos navegadores se ve bien... ¿Cómo se ve en tu navegador moderno? ¿Puedes probar por favor? Esa imagen que has capturado ¿es de IE8 cierto?... hay algo que no entiendo, en tu foto parece como si la página no obedeciera el css ¿Podrías volver a revisar por favor? quizá el servidor estaba tardando en procesar... yo ahora estoy viendo la página bien, desde mi laptop y desde mi otra computadora; además he llamado a unas personas y dicen que se ve normal, no entiendo...

POSDATA: Ahora que lo pienso, casi toda la página está armada con css3; para el menú he utilizado mucho las pseudo clases NTH-CHILD, NTH-OF-TYPE, NOT([]), ETC, ¿Crees que tenga algo que ver? No pensé que IE fuera tan porquería...

ArturoGallegos · #12 (**permalink**) 30/08/2013, 15:51

en definitiva tienes problemas con el servidor, no tuve tantos problemas como rafael... me cargo a la primera pero tardo casi 1 minuto en cargar y vamos mis 5 megas de internet me van muy bien.

aparte del problema de servidor tus imágenes no están optimizadas, su tamaño es considerablemente mayor al que debería si las optimizaras, por ejemplo la imagen de fondo pesa casi 800kb si la optimizaras pesaría no mas de 200kb

esos 800kb para una conexión lenta o de un mobil es excesivo....

eduardobrutaldeath · #13 (**permalink**) 30/08/2013, 17:23

mmm... No sabía que debía bajar el peso a todas las imágenes de una web; primera vez que me lo dicen. Yo siempre he dejado las imágenes con su peso original, aunque tienes razón, ahora que lo pienso sería mejor que todas tuvieran un peso bajo para que la página esté más ligera... ¿Cómo se supone que debo hacer eso, con algún programa o qué? ooo ya sé, seguro puedo hacerlo con PHOTOSHOP ¿no? ahí se puede cambiar el peso de una imagen pero, que flojera alterarlas todas u_U... mmm aparte no tengo PHOTOSHOP porque estoy en UBUNTU XD

En fin, ¿Cómo se ve la página en tu navegador? ¿Normal o también se ve pésima como en el navegador de Rafael? ¿Qué navegador tienes?

En serio no pensé que fuera tan complicado esto. Hago una página con CSS3 y resulta que no se ve bien en versiones de Internet Explorer iguales o anteriores a la 8. ¿Entonces para qué son los avances? Ahora no sé que hacer porque, le he preguntado a muchas personas como se ve la web en sus navegadores y me dijeron que se ve bien y todo funciona, a excepción de un tío que me indicó que la web se veía desarmada y sin estilo, así que preguntándole corroboré que tenía IE, y ahora estoy completamente seguro de que los tíos que tenga IE no van a visualizar mi web correctamente porque sencillamente sus navegadores no hacen caso al NTH-CHILD con el que prácticamente he seleccionado casi todos los elementos de la página.... Maldición, eso me pasa por no usar IDS o CLASES T_T

ArturoGallegos · #14 (**permalink**) 30/08/2013, 18:23

Me extraña que nunca lo hayas escuchado, pero bueno con el tiempo y la experiencia veras que es importante optimizar tanto codigo como imagenes para un sitio web... en algunos casos mas importante que en otros.

hay muchos sitios que ayudan a probar el rendimiento de tu sitio, entre los mas conocidos esta el de google
http://developers.google.com/speed/pagespeed/insights/

aqui te dira en que necesitas mejorar, ñ.ñ yo soy feliz con tener una calificacion de 85/100 hay quienes siempre buscan estar sobre 90/100

En cuanto a la optimizacion de imagenes no suelo hacerlo de una en una, siempre agarro por lotes y las proceso, para los PNG uso PNGGauntlet, hay version tanto para windows como linux.

En cuanto a los JPG en linux no sabria decirte como las optimizes, por lo regular eso lo hago estando en windows ya que es un proceso opcional previamente a la entrega del proyecto y no tengo necesidad de hacerlo cada que se crea una imagen.

En windows uso VSO Image resizer aunque ahora cambio de nombre funciona casi igual, pruebalo no necesita licencia esta es opcional para que deje de salirte el cartel cada que habres la aplicacion.
Light Image Resizer

No me fije en tu sitio si solo usas jpg, pero algo que has de tener muy encuenta es el tipo de uso, tamaño y gama de colores en las imagenes, en algunos es mejor usar png en otros jpg... en el caso de iconos suelo usar png y para imagenes ilustrativas solo jpg

ArturoGallegos · #15 (**permalink**) 30/08/2013, 18:36

en cuanto a como veo el sitio,
Firefox 23 - ok
Chrome - ok
IE 10 - ko - el sidebar derecho se sale de lugar y en el logo aparece un border.
IE 9 - ko - mismos problemas que en IE10
IE 8 - ko - impresentable, todo fuera de lugar y sin estilos.

he visto tu codigo fuente, tu problema aparte de radicar en los estilos... es que estas usando HTML5 sin considerar que no es soportado en versiones viejas.... tienes que añadir algun javascript para que compense ese fallo, de momento no me acuerdo de alguno que pueda recomendarte pero en google puedes encontraras mucha informacion al respecto.

los avances son para mejorar pero no puedes pedir que tecnologia vieja funcione con lo nuevo... es como pedir que el telefono del abuelo funcione con el chip de tu celular.

eduardobrutaldeath · #16 (**permalink**) 30/08/2013, 19:26

Cita:

Iniciado por ArturoGallegos

en cuanto a como veo el sitio,
Firefox 23 - ok
Chrome - ok
IE 10 - ko - el sidebar derecho se sale de lugar y en el logo aparece un border.
IE 9 - ko - mismos problemas que en IE10
IE 8 - ko - impresentable, todo fuera de lugar y sin estilos.

he visto tu codigo fuente, tu problema aparte de radicar en los estilos... es que estas usando HTML5 sin considerar que no es soportado en versiones viejas.... tienes que añadir algun javascript para que compense ese fallo, de momento no me acuerdo de alguno que pueda recomendarte pero en google puedes encontraras mucha informacion al respecto.

los avances son para mejorar pero no puedes pedir que tecnologia vieja funcione con lo nuevo... es como pedir que el telefono del abuelo funcione con el chip de tu celular.

Tienes razón, no tomé en cuenta los navegadores viejos y diseñé la página con mucho CSS3; si te fijas, las etiquetas HTML casi no tienen atributos, esto es porque seleccioné los elementos desde el CSS con NTH-CHILD, NTH-OF-TYPE, NOT, ETC, bueno excepto los atributos HREF que siempre tienen que ponerse en el menú. Ahora no sé que hacer, me da flojera rehacerla con CSS antiguo, lo bueno es que la mayoría de gente no tiene navegadores viejos... aunque eso que dices del borde en IE9 y 10 si me preocupa un poco, no sé que podría ser... ¿No será el focus?

Linton · #17 (**permalink**) 01/09/2013, 02:30

Cita:

Iniciado por eduardobrutaldeath

mmm... No sabía que debía bajar el peso a todas las imágenes de una web; primera vez que me lo dicen

Cita:

Iniciado por eduardobrutaldeath

Yo siempre he dejado las imágenes con su peso original, aunque tienes razón, ahora que lo pienso sería mejor que todas tuvieran un peso bajo para que la página esté más ligera... ¿Cómo se supone que debo hacer eso, con algún programa o qué?

¿¿Si las imágenes miden 4.000 x 3.000 píxeles y pesan 5 MB las dejas tal cual??

1. Reduce con Photoshop a unas medidas razonables, unos 850 px lado mayor.

2. Quita peso (lo puedes hacer por lotes) en alguna web como JPEGmini.

¡¡Hay mucha diferencia entre cargar 200 MB de fotos y cargar 8 MB!! Saludos.