Currently browsing: March 2010

¡De vuelta!

Beware: This post was published 5 years ago and its content may be outdated.

Ya estoy de nuevo aquí y con ganas de volver a publicar a ritmo normal, aunque creo que este fin de semana lo voy a tener algo complicado, ya que primero tengo que contestar emails, revisar los comentarios y enterarme de qué ha estado pasado estos días que he estado desconectado.

En unos días (quizá en cuestión de horas) volveréis a ver artículos nuevos en el blog.

En Madrid

Beware: This post was published 5 years ago and its content may be outdated.

Como podreis habido comprobar, estos últimos días no he escrito ningún artículo, y no ha sido por falta de ideas, sino por falta de tiempo. Y es que estos días estoy de visita turistica en Madrid, así que como habréis podréis suponer, no tengo tiempo para escribir nada. Este fin de semana estaré de vuelta, así que el sábado o el domingo volveré a escribir artículos, responder emails y contestar los comentarios del blog.

¡Nos vemos en unos días!

Diseñando nuestra web para el iPhone – Parte 3

Beware: This post was published 5 years ago and its content may be outdated.

Nota: Esta es la tercera parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).

En esta parte me centraré por completo en el diseño de las cabeceras, aprovechando algunos atributos CSS únicos de Webkit que nos facilitarán tareas como redondear esquinas y crear degradados. Si recordáis dónde nos quedamos en la parte anterior, llegamos a ver diferentes ejemplos de cabeceras, de las cuales nos centraríamos en las que utilizan un sistema de navegación por pestañas y en las que imitan la interfaz de las aplicaciones nativas del iPhone.

Creando una cabecera con degradados y pestañas

Comenzaremos por la cabecera con degradados y pestañas. Yo seguiré el modelo de Yahoo, que podéis en la imagen de la izquierda. Podría haber seguido el modelo de Google, pero me parecía más simple y fácil de hacer.

La cabecera está formada por tres niveles diferentes. En el primero está el logotipo y un enlace hacia el correo, en el segundo están las pestañas y en el tercero está el buscador. Puede que no tengamos clara la utilidad del tercer nivel fuera de un buscador, pero realmente puede ser muy útil. Por ejemplo, podemos mostrar ahí las subpáginas que hay dentro de la pestaña, o si estamos diseñando para un blog, la lista de categorías del artículo, o simplemente, un buscador.

Así que en principio la cabecerá tendrá la siguiente estructura HTML:

<div id="header">
		<div id="logo_container">
			<!-- Aquí estará el logo -->
		</div>
		<div id="menu_container">
			<!-- Aquí estarán las pestañas -->
		</div>
		<div id="subheader">
			<!-- Aquí estará el buscador -->
		</div>
	</div>

Dicho esto, centrémonos en crear los degradados. Generalmente tendríamos que recurrir a imágenes, sin embargo, Webkit permite crear degradados mediante -webkit-gradient. Su sintaxis puede parecer algo compleja, así que veámosla con un ejemplo:

background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000));

Cada coma (,) separa un valor diferente. El primero indica de si se trata de un degradado lineal o radial. En este caso tomaremos el linela. El segundo valor indica la posición desde la que comienza: a la izquierda y arriba. El tercer valor indica dónde acaba: a la izquierda y abajo. El cuarto valor indica el color inicial: blanco. El quinto y último valor indica el color en el que acaba: negro. También podemos establecer colores intermedios, pero es algo más complejo.

Esto nos evita tener que crear una imagen con el degradado y agiliza la carga de la página.

Para crear las esquinas curvas, recurriremos a -webkit-border-radius para establecer un radio a todas las esquinas y -webkit-border-(top | bottom)-(left | right)-radius para especificar qué esquinas tendrán cierto radio.

#redondear_bordes {
-webkit-border-radius:4px; /* Todas las esquinas tendrán un radio de 4px */
-webkit-border-top-left-radius:4px; /* Sólo la esquina superior izquierda tendrá un radio de 4px */
-webkit-border-top-right-radius:4px; /* Sólo la esquina superior derecha tendrá un radio de 4px */
-webkit-border-bottom-left-radius:4px; /* Sólo la esquina inferior izquierda tendrá un radio de 4px */
-webkit-border-bottom-right-radius:4px; /* Sólo la esquina inferior derecha tendrá un radio de 4px */
}

