Impresionante la recopilación realizada por Cats who code sobre códigos con los que adaptar tu sitio a la visualización en iPhone. Como creo que es de un gran interés para desarrolladores y usuarios avanzados y que, por supuesto, son aplicables a WordPress, aquí los tienes con alguna adaptación a nuestro entorno:
Detectar iPhones e iPods usando Javascript
Al desarrollar para iPhone o iPod Touch lo primero que hay que hacer es detectarlo para que, luego, le apliquemos códigos o estilos. El siguiente código d etecta iPhones o iPods usando Javascript, y los redirige a una página específica para iPhone.
Aunque el código anterior funciona de maravilla puede que Javascript esté desactivado en el iPhone. Si fuera el caso puedes usar PHP para detectar iPhones o iPods Touch.
En muchas ocasiones visitas una web con tu iPhone y la ves en miniatura. La razón es que el desarrollador olvidó definir el viewport (o no sabe que existe). La declaración de width=device-width te permite definir el ancho del documento al ancho de la pantalla del iPhone. Las otras dos declaraciones son muy útiles si estás desarrollando un sitio "solo para iPhone". En caso contrario puedes borrar estas dos declaraciones.
Definir un viewport es fácil: Simplemente inserta el siguiente meta en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa):
Cuando un usuario añade tu web a su página de inicio el iPhone usa una captura de pantalla de tu sitio como icono. Pero tu puedes ofrecer un icono específico, lo que es mucho mejor.
Definir un icono personalizado para iPhone es fácil: Simplemente pega el siguiente código en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa). La imagen debe ser de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:
Evitar que Safari ajuste el tamaño de texto al rotar
Cuando rotas el iPhone, Safarie ajusta el tamaño de texto. Si por algún motivo prefieres evitar este efecto solo tienes que usar el siguiente CSS, que tendrás que añadir a tu hoja de estilos (fichero "style.css" de tu plantilla activa).
La declaración -webkit-text-size-adjust es una propiedad CSS exclusiva de webkit que permite controlar el ajuste de texto.
Como el iPhone permite ver la página en vertical o apaisdo puede que necesites detectar en qué modo el documento será visible.
Esta función Javascript detecta la orientación actual del iPhone y aplica una clase CSS específica para cada modo de orientación. Fíjate que en este ejemplo la clase CSS se añade al ID del page_wrapper. Remplázalo por el nombre de ID deseado (línea 24)
Redimensionar imágenes automáticamente para iPhones
En las webs actuales la mayoría de las imágenes suelen ser de un ancho superior a 480px. Al ser de este tamaño la pantalla del iPhone puede que las imágenes más grandes se vean incorrectamente, incluso destrozando el diseño de tu sitio.
Pues bien, usando el siguiente código CSS podrás redimensionar automáticamente las imágenes que sean de un ancho mayor de 480px, el ancho estándar del iPhone, con lo que nunca se verán más anchas y no desconfigurarán tu sitio al visualizarse en un iPhone.
La barra de tareas es útil pero a veces ocupa demasiado sitio, que vendría estupendo para mostrar mejor tu web. Si quieres que Safari oculte la barra por defecto cuando un usuario de iPhone visite tu sitio solo tienes que añadir el siguiente Javascript:
Al igual que con los enlaces "mailto", tan útiles para que te envíen emails, si se visualiza tu web con un iPhone puedes añadir otro tipo de enlaces que ejecutarán acciones, gracias a la función de teléfono de este miniordenador de bolsillo.
Si quieres ofrecer enlaces para que te llamen o te envíen un SMS puedes usar códigos html de este tipo:
Como no se usa ratón en el iPhone no se utiliza la pseudo clase :hover. Sin embargo, usando Javascript puedes simular la clase pseudo :hover cuando el usuario apoye el dedo sobre un enlace:
Muchas veces, cuando estamos construyendo un tema de WordPress, acabamos dedicándonos a estilizar aquellos elementos (smileys, pies de foto, alineamiento de las imágenes en un artículo…) que son servidos por WordPress directamente, y que necesitan tarde o temprano algunos retoques con CSS.
Sin embargo, disponemos de una forma para conseguir que todos esos elementos ‘nativos’ de WordPress sean estilizados por defecto, usando cierto archivo .css con el que WordPress nos viene.
Para ello, deberemos abrir nuestro header.php e incluir, junto a la hoja de estilos propia que nosotros estemos construyendo, ésta otra, que WordPress extraerá de sus archivos:
La podemos poner, por ejemplo, justo debajo de la hoja de estilos que hayamos creado; y nos tomará en cuenta todos esos pequeños detalles sin que tengamos que volver sobre ellos.
Si queréis darle un vistazo, aquí la tenemos: wp.css
Elastic Theme Editor es la solución definitiva para la edición interactiva de las plantillas de tu WordPress desde la administración.
Entre las características de este editor visual de temas podemos comentar:
Infinitos cambios para tu tema: Arrastrar y soltar para personalizar.
Fuentes personalizadas: Realiza vista previa con el editor de tipografías.
Organización sencilla basada en celdas. Personalizar la celdas para mayor flexibilidad.
Es portable: Comparte tu temas con quien quieras. Elastic crea temas estándar para WordPress.
Framework para Temas: Para que los desarrolladores de temas lo tengan más fácil.
Y muchas más cosas en las que están trabajando.
Para empezar os recomiendo ver el siguiente vídeo muy ilustrativo de como funciona Elastic:
Elastic se encuentra actualmente en desarrollo y puede que tenga errores, pero si los encuentras lo mejor es notificar a su autor para que peuda corregirlo y mejorar juntos.
Os recomiendo visitar esta presentación del WordCamp NYC 2009, donde se comenta ¿Por que WYSIWYG es el futuro de los temas para WordPress?.
Interesante recopilación de temas para WordPress que imitan a sitios famosos como NYTimes, Apple, Facebook, BBC News, Gmail, … Realmente una interesante forma de aprovechar la organización y usabilidad de estos reconocidos lugares en la red.
A todos nos gusta tener un sitio con un aspecto diferenciador pero son muchas las ocasiones en que puede ser interesante disponer de un diseño que imite a webs famosas. Imagina, por ejemplo, un blog de fans de Facebook, o un portal sobre mundo Apple ¿no te gustaría ofrecer un aspecto similar al servicio o web al que haces homenaje?.
Pues bien, aquí tienes un repaso por algunos temas que imitan webs bien conocidas. Seguro que alguno ya lo conocías, pero puede que alguno te sorprenda.
Plantillas gratis de alta calidad para Wordpress es una colección de 40 temas para este popular gestor de contenidos donde podrás encontrar temas premium, para diseñadores y desarrolladores.
Glassical es un gran tema de 2 columnas para WordPress con un diseño realmente limpio y claro, con una gran organización. Listo para adaptar para tu sitio web incluyendo publicidad en la cabecera y la barra lateral. Este tema es gratis y profesional, e incluye los PSD para poder modificar a gusto la imágenes. El tema ha sido desarrollado de forma especial para los lectores de Smashing Magazine.
Esta plantilla para WordPress ha sido liberada bajo licencia GPL, puedes utilizar sin ningún tipo de restrincción en cualquier proyecto web. Es compatible con WordPress 2.8 o superior y incluye la personalización del plugin WP Pagenavi para paginación especial de las páginas.
Marketplace es un tema para Wordpress con un estilo limpio y con diseño creativo para crear una comunidad de contenidos con 2 columnas.
Este tema incluye interesantes características y seleccionar entre 5 colores. Entre las opciones de esta plantilla podemos comentar espacios para publicidad, pestañas de navegación en la barra lateral, integración de flickr, imágenes en los artículos, comentarios muy limpios, enlaces sociales, y mucha más opciones. Solo por 25$ dólares puedes conseguir este original tema para tu sitio web con Wordpress.
Guía para Administrar Wordpress
¿Te gustó este post? ¡Compártelo!
