Es una de las preguntas más leídas en los foros WordPress, la que provoca la curiosidad cuando vemos una web que nos gusta y nos preguntamos ¿Qué tema WordPress usa esa web?.

Y, aunque no es fácil siempre adivinar el tema que usa una web, pues en muchas ocasiones se cambian referencias al mismo, si tenemos algunos trucos para tratar de adivinarlo cuando no hay ninguna referencia al tema usado en la misma web, algo bastante común.

1. Ver código fuente

El primer método para adivinar el tema que suelo usar es ver el código fuente de la web en cuestión. Desde el clic derecho de cualquier navegador moderno tenemos acceso a ver el código de la web que estamos visualizando, y una simple búsqueda por la cadena “wp-content/themes/” nos “soplará” el nombre de la carpeta del tema activo en la primera referencia al mismo, que normalmente suele estar en la cabecera del código, en la llamada a la hoja de estilos …

2. Inspeccionar elemento de cabecera de hoja de estilos

Un método similar es acceder a la utilidad de inspección de elementos web de los navegadores modernos, o Firebug si usas Firefox, mediante la cual puedes hacer clic en la hoja de estilos y, directamente, ver toda la información de la cabecera de la misma donde, salvo que se haya modificado, tendrás el nombre, descripción y hasta URL de la web del autor del tema.

3. WWTIT

Quizás basado en este método, está el servicio web llamado “What WordPress theme is that?“. Pones la url en la caja de búsqueda y te muestra precisamente esta información de cabecera de la hoja de estilos que todos los temas WordPress usan.

Por supuesto, ninguno de estos métodos anteriores sirve de nada si el administrador o diseñador de la web cambió el nombre de carpeta del tema y la información de cabecera de la hoja de estilos.

4. Clases CSS distintivas

Si este fuera el caso hay alguna cosa que puedes probar. Por ejemplo, usando el método 3 descrito anteriormente, busca una clase CSS exclusiva del tema, que no sea la típica “post” o “content“, sino una con nombres extraños, del gusto de muchos diseñadores.

Una vez identificada una que no sea “corriente” solo tienes que “googlear” por esa clase y, con un poco de suerte, identificar alguna consulta de soporte en foros donde, ya si, se cite el nombre del tema, o incluso la página de soporte del autor.

Y, bueno, esto es lo que yo suelo hacer, si tu tienes algún otro método se agradecerá que lo compartas

Nota: para las capturas he usado la web de mi muy mejor amiga Ana Aldea

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Diferente fondo en páginas y entradas
• Controlar automáticamente el ancho de imágenes en las entradas
• Mensajes a usuarios registrados y nuevos
• Syntax mode de WordPress para Panic CODA

Page Speed es una aplicación que puedes añadir a tu navegador Firefox como addon de Firefox pero debes tener en cuenta que requiere tener instalado previamente Firebug.

Una vez instalado, reinicias el navegador Firefox y, cuando actives Firebug en alguna página que estés visualizando, dispondrás de una nueva pestaña en esta utilidad llamada “Page speed“. Si haces clic en este nuevo apartado vas a poder analizar el rendimiento de la página que has cargado en el navegador, y al finalizar el proceso te muestra una lista de problemas mayores y menores, con recomendaciones de solución.

Los recursos que ofrece son impresionantes, no hay nada más que ver las recomendaciones para las imágenes, con muestras comprimidas de tus imágenes grandes,que además puedes definir que te las guarde en una carpeta de tu ordenador para luego sustituirlas por las existente, una gozada. También puedes guardar un registro de la actividad de la aplicación, y ver tus mejoras en carga de página a lo largo del tiempo.

Tampoco te pierdas la página de recomendaciones para mejorar la velocidad de tu web, una documentación realmente valiosa, con trucos y consejos realmente válidos.

En fin, que es una herramienta genial que, unida a Firebug, te ofrece de lo mejor para el análisis de webs en Firefox. Es una pena no haya la posibilidad de usarlo también en otros navegadores. Aquí te dejo unas capturas de esta pequeña maravilla, y más abajo un vídeo donde se explican sus virtudes …

Hay un vídeo en este post, me temo que tendrás que hacer clic aquí para verlo

