JMiur [E]

¿Obsesivo? Sin duda; y por eso sigo con lo de los elementos condicionales de Blogger. Esta vez, tratando de usarlos para aliviar un poco más la carga del blog.

Todos nos preocupamos por si tal o cual script es más o menos lenta y eso está bien; probablemente, no nos preocupamos por el código CSS y a decir verdad, optimizar las hojas de estilos es muy importante ya que suelen ocupar muchos bytes y reducir su tamaño implica reducir el tamaño del archivo y por ende, del tiempo de carga.

Hay algunas herramientas online como Robson CSS Compressor que hacen el trabajo por nosotros y, desde el punto de vista del tamaño, la diferencia puede ser sustancial (entre un 25% y un 30% menos) sin embargo, ese tipo de compresión transformará el código en algo casi ilegible, imposible de editar:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', helvetica, arial, sans-serif;margin:10px 0}p,ol,ul{margin:10px 0}pre{color:#F0F0F0;font-family:Tahoma,Arial,'Trebuchet Ms';font-size:13px;line-height:17px;margin:10px 0 10px 10px}pre.long{white-space:pre-wrap}.code{background-color:#EFEFF7;border:2px solid #399BA6;color:#000;font-family:Courier New,Courier,monospace;padding:15px 5px 15px 15px}blockquote{background:#f2f8fc url('http://photos1.blogger.com/blogger2/323/4098/200/bloque1.png') no-repeat scroll left top;color:#222;margin:0 0 5px 20px;padding:0;text-align:center;width:250px;font:italic 15px Georgia, Arial}blockquote p{background:transparent url('http://photos1.blogger.com/blogger2/323/4098/200/bloque2.gif') no-repeat scroll right bottom;margin:0;padding:15px 10px 15px 15px}blockquote a,blockquote a:link,blockquote a:visited{color:navy !important}blockquote a:hover{color:red !important}#outer-wrapper{background:url(http://1.bp.blogspot.com/_hljKDuw-cxQ/SBItbDfE_JI/AAAAAAAAF6I/pRtfJBj61Ug/s00/containerbg920.gif) repeat-y;margin:0 auto;position:relative;text-align:left;width:920px}#wrap2{background:none;border-bottom:1px solid #5b626A;margin:0 10px;position:static;width:auto}#header-wrapper{background:#600 url(http://1.bp.blogspot.com/_hljKDuw-cxQ/R1kDitXTIyI/AAAAAAAAELw/x9jfV1UftKU/s00/VAGAheader_1.png) no-repeat;height:176px;margin-top:-3px;position:relative;width:900px}#header-inner{padding:20px 0 0;position:static}

Otras herramientas como CleanCSS son menos severas sin embargo, algunas optimizaciones son posibles si nos tomamos el trabajo de revisar.