Combinando esto con algo más de CSS e ingenio podemos lograr sin mucha dificultad algo como lo de la imagen que hay a continuación, que se crearía a partir del siguiente código HTML / CSS:

	<div id="header">
		<div id="logo_container">
			<!-- Aquí estará el logo -->
			<h1>Miweb.com</h1>
		</div>
		<div id="menu_container">
			<!-- Aquí estarán las pestañas -->
			<ul id="menu">
				<li class="selected"><a href="#">Inicio</a></li>
				<li><a href="#">Artículos</a></li>
				<li><a href="#">Páginas</a></li>
			</ul>
		</div>
		<div id="subheader">
			<!-- Aquí estará el buscador -->
		</div>
	</div>
body, div, h1 {  /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
	margin:0;
	padding:0;
}
#header {
	width:100%;
	height:150px;
background: -webkit-gradient(linear, left top, left bottom, f rom(#75B856), to(#4C7A06));
}
#logo_container {
	width:100%;
	height:50px;
}
#logo_container h1 {
	padding:8px;
	font-family:Helvetica;
	font-size:30px;
	color:#FFF;
}
#menu_container {
	width:100%;
	height:50px;
}
#menu {
	width:100%;
	height:50px;
	padding:0;
	margin:0;
	list-style:none;
}
#menu li {
	height:38px;
	margin:2px 5px 0 5px;
	padding:5px;
	float:left;
}
#menu li a {
	height:28px;
	padding:5px;
	font-family:Helvetica;
	font-size:20px;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:block;
}
#menu li.selected {
	background: -webkit-gradient(linear, left top, left bottom, f rom(#FFF), to(#FEFEFE));
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
}
#menu li.selected a {
	color:#000;
}
#subheader {
	width:100%;
	height:50px;
	background: -webkit-gradient(linear, left top, left bottom, f rom(#FEFEFE), to(#C0C0C0));
	border-bottom:1px solid #666;
}

Nota: He usado varias veces la palabra “f rom” en el código anterior. En realidad debería escribirse todo junto (sin el espacio entre la “f” y “rom”), pero no he podido unirlo y guardar el artículo, WordPress me devuelve un error. En fin, disculpad las molestias.

Como podéis ver, el resultado es muy similar al de Yahoo, aunque no he añadido el buscador, eso os lo dejo a vosotros.

Creando una cabecera que imite la de una aplicación nativa

El segundo tipo de cabeceras que vimos eran las que imitaban la barra de título de una aplicación nativa. Esta vez partiremos del diseño de Coosh, que podéis ver en la imagen de la izquierda.

Si bien Coosh trata de imitar la interfaz de una aplicación, lo cierto es que la barra de título está incompleta, faltan el título y el enlace hacia la siguiente página.

Así que partiremos de una estructura con un nivel y tres elementos: botón anterior, botón posterior y título de la página, que en HTML quedaría así:

<div id="header">
		<div id="back">
			<!-- Aquí estará el enlace hacia la página anterior -->
			<a href="#">Atr&aacute;s</a>
		</div>
		<div id="forward">
			<!-- Aquí estará el enlace hacia la siguiente página -->
			<a href="#">Adelante</a>
		</div>
		<div id="title">
			<!-- Aquí estará el título de la página -->
			<h1>Miweb.com</h1>
		</div>
	</div>

Bien, ahora mediante combinación de degradados y bordes curvos podemos imitar la interfaz de una aplicación sin demasiada dificultad y sin usar imágenes. Podríamos mejorar el aspecto mediante el uso de imágenes, pero estamos hablando de aprovechar al máximo las posibilidades del iPhone, así que las dejaremos para más adelante.

El resultado que podemos lograr lo tenéis a continuación, junto con el código CSS que lo logra.

body, div, h1 {  /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
	margin:0;
	padding:0;
}
#header {
	height:30px; /* Tomaremos una altura aceptable */
	padding:4px;
	background: -webkit-gradient(linear, left top, left bottom, f rom(#BEC8D6), to(#7A90AD));
	border-bottom:1px solid #6F7A86;
	clear:both;
}
#back {
	height:20px;
	margin:0 10px 0 0;
	padding:4px;
	float:left;
	border:1px solid #626C79;
	-webkit-border-radius:6px;
	background: -webkit-gradient(linear, left top, left bottom, f rom(#9AADC6), to(#5C7DA9), color-stop(0.5, #6584AD), color-stop(0.5, #5C7DA9));
}
#back a , #forward a{
	font-family:Helvetica;
	font-size:15px;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
	text-align:center;
	white-space: nowrap;
	color:#FFF;
}
#forward {
	height:20px;
	margin:0 0 0 10px;
	padding:4px;
	float:right;
	border:1px solid #626C79;
	-webkit-border-radius:6px;
	background: -webkit-gradient(linear, left top, left bottom, f rom(#9AADC6), to(#5C7DA9), color-stop(0.5, #6584AD), color-stop(0.5, #5C7DA9));
}
#title h1 {
	font-family:Helvetica;
	font-size:26px;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
	text-align:center;
	white-space: nowrap;
	color:#FFF;
}

Nota: Como antes, he usado varias veces la palabra “f rom” en el código anterior. En realidad debería escribirse todo junto (sin el espacio entre la “f” y “rom”), pero no he podido unirlo y guardar el artículo, WordPress me devuelve un error. En fin, disculpad las molestias.

Con esto ya podemos crear dos tipos diferentes de cabeceras, que era el objetivo de esta tercera parte. Como siempre, cualquier duda, sugerencia o pregunta, podéis hacerla en los comentarios.

Diseñando nuestra web para el iPhone – Parte 2

Beware: This post was published 5 years ago and its content may be outdated.

Nota: Esta es la segunda parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).

En esta segunda parte nos centraremos en las medidas que debe tener nuestro diseño, detectar rotaciones (giros a la derecha o a la izquierda), definir un icono para nuestra web, personalizar el zoom máximo y daré unas pinceladas sobre la cabecera. Para ello revisaremos algunas páginas diseñadas específicamente para el iPhone, como Yahoo y Google (versión iPhone), deviantART, Coosh o Please fix the iPhone.

Medidas

Medidas de Safari en el iPhone

Medidas

Medidas de Safari en el iPhone (apaisado)

Medidas en horizontal

Vayamos por partes. Antes de comenzar a hacer nada debemos tener claro el tamaño que tendrá el diseño. En la imagen de la izquierda podéis ver las medidas de los diferentes contenidos que muestra el iPhone: la barra de estado (está siempre visible, tiene 20px de alto y ocupa siempre todo el espacio horizontal de la pantalla), el campo de la URL (se oculta al hacer scroll hacia debajo, ocupa todo lo posible en el eje horizontal y 60px en el vertical), la barra de botones (al igual que la barra de estado, no se puede ocultar, ocupa 44px en la vertical y todo lo posible en la horizontal), lo cual deja un espacio de 320px x 356px de contenido propio de la página (320 en el eje horizontal y 356 en el vertical).

Si colocamos el iPhone en posición horizontal (apaisado), algunas medidas variarán (ver imagen de la derecha): la barra de estado y el campo de la URL permanecen como antes, mientras que la barra de botones para a ocupar sólo 32px en el eje vertical, con lo cual el contenido visible ocupa un espacio de 480px x 208px.

Cuando se diseña una web suele ser necesario tener en cuenta las diversas resoluciones de pantalla en las que se visualizará la página, sin embargo una de las cosas buenas para los diseñadores (y en algunos casos malas para los usuarios) es que la resolución es fija, así que basta con diseñar específicamente para estas medidas: nuestro diseño sólo se verá en un dispositivo un determinado navegador y una resolución de pantalla de 320px x 480px.

Detectando los giros, asignando icono y personalizando zoom

Al poderse girar el iPhone hay dos posibilidades: que se esté visualizando la página con el dispositivo en vertical o que se visualice con el iPhone en horizontal, lo cual hace que sea necesario detectar estos giros para poder mostrar u ocultar cierto contenido en cada caso.

Por ejemplo, si queremos que en la versión horizontal se vea algo más de contenido en los laterales (por aprovechar el espacio), será necesario detectar el cambio de posición y ajustar el diseño en consecuencia. Otro caso en el que necesitemos saber si se ha producido un giro es en el caso de los formularios: un campo de texto se puede alargar cuando el iPhone está en posición horizontal y se debe acortar cuando está en posición vertical, pura lógica.

Parar ello recurriremos a Javascript, con el cual podemos detectar fácilmente estos giros.

function updateOrientation()
{
	switch(window.orientation)
	{
		case 0:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
		case -90:
			tamanio_cuadro_texto = "360px";
			tamanio_contenedor_a = "300px";
			break;
		case 90:
			tamanio_cuadro_texto = "360px";
			tamanio_contenedor_a = "300px";
			break;
		case 180:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
		default:
			tamanio_cuadro_texto = "200px";
			tamanio_contenedor_a = "150px";
			break;
	}
	document.getElementById("cuadro_texto_1").style.width =  tamanio_cuadro_texto;
	document.getElementById("a").style.width =  tamanio_contenedor_a;
}

Es un código bastante sencillo, que se puede ampliar mucho más (el de arriba es sólo un pequeño ejemplo). Para hacer que funcione del todo tendremos que modificar la etiqueta body de nuestro HTML y añadirle los atributos onorientationchange y onLoad, que nos asegurarán que cada vez que se cargue la página o se cambie la orientación, se cambiará el tamaño por el adecuado (definido antes en el código Javascript), quedando así nuestra etiqueta body:

<body onorientationchange="updateOrientation();" onLoad="updateOrientation();">

Otro punto interesante para hacer única nuestra página web es asignarle un icono. En principio el iPhone no muestra ningún favicon en el navegador, pero al añadir un enlace a una web en la página de inicio, podemos indicarle al navegador que tome como icono una imagen específica, en lugar de una previsualización de la página web (que es lo que toma por defecto). Para esto usaremos la etiqueta link con el atributo rel establecido en apple-touch-icon:

<link rel="apple-touch-icon" href="http://10.0.1.3:8888/sumolari/wp-content/themes/sumolari/ipo/img/favicon.png"/>

Este icono debe ser una imagen con un tamaño cuadrado. No es necesario que le añadamos bordes curvos ni el toque luminoso, ya que los hará el iPhone directamente.

Por último, el iPhone permite hacer zoom en las páginas, sin embargo, como estamos diseñando específicamente para él, nos interesa mantenerlo bloqueado y ser nosotros quienes definamos el tamaño de las textos y los elementos. Con esto también logramos darle a la web un aspecto más similar al de una aplicación nativa. Para bloquear el zoom usaremos el meta-tag viewport, como en el siguiente ejemplo:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Si os fijáis, este meta-tag define varias cosas, como la anchura máxima (width – recordad que una cosa es hacer scroll vertical, cosa que ocurre muy a menudo en equipos tanto sobremesa como móviles, y otra hacer scroll vertical: queda mucho más “profesional” e integrado en la plataforma el que la web tenga scroll vertical pero carezca de horizontal, probadlo vosotros mismos y veréis como notáis el cambio), la escala inicial (initial-scale), la escala máxima (maximum-scale) y la posibilidad de escalar por parte del usuario (user-scalable).

Cabeceras

Ya llegamos a lo que es el diseño en sí. Este apartado lo completaré en la próxima parte, ya que hay bastantes cosas que explicar y me gustaría dejarles una parte sólo a ellas. Para adentrarnos en el tema de las cabeceras me gustaría proponeros 5 páginas diseñadas para el iPhone como ejemplo de diseños.

Como podéis ver, las 5 páginas se ajustan al tamaño horizontal del iPhone (que no al vertical). Las tres primeras páginas comparten el uso de pestañas, mientras que las dos últimas no hacen uso de ellas. La tercera página junto con la quinta intentan simular el aspecto de una aplicación nativa (usando parte del contenido visible para mostrar una barra de título similar a las de las aplicaciones nativas), mientras que la cuarta página utiliza un diseño más propio, siguiendo las líneas que utiliza el iPhone pero no intentando imitar tanto.

Así que deberemos decantarnos por un tipo de cabecera: con pestañas, simulando un aplicación nativa o que tenga un toque personal. A mí, de las que he visto hasta ahora, la que más me gusta es la de Yahoo. Creo que han dado en el clavo al mezclar un toque personal con el sistema de pestañas y la imitación (en parte) de la barra de título de una aplicación nativa.

Pero bueno, esto es todo por ahora. En la próxima parte me centraré por completo en lograr resultados parecidos a los de los ejemplos, es decir, me centraré en crear una cabecera con pestañas y una que simule la barra de título de una aplicación nativa.

Liberado SMF 2.0 RC3

Beware: This post was published 5 years ago and its content may be outdated.

Desde que se liberó la segunda versión candidata de SMF 2.0, poco se ha oído de este gestor de foros, pero hoy se ha vuelto a hacer oir liberando la tercera versión candidata de SMF 2.0, que viene con casi 350 cambios respecto a la anterior versión candidata. Entre estos destacan:

  • Múltiples arreglos de fallos de seguridad
  • Mejor compatibilidad con idiomas RTL (que se leen de derecha a izquierda)
  • Añadidas cabecezas curvas a diversas tablas que anteriormente no las tenían así
  • Mejoras en los mensajes privados
  • Diversas mejoras al editor WYSIWYG
  • Se ha rediseñado el centro de estadísticas de cada perfil
  • Se ha actualizado la sección de ayuda

Podéis descargar la nueva versión en desde la página de descargas de SMF.

Steam para Mac en abril

Beware: This post was published 5 years ago and its content may be outdated.

Steam próximamente en Mac OS X

¡Menuda sorpresa me he llevado al leer en Applesfera esta noticia! Y es que Steam (la plataforma de venta y gestión de juegos online de Valve) estará disponible para Mac en abril de este año. Pero lo mejor es que todos aquellos que tengamos algún juego en la plataforma para PC, también lo podremos tener para Mac de forma gratuita.

Además, gracias a Steam Cloud, podremos almacenar nuestras partidas en la nube y seguir nuestros progresos independientemente de la plataforma, eso sí, espero que también se guarde una copia local para aquellos momentos en los que no tengamos conexión a Internet.

WP Carousel 0.4.0.10

Beware: This post was published 5 years ago and its content may be outdated.

Este fin de semana he estado trabajando en una actualización de WP Carousel. Esta nueva versión arregla un bug que impedía el correcto funcionamiento del carrusel en Internet Explorer 7 y anteriores (que al final ha resultado ser un error de CSS), además de corregir un fallo en las redirecciones del Panel de Administración.

También añade la posibilidad de limitar el número de artículos que se mostrará en cada categoría, de modo que es posible mostrar 5 artículos de una categoría y 3 de otra. Es recomendable limitar a un número de artículos menor de los que hay en la categoría, ya que si no se pueden producir comportamientos anómalos (añadir artículos de otras categorías para llegar al límite, por ejemplo).

Por último, también permite seleccionar el orden de los artículos: se pueden ordenar de más recientes a más antiguos o al revés.

No es mucha novedad y por eso esta nueva versión sigue siendo de la rama 0.4.0.x.

Podéis actualizar a esta versión desde el Panel de Administración de WordPress o descargando el plugin desde aquí.

Diseñando nuestra web para el iPhone – Parte 1

Beware: This post was published 5 years ago and its content may be outdated.

El iPhone y el iPod Touch disponen de un navegador realmente bueno para tratarse de dispositivos móviles. Mobile Safari muestra las páginas web prácticamente igual que lo haría su versión de escritorio, lo que hace que en muchos casos no sea necesario hacer un diseño específico de nuestra web para estos dispositivos.

Sin embargo, el tamaño de la pantalla del iPhone y del iPod Touch (a partir de ahora hablaremos sólo de iPhone para abreviar) hace que se nos haga incómodo navegar, teniendo que hacer zoom en múltiples ocasiones, lo que entorpece bastante la navegación. Afortunadamente, adaptar nuestra página web al iPhone es una tarea relativamente sencilla y gracias a Mobile Safari podemos lograr hacer que nuestra web tenga el aspecto de una aplicación nativa del iPhone.

Como podréis adivinar por el título, el tutorial está dividido en partes (que iré redactando poco a poco y publicando una vez las haya acabado de escribir). Esta primera parte la dedicaré a explicar cómo preparar nuestro entorno de desarrollo.

Servidor local

Antes de ponernos a diseñar necesitaremos instalar un servidor en nuestro equipo. Hay muchas opciones, sin embargo yo me quedaría con Apache + MySQL + PHP (conocido como WAMP, MAMP o LAMP, dependiendo de si se utiliza Windows, Mac o Linux).

En Windows solía usar WampServer, una aplicación gratuita y fácil de instalar y administrar, y ahora en Mac utilizo la versión gratuita de Mamp. Como hace tiempo que no toco Linux, lo dejaré de lado en este tutorial. De todos modos, más adelante veréis que algunas de las herramientas útiles para comprobar nuestro diseño no están disponibles para Linux (algunas ni siquiera para Windows).

Una vez instalado el servidor, basta con que accedamos a localhost, 127.0.0.1 o nuestra dirección IP. Los tres métodos deberían mostrarnos exactamente lo mismo.

Mobile Safari

Configurando Safari

Configurando Safari

Ya tenemos el servidor local, con lo que podemos trabajar con MySQL y PHP y si nuestro CMS está escrito en PHP, podremos instalarlo en nuestro servidor local y diseñar directamente para él (yo, por ejemplo, suelo diseñar directamente para WordPress). Ahora necesitamos un navegador que funcione de forma similar a Mobile Safari para comprobar nuestro trabajo, y para ello tenemos 3 opciones diferentes.

Si disponemos de un iPhone lo tenemos muy fácil. En la barra de direcciones basta con introducir la IP de nuestro equipo servidor y listo. Recordad que ambos dispositivos deben estar en la misma red.

En caso de que no dispongamos de un iPhone pero sí de un Mac, tenemos la opción de hacernos desarrolladores para el iPhone, con lo cual tendremos acceso al iPhone Simulator, un simulador del iPhone que, adivinad… tiene Mobile Safari, con lo que podremos probar nuestros diseños en una simulación del iPhone. No es una opción demasiado interesante si no somos desarrolladores, pero si ya lo somos, siempre tenemos la posibilidad de usar el simulador para probar páginas web en lugar de aplicaciones.

Por último, tenemos la opción de usar Safari cambiando el agente de usuario por el del iPhone. Esto es algo que se puede hacer también en otros navegadores, sin embargo como Safari y Mobile Safari parten del mismo motor de renderizado, es más conveniente usar estos, ya que así nos aseguramos de que lo que vemos durante las pruebas es lo más parecido al resultado final.

Un diseño sólo para iPhone

Bien, ahora ya podemos comenzar a diseñar para el iPhone y lo primero que deberíamos hacer es asegurarnos de que nuestro diseño especial sólo se use en el iPhone. Para ello recurriremos al tutorial que publiqué la semana pasada sobre cómo detectar navegadores mediante PHP. De momento nuestro diseño podría comenzar así:

function is_browser($name, $version='') {
	$user_agent = $_SERVER['HTTP_USER_AGENT']; // Cargamos el UserAgent en una variable
	$wtr = false; // Esta variable es la que indica si se ha accedido con el navegador que buscamos o no. Por defecto es false, sólo cambia si se accede con el navegador buscado
	$wtmb = ''; // Esta variable almacena el navegador del dispositivo móvil (sólo si buscamos un navegador de dispositivo móvil, esto no incluye ni Android ni iPod ni iPhone)
	// Primero veamos a quién buscamos y luego comprobemos si es él
	switch ($name) {
		// Caso Internet Explorer
		case 'IE':
			if (strrpos($user_agent, "MSIE") === false) {} else {
				if ($version != '') {
					if (strrpos($user_agent, 'MSIE '.$version) === false) {} else { $wtr = true; }
				} else {
					$wtr = true;
				}
			}
			break;
		// Caso Firefox
		case 'FF': if (strrpos($user_agent, "Firefox") === false) {} else { $wtr = true; } break;
		// Caso Opera
		case 'OP': if (strrpos($user_agent, "Opera") === false) {} else { $wtr = true; } break;
		// Caso Konqueror
		case 'KQ': if (strrpos($user_agent, "Konqueror") === false) {} else { $wtr = true; } break;
		// Caso Chrome
		case 'CH': if (strrpos($user_agent, "Chrome") === false) {} else { $wtr = true; } break;
		// Caso Safari
		case 'SF': if (strrpos($user_agent, "Safari") === false) {} else { $wtr = true; } break;
		// Caso iPod
		case 'IPD': if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; } break;
		// Caso iPhone
		case 'IPH': if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; } break;
		// Caso iPod o iPhone
		case 'IPO':
			if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; }
			if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; }
			break;
		// Caso Android
		case 'AD': if (strrpos($user_agent, "Android") === false) {} else { $wtr = true; } break;
		// Caso navegador móvil
		case 'MB':
			$mua = array(
				'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
				'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
				'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
				'Minimo' => 'Minimo',
				'OperaMini' => 'Minimo',
				'AvantGo' => 'AvantGo',
				'Plucker' => 'Plucker',
				'NetFront' => 'NetFront',
				'SonyEricsson' => 'SonyEricsson',
				'Nokia' => 'Nokia',
				'Motorola' => 'mot-',
				'BlackBerry' => 'BlackBerry',
				'WindowsMobile' => 'Windows CE',
				'PPC' => 'PPC',
				'PDA' => 'PDA',
				'Smartphone' => 'Smartphone',
				'Palm' => 'Palm'
			);
			foreach($mua as $nav => $ua){ if(strstr($user_agent, $ua) != false) { $wtmb = $nav; } }
			if ($wtmb != '') { $wtr = true; }
			break;
		// Caso genérico
		default: $wtr = false; break;
	}
	return $wtr;
}
if (is_browser('IPO')) {
/* Diseño especial para el iPhone / iPod Touch */
} else {
/* Diseño general para el resto de navegadores */
}