Artículos Relacionados:

• Los 3 modos más comunes de hackear WordPress y cómo evitarlo
• Página 404 que sirve de verdad para algo
• Hosting WordPress
• Rich Snippets en WordPress
• La web semántica está en el limbo

Uno de estos detalles es la renovación de la herramienta de desarrollo llamada Inspector Web, toda una caja de herramientas para el programador o diseñador web.

Para acceder al Inspector Web antes debes activar el menú de desarrollo. Para eso abre el Terminal de tu Mac y teclea lo siguiente:

defaults write com.apple.Safari IncludeDebugMenu 1

La siguiente vez que abras Safari 4 verás el nuevo  menú llamado “Desarrollo” y una de sus opciones el el Inspector Web. Entre las novedades tienes …

• Abre en un marco por defecto
• Pestaña Bases de Datos
• Parametrización de Perfiles
• Depuración de Scripts
• Apartado “Tamaño” en la pestaña de Recursos
• Lupa para seleccionar elementos de la web que visitas y revisar su código
• Iconos para identificar errores y advertencias

Como siempre, puedes editar online el código, revisar la carga de la página, inspeccionar código y muchas cosas más, imprescindible para cualquier desarrollador.

Siempre he hablado de las virtudes de Firebug pero si tengo que elegir una combinación perfecta de velocidad y prestaciones ahora mismo el mejor navegador es Safari 4.

Artículos Relacionados:

• WordPress se simplificará radicalmente
• ¿Qué tema WordPress usa esa web?
• WordPress es el Rey de la web en España
• Mis 7 principales errores como blogger
• Escritorio WordPress adaptado para móviles

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Pues si, ha quedado para el final el mejor – mi preferido -, la combinación del navegador Safari y su aplicación interna Inspector Web, toda una maravilla de aplicación de debug y desarrollo web integrada en el navegador estrella de Apple.

Desde la versión 3, Safari tiene incluida esta herramienta, potente a la vez que sencilla de utilizar, que dispone de muchas virtudes. ¿Lo mejor de todo?, que no es nada comparada con la que viene incluida en Safari 4, aún en desarrollo pero ya disponible para los miembros del ADC en versiones para Mac OS X Tiger, Mac OS X Leopard y Windows.

El Inspector Web es, de lejos, la aplicación mas agradable y sencilla de utilizar de todas las que hemos cubierto en esta serie. Dispone de un resaltado de código realmente agradable y todo funciona suave y limpio, sin asperezas, como si no costara nada mostrar códigos internos. Una vez has probado el resto de herramientas, sobre todo la combinación Internet Explorer + Developer Tools, sabes apreciar la diferencia.

A simple vista parece que tiene un fallo notable, y es la posibilidad de hacer clic en un elemento para resaltarlo, como el “Inspect” de Firefox + Firebug pero afortunadamente lo consigue con honores – solo que no es muy obvio. Para hacerlo solo debes hacer clic derecho en un elemento de la página, hacer clic en el item del menú llamado “Inspeccionar elemento” y te la resalta y te muestra el código relacionado con el mismo, una maravilla. También lo puedes hacer al contrario, pues si seleccionas una parte de código igualmente te resalta la parte de la página afectada. De hecho puedes usar esta técnica en todos y cada uno de los elementos a inspeccionar y te mostrará una nueva ventana del Inspector Web con las propiedades de ese elemento en concreto. Es ciertamente exhaustivo.

Por supuesto, puedes editar CSS en directo y si quieres “inactivar” estilos. Dispones de una vista de plantilla, llamada Metrics para la visualización de los anchos, padding, etc. También hay debug de scripts que te “anuncia” con iconos de colores los errores existentes, visualización de las imágenes de la página, navegador de la ruta que has seguido para llegar a cada elemento (muy al estilo de la iTunes Store), “bocadillos” que te dan consejos, mas información al hacer clic en cada elemento de lista o ventana, de todo.