En lo posible, sería buena idea colocar todos nuestras definiciones de estilo dentro de <b:skin> </b:skin>, de esa manera eliminamos las etiquetas STYLE redundantes y, si necesitamos identificarlas, podemos comentarlas:
/* --- Vinculos y Objetos */
a, a:visited, a:link {
color:#AAA;
outline:none;
text-decoration:underline;}
a:hover {color:#FFF;outline:none;}
a img {
border:none;
outline:none;
text-decoration:none;
}
Allí, en el ejemplo, ya podemos ver algunas otras optimizaciones posibles.

Eliminar los espacios innecesarios depende de nuestra forma de trabajo. Lo ideal es que no haya ninguno así que deberemos encontrar alguna solución intermedia que nos permita tener código reducido pero legible.

Optimizar los valores de los colores:
  • cambiar los valores largos tipo #AAAAAA por #AAA
  • cambiar los valores de tipo rgb(255,255,255) por el valor hexadecimal FFF
si estamos en la sutileza, colocar red en lugar de #FF0000 y, en términos generales, elegir siempre el valor que ocupe menos caracteres. Todos estos valores significan lo mismo:

#FFEBCD = BlanchedAlmond = rgb(100%,92%,80%) = rgb(255,235,205)

Eliminar las unidades de cualquier valor igual a cero:
margin: 0px 10px;
equivale a:
margin:0 10px;

Unificar las definiciones cuando sea posible (border, background, font, margin, padding):
.clase1 {margin-bottom: 0px; margin-left: 100px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase1 {margin:0 20px 0 100px;}

.clase2 {margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase2 {margin:0 20px;}

Lo mismo ocurre con la propiedad background:
.clase3 {background-attachment: scroll; background-color: transparent; background-image: url(URL_imagen); background-position: left 50%; background-repeat: no-repeat;}
equivale a:
.clase3 {background: transparent url(URL_imagen) no-repeat scroll left 50%;}

Sería bueno revisar que no hubiera definiciones repetidas y en ese caso, unificarlas (es algo bastante común); lo mismo ocurre con propiedades que se sobrescriben:
a, a:visited, a:link  {
color:#AAA;
outline:none;
text-decoration:underline;
color:#CCC;
}
¿Y qué tiene que ver esto con los elementos condicionales de Blogger?

Nuestra plantilla tiene una sola hoja, es un archivo. Blogger lo lee y actua en consecuencia. Si estamos en el home, la página principal se muestra de cierta forma; si estamos en una entrada individual, se muestra de otra forma. El ejemplo típico son los comentarios que sólo vemos desplegados en las páginas individuales y en la principal ni siquiera están ocultos, Blogger, simplemente "se saltea" ese código.

Hay que tener muy claro que, un elemento ocultado con CSS (display: none) se carga de la misma manera que los visibles así que "ocultar" algo no reduce el tiempo de carga.

Por defecto, no importa en que tipo de página estemos, el CSS se carga igual así que bien podríamos condicionarlo y crear tres grupos:
<b:skin>
[... aquí val las definiciones generales ...]
</b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css';>
[... aquí van las definiciones exlusivas para la página principal ...]
[por ejemplo: Posts expandibles]
[por ejemplo: Paginación]
</style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css';>
[... aquí van las definiciones exlusivas para la páginas individuales ...]
[por ejemplo: Comentarios]
[por ejemplo: Formulario de comentarios incrustado]
[por ejemplo: Post relacionados]
[por ejemplo: Marcadores sociales]
</style>
</b:if>
No son grandes cambios pero, todo suma.

41 comentarios:

Anónimo  

Ahhhh, ¡qué buen post!

Responder
Anónimo  

Hola JMiur! Muy buen post! lástima que para los que no sepamos mucho se complica algo optimizar nuestra plantilla, sobre todo cuando está muuuy modificada. Yo intenté validar con blogger jeje qué ilusa, más de 800 errores me tiró!
Así como otros blogueros ofrecen analizar el diseño y la usabilidad de los blogs a cambio de un post comentando la iniciativa, vos podrías optimizar las plantillas, jaja es broma!
Saludos

Responder
Unknown  

Ohhh cariño me enterado de muchas cosas con tu entrada...por ejemplo de los colores, dato que corregía jajaja AAA AAAAAA creía que debían ser 6... y de lo otro no estaba ni enterada. Excelente, saludos!!!

Responder
Gem@  

Ahora entiendo el por qué de ese desorden en algunas plantillas, la explicación era que están optimizadas-
!La de cosas que uno aprende contigo¡

Responder
Claudio - Poca Tinta  

Sabia que el momento de ordenar la casa llegaria, bueno a ponerse a ordenar.

buen post amigo, saludos

Responder
Unknown  

Tomaré en cuenta ese buen post,JMiur.Me hace falta una buena limpieza de mi CSS.

Por cierto,ya te mandé un mail con mi duda sobre el código html que no me guardaba en tu segundo post de los comentarios de blogger,acerca de las imágenes de los comentaristas.

Responder
JMiur  

Graciela: validar un blog de Blogger es inútil. Tampoco creo en eso de analizar el diseño; es que creo en muy pocas reglas y no necesariamente lo que a mi me sirve le sirve a otro. Conocer las alternativas es bueno, el resto es subjetivo así que renuncio :D

Hay mucho de sentido común en esto, no repetir cosas, minimizar la cantidad de texto, organizarlo para que sea fácilmente editable, eliminar lo que no se usa. Son pequeñas correcciones pero, todo suma.

Si alguien está preocupado por la velocidad de carga, conviene que analice el blog con alguna herramienta que le informe el tiempo de carga de cada cosa; pueden sorprenderse de los resultados.

Jedimaster: ya te respondí el mail pero lo repirto. El código no sale en el formulari ode contacto así que envia la pregunta otra vez a mi dirección de mail.

Responder
Eroz  

Hola Jmiur espero te encuentres bien
Una pregunta ¿ Donde puedo conseguir una tabla con los colores de esta manera? (0,0,255)<---------solo se que ese es un azul horrendo jajajajaaja y por lo mas que trato de atinarle no paso del negro y del azul jajajajajaajajaa se me hace mas fácil de la forma #ffffff (por que tengo tabla)

El caso es que yo sin tabla no doy una, de casualidad tendrás un enlace o una tabla de colores así------> (0,0,0)

De antemano gracias =)

Responder
JMiur  

Eroz:
Recién he visto una AQUÍ. Aunque no está completa, es una buena ayuda. También en el tutorial hay una forma de ver los códigos de los colores, tanto en modo hexadecimal como decimal: AQUÍ

Responder
Unknown  

JMiur,ya te envié el email con el código,esta vez aparece el mismo como es debido.Gracias por responder el email.

Responder
Eroz  

Mil gracias JMiur =)

Responder
Anónimo  

Yo renuncié hace rato a validar en blogger, pero tardé bastante en darme la cabeza contra la pared. Analicé la velocidad de carga y la verdad mucho tampoco se entiende porque lamentablemente esos servicios están en inglés y son complicados, al menos para mí.
Es cierto que el diseño es subjetivo, pero existen criterios éticos y de usabilidad que al principio todos los novatos desconocemos. A mí me sirvió que analizaran mi blog porque me hicieron ver cosas que de otra forma no las hubiera visto jamás.
Saludos!

Responder
Unknown  

JAMIUR las imagenes que tengo en mi sidebar todas tienen rgb(255,255,255), eso es porque utilizo un carácter del teclado para separar la imágenes. dime que tipo de padin me sirve para separar las imágenes.

lo otro JMIUR es que he estado haciendo lo que enseñaste en esta entrada de optimizar la plantilla, y encuentro que mis marcadores sociales tienen un punto que los separa en, cual es la parte que tengo que elimiar para que se quiten los puntos.

gracias JAMIUR

Responder
JMiur  

Lo de los marcadores es una imagen que se muestra en las listas. En este caso, está definida acá:

#content ul li, #home ul li {
background:transparent url(http://.../f_menubulletm_9512dc8.gif)
no-repeat scroll 0.2em 0.5em;

.........

quitando es a línea, desaparece el puntito.

Lo de las imágenes en la sidebar. Veo que dicen esto:

<span style="color: rgb(255, 255, 255);">_</span>

Eso puede eliminarse y ya que las imágenes tienen un atributo style incluido, podrías agregarle la propiedad padding-left a cada una. Algo así:

<img border="0" src="xxxxxx" style="width: XXXpx; height: XXXpx; padding-left: 10px;"/>

Me da la impresión que con 10 pixeles quedarían más o menos como ahora.

Responder
Unknown  

JIUR, y cual pesa mas el carácter conque hago la separación de las imagenes, lo cual son 9 números o la propiedades padding, border etc. que me estas indicando. la idea es reducir el mayor peso que tengan, claro sin afectar la estética.

Gracias JIUR

Responder
JMiur  

Si el problema es la carga, ambas soluciones son indiferentes; sólo son textos. Si hilamos fino, podemos decir que usar pading hará que la página tenga menos bytes ya que la página es el carácter escrito sino el código que lo escribe y:
<span style="color: rgb(255, 255, 255);">_</span>
es más largo (tiene más caracteres que:
padding-left:10px;

Pero, es hilar muy fino.

Responder
fds  

Te hago una consulta...

Hace días que estoy tratado de ocultar algunos post de mi blog. Es decir, que no se muestren junto a los otros, porque son de otro tipo. Mi idea es es se pueda acceder a ellos solo a través de links que voy a cargar en la sidebar, de manera que se vean con la misma plantilla.
¿es posible? ¿Hay alguna forma o algún código?

Te agradezco desde ya,

Fernando

Responder
JMiur  

Ocultar posts de manera permanente es imposible, siempre son accesibles de una u otra forma; navegando hacia atrás, haciendo una búsqueda, navegando las etiquetas o los archivos. Lo más que puede hacerse es colocarlos con una fecha muy anterior para mandarlos "al fondo".

Otra alternativa es tener un blog auxiliar con la misma plantilla y colocarlo como privado.

Responder
fds  

OK

Muchas gracias x contestar

saludos

Responder
Jabba  

One question JMiur.

Estoy dándole propiedades a un bloque que quiero insertar como estándar para las descargas en el blog, y más o menos lo he conseguido torear para que me salga lo que quiero. Sin embargo se me resiste la opción de que salga una imagen a la izquierda del background sin que vuelva a repetirse la imagen al poner un enlace de descarga. Es decir, si dentro del bloque escribo únicamente texto, funciona sin problemas, pero en el momento que le pongo por ejemplo un hipervínculo a la totalidad o a parte de ese texto, la imagen vuelve a aparecer junto al texto además de en el lugar en el que le he asignado que aparezca.

Aquí te dejo las propiedades que le he dado:

blockquote.descarga {
width:600px;
margin: 0px 0 10px 0px;
padding: 5px;
text-align: center;
padding: 0 0 0 25px;
font: 13px/28px normal helvetica, sans-serif;
color: #000000;
background: #D0F5A9 url(http://farm4.static.flickr.com/3042/2970817703_e49f744dd5_o.gif)no-repeat left;
border-top: 3px solid #74DF00;
border-bottom: 3px solid #74DF00;
}

Yo suponía que con la orden "no-repeat left" funcionaría sin problemas, pero no es así.

¿Podrías echarme una mano? (prometo subir la comisión aquella de Adsense de la que hablamos ;) ).

Responder
JMiur  

Si el código que escribes en el comentario es exacto a lo que quieres probar, lo que se ve es un error:
......... 7703_e49f744dd5_o.gif)no-repeat left;

falta un espacio que separe el cierre del paréntesis de la palabra no-repeat:
......... 7703_e49f744dd5_o.gif) no-repeat left;