Y esto es todo de momento.

Más adelante…

En las próximas partes comenzaremos a diseñar para el iPhone. Explicaré desde cómo aprovechar las posibilidades de Mobile Safari para ahorrarnos trabajo (por ejemplo, creando degradados con CSS en lugar de con imágenes) hasta qué medidas usar, cómo detectar rotaciones del dispositivo (si está en vertical u horizontal)… en resumen, cómo simular la interfaz de una aplicación.

Eso sí, habrá unas cuantas partes más. En principio no tengo decidido cuántas habrá en total (ya he comentado al principio que no las tengo escritas), así que podéis pedir en los comentarios que me centre en alguna cosa en especial.

El rediseño de Ubuntu

Beware: This post was published 5 years ago and its content may be outdated.

Vía Genbeta descubro algunas imágenes del rediseño que el equipo de Ubuntu está haciendo para la versión 10.04 Lucid Lynx. Al parecer el rediseño no sólo afectará al ssitema operativo en sí, sino que también viene acompañado de un cambio en el logotipo de Ubuntu, de la página web y del merchandising que acompaña a cada versión.

A continuación tenéis algunas imágenes del nuevo diseño de Ubuntu.

Nuevo logotipo de Ubuntu Nuevo logo de Ubuntu con el fondo naranja Nuevo logo de Xubuntu
Nuevos logos de las comunidades de Ubuntu Nuevo tema "darktheme" de Ubuntu Nuevo tema "lighttheme" de Ubuntu
Nuevo diseño de la página web de Ubuntu Nuevo diseño de la página web de Xubuntu Nuevo diseño de Ubuntu
Nuevas cajas para los CDs Nuevo estilo para el Bloc de Notas de Ubuntu Nuevas camisetas de Ubuntu
Nuevo diseño de Ubuntu Extras de Ubuntu con el nuevo estilo Nueva imagen durante el arranque de Ubuntu

Se puede ejecutar Flash en el iPhone mediante Javascript

Beware: This post was published 5 years ago and its content may be outdated.
Flash en el iPod Touch

Flash en el iPod Touch

Vía Applesfera descubro que es posible ejecutar archivos .swf mediante un runtime Javascript. Esto permite que cualquier navegador que soporte Javascript pueda ejecutar Flash independientemente de si el equipo tiene instalado Flash Player o no. En principio esto parece beneficiar sólo al iPhone / iPod Touch, pero realmente beneficia a cualquier navegador, ya que nos podría evitar tener que instalar Flash Player para poder ver animaciones en Flash.

Podéis ver unas demostraciones del runtime (llamado Gordon) y sus respectivos archivos .swf aquí.