Es una herramienta tremendamente completa, que funciona a la perfección y una aplicación imprescindible para un desarrollador web, de hecho la mejor que he visto. Y no es pasión maquera, que también, sino pura y dura comparación de herramientas. De hecho me alegro de haberla probado la última porque sino las otras (salvo Firebug) habrían quedado fatal, es hasta decepcionante usar las Developer Tools de Microsoft o Dragonfly después de disfrutar la interfaz y enorme información que facilita el Inspector Web de Safari.

Bueno, nada mas, espero que hayas disfrutado esta serie o al menos hayas conocido estas herramientas.

Artículos Relacionados:

• WordPress se simplificará radicalmente
• ¿Qué tema WordPress usa esa web?
• WordPress es el Rey de la web en España
• Mis 7 principales errores como blogger
• Escritorio WordPress adaptado para móviles

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Casi llegamos al final de esta serie de herramientas de desarrollo integradas en los navegadores. No cubriremos todos los navegadores existentes, pero si los mas importantes. Hoy vamos a adentrarnos en las posibilidades que nos ofrece Internet Explorer a la hora de ofrecer herramientas para webmasters o navegantes curiosos.

Para ello nos vamos a valer de las Developer Tools, ya incluidas de serie en la versión ßeta de Internet Explorer 8 y que pueden descargarse para Internet Explorer 7.

No obstante, la barra para desarrolladores de Internet Explorer 7 adolece de bastantes fallos por lo que es mas recomendable utilizar la DebugBar en su lugar, que ofrece la misma funcionalidad. Es de suponer que cuando salga a la luz la versión definitiva de Internet Explorer 8 salga como aplicación en descarga separada.

Metidos en harina, ciertamente no parece que vaya a ser mi preferida porque adolece de bastantes cuestiones. Por una parte, es interesante la opción de “Seleccionar elemento mediante clic“, similar a la herramienta Inspect que veíamos en el artículo de Firefox + Firebug, no es igual de potente pero funciona muy bien.

Un fallo importante es que no permite la edición “al vuelo”, por lo que no podrás visualizar cambios realizados en el PHP, CSS o XHTML de la página que visualizas.

Muy parecida a Dragonfly, el hecho es que es casi una necesidad la existencia de esta herramienta, a pesar de que no aporte nada de relevancia, y es necesaria para muchos desarrolladores que utilicen Internet Explorer como navegador principal.

Bueno, menos mal que mañana veremos la mejor herramienta de todas, y mi recomendación especial.

Artículos Relacionados:

• Mejor contenido real que “lorem ipsum” para probar temas WordPress
• Desactivar la comprobación de actualizaciones de plugins
• Diferente fondo en páginas y entradas
• ¿Qué tema WordPress usa esa web?
• Mostrar extractos de páginas inferiores

Artículos Relacionados:

• ¿Qué tema WordPress usa esa web?
• Precarga de WordPress en Google Chrome
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• De qué están hechas las webs

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Bueno, seguimos hoy con la serie de Herramientas para desarrolladores, y en esta ocasión vamos a ver una de las utilidades mas conocidas, e imprescindible para muchos. No es que sea la mejor, que ya anticipo que no lo es, pero si la mas utilizada gracias – preferentemente – a la gran implantación del navegador Firefox.

Firebug es un añadido al navegador Firefox que se instala separadamente pero que luego funciona totalmente integrado en Firefox mostrando un icono en la parte inferior de la pantalla que mostrará si hay problemas de código en la página que estás visitando o no, y en cualquier caso te ofrece herramientas de desarrollo y debug avanzadas al pulsar en su icono.

Una vez abierta la zona de trabajo tienes de todo: muestra de errores, pruebas de rendimiento, vista completa del DOM, edición en vivo, consola, etc. Pero lo mejor que tiene Firebug es el botón de inspección “Inspect”, que te permite mostrar partes concretas de la página solo con colocar el cursor sobre cada sección de la misma, identificando las partes de código que la componen.

(clic para ampliar)

Firebug es una de mis herramientas preferidas y mi elegida para Firefox (aunque hay mas), no obstante no es la mejor de todas, esa queda para el último artículo de esta serie – y aún queda otro mas antes.

Artículos Relacionados:

• ¿Qué tema WordPress usa esa web?
• Precarga de WordPress en Google Chrome
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• De qué están hechas las webs