¿Logras ver ese detalle? Es difícil de mostrar en un comentario.

Lo de left está bien. En todo caso es innecesario ya que, por defecto, la posición es left top. De todas maneras, eso no influye.

Responder
Anónimo  

Sí, ese espacio sí que está en el código real (ha sido un fallo mío al copiarlo aquí. Pero por lo que he podido comprobar tampoco influye de poner el espacio a no ponerlo. Me sigue produciendo el mismo problema.

Mira he hecho esta captura de pantalla para mostrarte exactamente lo que ocurre. Donde pone "Descargar Open Fire" es un enlace, y al darle formato de enlace a ese texto, sale de nuevo a la izquierda del texto el icono de la imagen que no quiero que se repita (por eso lo del no-repeat) porque únicamente quiero que aparezca a la izquierda del fondo del bloque (por eso lo de left :) ). Resumiendo, que únicamente quiero que salga la imagen que hay a la izquierda del bloque y no las que salen al lado del texto :D .

Madre mía que jaleo.. jeje.

Responder
JMiur  

El espacio influye pero claro, en IE (así que olvida esa parte).

Por suerte, el ejemplo l opuedo ver online en tu blog. El CSS que quieres colocar está bien. El problema surge porque en la plantilla, parece haber una deficnión genérica de los enlaces que dice más o menos esto:

