Posts Tagged: diseño

Marzo 8th, 2010

Prepara tu sitio para iPhone

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.

JavaScript:
  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2.     if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  3.         window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
  4.     }
  5. }

Fuente: http://davidwalsh.name/detect-iphone

Detectar iPhones e iPods usando PHP

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.

PHP:
  1. if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
  2.     header('Location: http://yoursite.com/iphone');
  3.     exit();
  4. }

Fuente: http://davidwalsh.name/detect-iphone

Definir el ancho de iPhone como viewport

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):

PHP:
  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Insertar un icono específico para iPhone

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:

PHP:
  1. <rel="apple-touch-icon" href="images/template/engage.png"/>

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

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.

CSS:
  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  2.     -webkit-text-size-adjust:none;
  3. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Detectar la orientación del iPhone

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)

CSS:
  1. window.onload = function initialLoad() {
  2.     updateOrientation();
  3. }
  4.  
  5. function updateOrientation(){
  6.     var contentType = "show_";
  7.     switch(window.orientation){
  8.         case 0:
  9.     contentType += "normal";
  10.     break;
  11.  
  12.     case -90:
  13.     contentType += "right";
  14.     break;
  15.  
  16.     case 90:
  17.     contentType += "left";
  18.     break;
  19.  
  20.     case 180:
  21.     contentType += "flipped";
  22.     break;
  23.     }
  24.     document.getElementById("page_wrapper").setAttribute("class", contentType);
  25. }

Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Aplicar estilos CSS solo para iPhones/iPods

Si buscas un modo limpio de aplicar clases CSS solo para iPhone puedes usar el siguiente código:

CSS:
  1. @media screen and (max-device-width: 480px){
  2.     /* Todo el CSS para iPhone va aqui */
  3. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

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.

CSS:
  1. @media screen and (max-device-width: 480px){
  2.     img{
  3.         max-width:100%;
  4.         height:auto;
  5.     }
  6. }

Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Ocultar la barra de tareas por defecto

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:

JavaScript:
  1. window.addEventListener('load', function() {
  2.     setTimeout(scrollTo, 0, 0, 1);
  3. }, false);

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/2

Usar enlaces especiales

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:

HTML:
  1. <a href="tel:12345678900">Llámame</a>

HTML:
  1. <a href="sms:12345678900">Mándame un SMS</a>

Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/3

Simular la clase pseudo :hover

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:

JavaScript:
  1. var myLinks = document.getElementsByTagName('a');
  2. for(var i = 0; i <myLinks.length; i++){
  3.    myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
  4.    myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
  5. }

Tras añadir el código anterior puedes aplicar algo de estilo CSS:

CSS:
  1. a:hover, a.hover {
  2.     /* el efecto hover que sea*/
  3. }

Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar Wordpress

Google Buzz ¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Febrero 25th, 2010

Hacerse con la hoja de estilos por defecto de WordPress

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:

<link rel='stylesheet' href='/wp.css' type='text/css' media='all' />

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

Esperamos que este truco sea de vuestro interés.

Febrero 3rd, 2010

Elastic, el editor de Temas para WordPress

Elastic Theme Editor es la solución definitiva para la edición interactiva de las plantillas de tu WordPress desde la administración.

elastic theme editor 470x334 Elastic, el editor de Temas para WordPress

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?.

Descargar plugin: Elastic Them Editor

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Elastic, el editor de Temas para WordPress

Febrero 1st, 2010

Temas para WordPress que imitan webs famosas

new yorker times tema 413x350 Temas para WordPress que imitan webs famosas

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.

Referencia en Ayuda Wordpress y WpZoom.

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Temas para WordPress que imitan webs famosas

Enero 31st, 2010

Temas que imitan webs famosas

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.

    WPSN Theme – clon de ESPN

    Información del tema Demo Ver sitio original

    Seguro que hay muchos más, pero esta es una buena muestra de como se pueden imitar sitios famosos, en muchos casos con temas gratuitos.

    Ahora bien, otra cosa es la originalidad, esa es otra discusión.

¿Te gustó este post? ¡Compártelo! Bitacoras.com TwitThis Facebook Meneame Google Bookmarks del.icio.us Live Technorati Ping.fm Wikio Turn this article into a PDF! E-mail this story to a friend! Print this article!

Enero 21st, 2010

Plantillas para Wordpress: LIGHTcorners

lightcorners tema wordpress 357x350 Plantillas para Wordpress: LIGHTcorners

LIGHTcorners es una completa plantilla para WordPress desarrollada por Roxigo y disponible por solo 27 dólares en Themeforest.

Entre las opciones que aporta este diseño web a tu sitio con este popular gestor de contenidos están:

  • Páginas de opciones para el tema, para configurar todo de forma sencilla.
  • Slider gráfico con jQuery y administrable vía las opciones del tema.
  • Páginas para Blog/Portafolio/Servicios.
  • Páginas para entradas destacadas y portada.
  • Administración de portafolio muy sencilla.
  • Barra lateral lista para Widget.
  • Ficheros PSD incluidos.
  • Buena documentación.
  • Compatible con IE6 o superior entre otro navegadores.

Descargar LIGHTcorners

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Plantillas para Wordpress: LIGHTcorners

Noviembre 15th, 2009

Plantillas de alta calidad para WordPress

polar 150x150 Plantillas de alta calidad para WordPress appcloud 150x150 Plantillas de alta calidad para WordPress simplecart 150x150 Plantillas de alta calidad para WordPress zinepress theme 150x150 Plantillas de alta calidad para WordPress

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.

Más informacióne en Smashing magazine. Más plantillas gratis.

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Plantillas de alta calidad para WordPress

Noviembre 10th, 2009

Temas gratis para WordPress: Glassical

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.

glassic fullpreview 150x150 Temas gratis para WordPress: Glassical post preview 150x150 Temas gratis para WordPress: Glassical

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.

Descagar Tema Glassical. Ver demo Glassical.

Más plantillas para Wordpress de calidad y muy baratas.

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Temas gratis para WordPress: Glassical

Noviembre 7th, 2009

Plantillas para WordPress: Marketplace

Marketplace es un tema para Wordpress con un estilo limpio y con diseño creativo para crear una comunidad de contenidos con 2 columnas.

marketplace tema 150x150 Plantillas para WordPress: Marketplace marketplace pagina 150x150 Plantillas para WordPress: Marketplace

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.

Descargar y comprar tema Marketplace.

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Plantillas para WordPress: Marketplace

Noviembre 7th, 2009

Juegos de consolas: Otra Partida

El pasado jueves lanzamos en fase beta el diseño para la web de juegos de consolas, noticias, análisis de juegos e información sobre todo lo que buscas para tus juegos de Wii, Nintendo DSi, PlayStation 2 y PlayStation 3, PSP, juegos flash, juegos para ordenadores y móviles, …

Aquí os dejamos una captura, espero que os guste, podéis dejar vuestros comentarios para mejorar el sitio. El sitio web esta creado sobre WordPress.

juegos para consolas en otra partida

Original Post / Entrada Original: Carrero.es. Si quieres Juegos Gratis disfruta aquí o decora tu casa.

Juegos de consolas: Otra Partida