Así como suena. Gracias a un comentario de Red Verdialera he descubierto que tenía infrautilizado mi acceso directo a Google Chrome. Creo que es una forma muy cómoda de analizar una plantilla y poder previsualizar los cambios sobre la marcha.Similar a la extensión para Firefox, Firebug, pero de serie, este navegador nos muestra en una ventana emergente la estructura de nuestro HTML, con sólo utilizar Botón derecho-->Inspeccionar Elemento.
Si hacemos el clic sobre el BODY, aparecen plegadas las capas principales y al pinchar sobre las flechas, se despliegan para mostrar el contenido. Vemos así nuestro código (o el de cualquier otra página web) y descubrimos visualmente su estructura, así como qué es lo que hace cada uno de nuestros DIV's. Si posamos el puntero en cualquiera de ellos, veremos marcado en la página (que queda en segundo plano) el elemento formado por esa capa. Asimismo con un elemento más "pequeño" como un texto, un enlace, una imagen...
A la inversa, podemos Pinchar-->Botón derecho en un elemento en concreto y en la ventana emergente nos saldrá marcado el código que le corresponde. Tanto de una forma como de la otra, con doble clic podemos editar y cambiar lo que queramos, viendo el resultado nada más aceptar con el Intro.
A la derecha tenemos una sección que entre otras cosas, muestra el estilo que afecta al elemento que tenemos seleccionado en ese momento. Sus atributos también pueden ser modificados para ir viendo los cambios.
Ojo los de Blogger, porque lo que veis con este método no es exactamente lo que teneis en vuestra plantilla, sino la interpretación del código por el navegador. Esto quiere decir que no vais a encontrar el código que hace que se vean los contenidos de los posts (DATA:POST.BODY), ni cualquier otro artilugio Blogger, como pudiera ser el que almacena y muestra las etiquetas-categorías.
Sin embargo, sigue siendo muy buena herramienta para descubrir fallos en la estructura y hacer arreglos de estilo rápidamente. Sólo se trata de un borrador y de previsualizaciones, por lo que una vez decididos/detectados los cambios, teneis que trasladarlos a vuestra plantilla mediante el procedimiento habitual (Diseño-->Edición HTML)
No perdais de vista la herramienta Metrics que nos muestra los bordes, márgenes y padding del elemento seleccionado y que puede servirnos para ver de manera gráfica, estos atributos en cada una de las capas. También parecen interesantes los atajos de la barra inferior, como la lupa para ir seleccionando elemento a elemento o la relación de errores (en rojo) que podemos ver desplegando la consola (show console).Por último pero no menos interesante, en una segunda pestaña (Resources), podemos ver el tamaño de todos los elementos que tenemos en nuestra plantilla, así como el tiempo de carga total y el de cada uno de ellos. Aquí podríamos detectar fácilmente, cositas que estuvieran retardando la carga de nuestra página más de lo necesario y que quizás convendría eliminar o sustituir. Como podeis ver en el siguiente gráfico, los SCRIPTS son los que matan a la página del ejemplo (40% del tiempo total).
Si te interesa probarlo, aquí puedes descargar Chrome desde la web de Google.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Yo tengo un gran problema, y es que mi blog se ve ligeramente desformado en chrome y en safari. Parece ser que mi fecha tipo calendario en los post desplaza mis post más a la derecha de lo que yo deseo, que es tal y como se ve en firefox, explorer y opera. Si alguien me puediera ayudar... ya no sé que hacer, estoy desesperado. no quiero desprenderme de las fechas de los post.
ResponderEliminarhttp://todoelmundoodiamiblog.blogspot.com/
Esta es la direccció de mi blog ligeramente desformado en esos navegadores que he citado antes.
Gracias de antemano.
Me encantó este post. En la próxima sesión de revisión del diseño de mi blog voy a dedicarle un tiempo a investigar este inspector de objetos y analizador del blog para poder mejorarlo.
ResponderEliminarHasta ahora me entero que el Google Chrome tiene todas esas funciones útiles, interesante. Gracias
ResponderEliminarEscribe un microrrelato y hazle promoción en tu blog para conseguir votos.
ResponderEliminarConsigue que sea la historia más ruinosa y..., ¡te vas de crucero por Grecia!
No dudes en subir tu texto a esta web, ¡y mucha suerte!
Hola, Oloman, quería pedirte un favor no te importaría votar mi blog en 20blogs de 20 minutos, (yo te he votado a tí) por favor?
ResponderEliminarEnhorabuena por tu blog, te invito a que te pases por el directorio web/blog www.cincolinks.com podrás promocionar tu web, con tu ficha y tus votaciones y valoraciones, con un método de intercambio de visitas llamado 5links! con el que tu blog será visitado tanto como visites a los demas y que harán que tu blog se de a conocer por toda la red. Pásate ;)
ResponderEliminarCreo que tu blog encajará perfectamente en la comunidad, y el foro estará encantado de recibirte.
Saludos, espero verte por www.cincolinks.com.
Francis, más que con la fecha, creo que el problema lo tienes con la clase H3 de los títulos. Realmente, el texto no se va para la derecha, sino que se coloca más arriba que en otros navegadores. Como el calendario está con un FLOAT, además se coloca a la derecha de este. Sería suficiente con meter un salto de línea (BR).
ResponderEliminarPrueba a aumentar el alto de línea o a poner un padding inferior. También puedes intentar arreglarlo desde la clase POST-HEADER-LINE-1.
No lo he analizado mucho, pero también es posible que se arregle colocando un
<div style='clear:both;'/>
después de las dos clases antes indicadas. Eso provoca un salto de línea hasta después del último elemento con FLOAT (el calendario en este caso)
Marcos, Roudy, tengo Chrome hace casi un año y también yo me enteré ahora.
ResponderEliminarBertoManía, el intercambio de votos no está permitido, aunque le echaré un vistazo a tu blog.
mi google no se lo k le pasa no seve lo de favoritos
ResponderEliminarni lo de arriva la llave por k ??
asme un paro men a ver k es lo k tiene
Prueba a darle a F11 a ver si hay suerte ;)
ResponderEliminar