a { color: #940f04; background: inherit; text-decoration:none; }

background: inherit; signiica que los enlaces tienen un fondo igual al contenedor donde estén y eso produce la repetición. Lo razonable es que la definición genérica de los enlaces sea esta:

a { color: #940f04; text-decoration:none; }

Lo mismo pero sin el background ya que, por defecto, no tienen fondo.

Responder
Anónimo  

¡JMiur for president! Muchas gracias, ahora funciona de maravilla ;)

Responder
JMiur  

Me alegro que se resolviera y te aviso que de entrada: renuncio :D

Responder
egoloco  

Hola JMiur! (escribo nuevamente el comentario por las dudas que no haya funcionado el formulario... me gustan los retos :D )

Decia yo que este post es de mucha ayuda, principalmente para un blog que me pidieron un cambio de plantilla y el CSS es como decis vos "casi ilegible". Tambien decia yo que, ya que mencionaba dicho blog, necesitaba un poco de tu ayuda para con el mismo porque el script que utiliza la plantilla para mostrar la fecha del post no funciona. Es una plantilla One Room con la cual me tope en deluxe templates. El script encierra unas lineas con "span" debajo de la linea "p class='meta-date'" (con "<" obviamente) y segun vi por alli googleando se encierra con "div", pero no funciona y muestra un "undefined" en vez de la fecha. Si me das una manito con eso te sere eternamente agradecido!
El blog al que me refiero es http://perdidosenlahistoria.blogspot.com

P.D: Tengo a Vagabundia en un link en mi egoblogo.

Responder
JMiur  

Lo que ocurre es que el formato de la fecha es erróneo y debe cambairse para que coincida con el script.

En un comentario de esa plantilla leo esto:
"Editar Entradas del blog" y cambair el formato de la hora a algo así: Sunday, April 19, 2009"

Aclara que no debe cambairse el formato de la fecha sino de la hora.

Responder
Manuel de la Fuente  

Gracias a Firebug es muy fácil optimizar el CSS; prácticamente lo único que tienes que hacer es copiarlo tal cual como te lo muestra en la pestaña correspondiente, y ya viene sin espacios y debidamente ordenado. Sólo hay que titular cada sección (header, sidebar, footer, etc.), cambiar los valores largos (muy fácil con Notepad++) y separarlo con los condicionales. Listo. ;)

Responder
Manuel de la Fuente  

Por cierto, me parece que en esa última parte en la que hablas de los condicionales colocaste mal los códigos, ¿no debería ser de esta forma?

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <style type="text/css">
    Aquí los estilos para la página principal
    </style>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    Aquí los estilos para las páginas individuales (posts)
    </style>
    </b:if>

Responder
JMiur  

No dice eso, dice:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Es una condición negativa porque deben detectarses el resto de las paginas como las de navegación, archivos, búsquedas y archivos.

Responder
Manuel de la Fuente  

Ok, pero no me refería solo a eso, sino también las etiquetas style. Me parece que no están bien escritas.

Responder
Anónimo  

Si yo tengo esto:

#header-wrapper {
height:203px;
margin: 0;
}

Puedo transdormalo en

#header-wrapper {height:203px; margin: 0;}

o no va a funcionar como debería? ¿Ocuparía menos espacio así?

Responder
JMiur  

Funcionaría igual y también si le quitas los espacios:
#header-wrapper {height:203px;margin:0;}

Pero, esas son sutilizas que no van a afectar demasiado la carga de un sitio y harán confusa la edición.

A mi juicio, optimizar es otra cosa. Por e ejmplo ¿se nececita que margin sea cero o ya es cero por defecto porque está definico den otra parte? ¿Es necesario poner text-decoration:none a todos los enlaces o puede declararse globalmente y evitar repetir eso?

Para mi, las primeras definicin de CSS és esta:
* {margin: 0; padding: 0;}
De ese modo, salvo que se le diga lo contrario, todos los elementos tienen esas dos propiedaddes en cero y por lo tanto, no hace falta repetir lo mismo una y otra vez.

Responder
Anónimo  

Gracias, JMiur. ¿Y para qué le ponen margin:0; si es el valor que tiene por defecto? ¿Eso quiere decir que puedo borrar todos los padding y margin que estén en 0? ¿O tengo que poner * {margin: 0; padding: 0;} antes de hacer eso? ¿Dónde?

Responder
JMiur  

EL porqué lo han puesto es difícil de responder. A veces, imcluso, se coloca "por las dudas". Un DIV siempre tiene margenes de cero por defecto por ejemplo pero, otros elementos como P o UL no.

La optimización, pasa más por eso, por simplificarlo; por entender cada parte y ver si las propiedades declaradas son irrelevantes o no. Para eso, es aconsejable utilizar herramientas cono la extensión Firebug que te ayudará a ver cuáles se aplican y cuales no.

El CSS es algo bastante artesanal :D

Responder
Free Zone Vacations  

Hola JMiur! veo que eres un verdadero experto!!!!... yo no soy más que una curiosa aprendíz... pero quisiera preguntarte una cosa: hay manera de conseguir subir a blogger una plantilla que viene en formato CSS?... lo que ocurre, es que encontré una plantilla que me ha gustado mucho, pero solamente viene en ese formato y no sé cómo convertirlo a xml... podrías ayudarme?... la página de la plantilla es:
http://www.mytemplatebox.com/view/33/CSS-Templates/1/Travel/17/Travel-Journal.html
Mil gracias!

Responder
JMiur  

No existe tal cosa como convertir algo de ese modo ya que el CSS no es más que las lista de definiciones y propiedades de una página o de un blog por lotanto, necesitas todo lo demás.

Responder
Free Zone Vacations  

Gracias por tu respuesta!... pero dime, tiene idea de cómo podría implementar la plantilla CSS a mi blog?.... se puede hacer?

Responder
JMiur  

Todo se puede hacer pero, como dije, el CSS es sólo una parte de una plantilla ¿y el resto? Sin la estructura HTML, es imposible.

Un ejemplo, si yo te dijera que una habitación mide 4x4 y las paredes son de color verde ¿puedes decirme como es la casa? Eso es el CSS; no es un lenguaje sino una "lista" de propiedades de "algo" ... falta ese "algo".

Responder
Federico  

Yo tengo una duda, lei que para el SEO es mucho mejor usar los styles CSS en hojas aparte de la plantilla haciendoles un llamado con link a otro estilo.css asi no queda enterrado el contenido del blog.
Pero como puedo hacer eso en blogger? es decir, crear un CSS almacenado en blogger pero apartado de la plantilla ??

Gracias.

Responder
JMiur  

Los buscadors no leen CSS por lo tanto, eso que has leido es injustificado.

Lo que si es verdad es que se recomienda que las hojas de estilo estén en archivos separados porque de esa manera los navegadores las cachean y la navegación, dentro de un mismo sitio que usa esa hoja de estilo, seá más ágil. Además, siempre es más fácil editarlas. Pero eso sólo es válido cuando se posee un hosting propio.

Usar una hoja de estilo en Blogger es posible, sigue las misamas reglas que cualquier otro sitio web pero, será absolutamente inútil y no reportará beneficios ya que debes alojar esos archivos en otro servidor y el tiempo de conexión hará que el tiempo de carga se incremente en lugar de reducirse.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR