Currently browsing: Windows

Diseñando nuestra web para el iPhone – Parte 1

Beware: This post was published 6 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.

A partir de la semana que viene, veremos la "Ballot Screen"

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

Vía Genbeta descubro que a partir de la semana que viene, Microsoft publicará una actualización que reemplazará el acceso a Internet Explorer por un acceso a la “Ballot Screen”, una ventana que muestra una lista de alternativas a Internet Explorer, y que permite obtener más información o descargar otros navegadores.

Inicialmente, se implantará en Reino Unido, Bélgica y Francia, y más adelante (en Marzo), en el resto de los paises de la Unión Europea.

¿Y cómo nos afectará esto? Pues la verdad es que no lo tengo demasiado claro.

Los usuarios sin conocimientos sobre navegadores se sorprenderán al ver desaparecer su iconito de “Internet” y que aparezca una lista extraña que no comprenden. Seguramente muchos harán clic en el icono de Google Chrome, porque relacionarán Google con Internet, el resultado sería menos cuota de mercado para IE y más para Chrome, lo cual nos beneficia a los diseñadores, ya que Chrome sigue bastante mejor los estándares que IE (aunque lo cierto es que no es incómodo hacer que un diseño se vea bien en IE, es incómodo hacer que se vea bien en IE6 o anterior).

Los usuarios con algo más de conocimientos seguramente elegirán Internet Explorer, ya que recordarán que el acceso antes tenía ese nombre.

Por último, los usuarios que ya conocían las alternativas a Internet Explorer no notarán ninguna diferencia: si conocían las alternativas y seguían con IE, seguirán con IE y si usaban un navegador diferente, probablemente ni siquiera vean la “Ballot Screen”.

Sobre el resto de navegadores de la lista, tengo la impresión de que no aumentarán mucho su cuota por la “Ballot Screen” (aunque pueden aumentarla por otras cosas). Los 6 primeros navegadores serán los que más aumenten (siendo el primero en ganar, Chrome) y los otros, al estar ocultos al principio (hay que hacer scroll para poder verlos), serán generalmente ignorados.

Aunque, ¿quién sabe? Tal vez me equivoque y el resultado sea muy diferente…

Próximamente… WordPress para Nokia

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

Vía AyudaWordPress descubro que hay una versión de WordPress para Nokia en los planes del equipo de desarrollo (como ya hay una versión de WordPress para iPhone, para Android y para Blackberry). Según el anuncio oficial, en unas semanas veremos una versión beta de WordPress para Nokia.

Parece que los desarrolladores de WordPress se están tomando muy en serio las aplicaciones para los móviles. Sería interesante ver la cantidad de artículos escritos desde móviles para hacerse una idea de la necesidad de estas aplicaciones, porque, para ser sincero, todo lo que he escrito en Sumolari.com lo he escrito desde un ordenador de sobremesa o portátil (nunca desde un móvil o un iPod).

Opera 10.5 Beta

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

Opera 10.5 Beta

Los desarrolladores de Opera no han descansado después de liberar la versión preAlpha de Opera 10.5 y ayer mismo liberaron la versión Beta de Opera 10.5, que apuesta por una integración total en Windows 7, un nuevo motor de Javascript (Carakan) 8 veces más rápido que su antecesor y una interfaz más reducida.

También ha mejorado en otros aspectos, como las ventanas modales, que ahora son independientes en cada pestaña y no bloquean el resto del navegador (como ocurre en Firefox, Safari o Internet Explorer).

De momento sólo hay versión para Windows, que podéis descargar desde aquí, pero seguramente de aquí a unos días estará disponible la versión para Mac OS X.

Ocultando artículos y categorías del loop de WordPress

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

Nota: Para entender este tutorial son necesarios unos conocimientos básicos de PHP (sobretodo de matrices) y de WordPress (para saber las IDs del contenido y el lugar donde poner el código).

Hay veces en las que queremos ocultar ciertos artículos o categorías del loop de WordPress (el bucle principal que se encarga de mostrar el contenido de la página). En estos casos podemos recurrir a diversos métodos, como comprobar dentro del propio bucle si el artículo está en cierta categoría o tiene una ID determinada. Sin embargo, estos métodos no se pueden aplicar a plugins porque estos no pueden modificar código del bucle, así que debemos buscar un método diferente.

Mostrando $wp_query

Mostrando $wp_query

Durante el desarrollo de la versión 0.4 de WP Carousel me topé con este problema, y decidido a superarlo, tomé la vía probablemente más radical: modificar la variable $wp_query. Esta variable almacena toda la información referente a las consultas a la Base de Datos, incluyendo el contenido consultado, los filtros aplicados, el orden. De hecho, si imprimimos esta variable, obtendremos un resultado enorme, que podéis ver en parte en la imagen de la izquierda.

Alterando el contenido de esta variable se pueden hacer multitud de cosas, sin embargo nos centraremos en ocultar contenido del bucle.

Si nos fijamos en la variable, veremos que es una matriz. Los índices que nos interesan son los siguientes: category__not_in, tag__not_in y post__not_in. Son unos índices con unos nombres realmente descriptivos, ¿verdad? El primero nos permite eliminar categorías del bucle, el segundo nos permite eliminar etiquetas y el último nos permite eliminar artículos individuales.

El contenido de estos índices debe ser una matriz, la cual almacenará en todos los casos las IDs del contenido a ocultar. Veamos de forma práctica cómo ocultaríamos las categorías 3, 19 y 62 del bucle:

$wp_query->query_vars['category__not_in'] = array(3, 19, 62);
$wp_query->query($wp_query->query_vars);

La primera línea está clara, pero, ¿y la segunda? Se trata de una llamada a la función query(), que vuelve a realizar la consulta y elimina el contenido previamente guardado. Antes he comentado que esta variable almacena resultados de las consultas, así que es necesario limpiar la variable de resultados antiguos y rellenarla de nuevos, de otro modo no siempre funcionaría el código.

Este código no funciona en cualquier lugar de WordPress. Si pensamos con un poco de lógica, llegaremos a la conclusión de que debemos poner el código antes del bucle (porque si lo ponemos después, ya se habrá mostrado el contenido y no habrá nada que filtrar). Pero, ¿en qué lugar añadirlo? Bien, realmente se puede añadir en cualquier lugar antes del bucle. En el archivo functions.php del theme, en un plugin por separado (como ocurre con WP Carousel) o incluso justo antes del bucle. Eso sí, dependiendo de en qué lugar ponemos el código, la segunda línea (que actualiza los resultados) será necesaria u opcional. Por comodidad, podéis dejarla siempre, aumentará el número de consultas a la Base de Datos, pero cómo se hará uso de esta función en determinadas ocasiones, no es demasiado preocupante.

Pasemos a otro ejemplo: ocultemos los artículos con la etiqueta con ID 54.

$wp_query->query_vars['tag__not_in'] = array(54);
$wp_query->query($wp_query->query_vars);

Otro ejemplo bastante claro. Por último sólo nos quedaría ocultar artículos. Estoy seguro de que ya adivináis cómo se ocultarían los artículos con IDs 1, 7 y 42:

$wp_query->query_vars['post__not_in'] = array(1, 7, 42);
$wp_query->query($wp_query->query_vars);

Realmente no tiene mucha complicación, pero antes de acabar el tutorial debeís tener en cuenta un par de cosas:

  1. La variable $wp_query almacena contenido importante, y es recomendable hacer una copia de la variable para poder restaurarla más adelante, algo como:
    $wp_query_old = $wp_query;

    Así en caso de detectar un error en las modificaciones realizadas a la matriz, el script puede recuperar el contenido original.

  2. Modificar la consulta en ciertas páginas puede dañar el resultado, sobretodo cuando se visualiza una página individual o un artículo en solitario. Es recomendable modificar la matriz sólo cuando estamos en el index del blog (donde nos interesa ocultar o mostrar artículos).
  3. Este método sólo es adecuado para plugins. Si quisiéramos modificar nuestro theme, tenemos a nuestra disposición métodos aún más fáciles y menos intrusivos que éste.
  4. ¡No ocultemos contenido sin avisar antes al usuario! Todos estos cambios son invisibles para el usuario medio, y más de uno se llevaría una desagradable sorpresa al ver desaparecer sus artículos misteriosamente del índice de su blog.

Dicho esto, ahora es cosa vuestra experimentar. Tenéis más información sobre los índices que podéis modificar en esta página (aunque habla de una función diferente, muchos de los parámetros son equivalentes a los índices de la matriz).

Si tenéis problemas o dudas, preguntad en los comentarios.

Ya está disponible Firefox 3.6

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

Firefox 3.6

Ya se puede descargar tanto para Windows como Mac y Linux la versión 3.6 de Firefox, que, entre otras cosas, es un 20% más rápida que la versión 3.5, implementa las últimas especificaciones HTML5, admite audio y vídeo en formatos abiertos y en pantalla completa e incluye “Personas” por defecto.

Se puede descargar la versión 3.6 desde la página de Mozilla o ver las novedades en el comunidado de prensa.

Grave vulnerabilidad en las versiones posteriores a Windows NT

Beware: This post was published 6 years ago and its content may be outdated.
Editor de directivas

Editor de directivas

Vía Genbeta descubro una muy grave vulnerabilidad de Windows NT (y versiones posteriores, como Windows XP, Vista y 7) que afecta a las ediciones para procesadores de 32 bits. La vulnerabilidad se debe a un fallo de diseño del soporte de aplicaciones de 16 bits, que permite ejecutar código con permisos de sistema (por encima de los permisos de administrador).

La vulnerabilidad fue detectada y reportada a Microsoft en junio de 2009 por Tavis Ormandy. Microsoft confirmó la vulnerabilidad, y aún no han liberado ningún parche que solucione este error, lo que ha hecho que Ormandy liberara la información respecto a la vulnerabilidad.

Para aquellos usuarios que no utilicen aplicaciones de 16 bits, puede evitarse esta vulnerabilidad deshabilitando el soporte para aplicaciones de 16 bits. La opción en cuestión se halla en el Editor de directivas (accesible desde ejecutar -> gpedit.msc), en Configuración de equipo -> Plantillas administrativas -> Compatibilidad de aplicación.

Ejecuta aplicaciones de Windows en Mac OS X

Beware: This post was published 6 years ago and its content may be outdated.
Ejecutando Regedit.exe con Wine en mi Mac

Ejecutando Regedit.exe

Ejecutar programas de Windows en distribuciones de Linux era posible desde hace bastante tiempo gracias a Wine (Wine Is Not an Emulator), pero lo que yo no sabía (no sé si vosotros estaríais enterados) es que también podemos usar Wine en Mac OS X, eso sí, con la limitación de que sólo funciona en Macs con procesadores Intel (todos aquellos fabricados a partir del 2005).

Para los que no sepáis que es Wine, se trata de una reimplantación de la API de Win16 y Win32 para Sistemas Operativos basados en Unix, es decir, que permite la ejecución de programas para MS-DOS, Windows 3.11, 95, 98, ME, NT, 2000, XP, Vista y 7. Al ser una reimplantación de la API y no una emulación, no tenemos que instalar ni emular Windows, lo cual además de ser un ahorro económico, nos da un mayor rendimiento (comparado con el de la emulación) y una mayor comodidad al no tener que reiniciar el equipo ni cambiar de Sistema Operativo (comparado con el de la instalación en otra partición).

El proceso de instalación de Wine en Mac OS X es idéntico al de cualquier otra aplicación: Arrastrar el programa a la carpeta de aplicaciones, y el funcionamiento es muy similar al que recuerdo que tenía en Linux.

Wine para Mac está en formato Beta y se puede descargar desde esta página, que además incluye WineBottler (no sé si la versión para Linux lo incluye, hace tiempo que estoy algo desconectado del mundo de las distribuciones de Linux y sus aplicaciones), una aplicación que (por lo que me ha parecido entender) a partir de un ejecutable de Windows (.exe) se crea una aplicación para Mac OS X (en formato .app), con el cual puedes ejecutar la aplicación sin necesidad de usar Wine.

De este modo los usuarios de Mac podemos acceder a la mayoría del software creado para Windows sin necesidad de instalar Windows en nuestros Mac o utilizar un PC, aunque sinceramente, no he echado de menos en Mac ninguna aplicación que usaba antes en Windows, quizá los juegos, aunque para eso sigo teniendo el PC 🙂 .

Transforma el aspecto de Firefox 3.5 en el de Firefox 4

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

Aspecto de Firefox 4.0 (izquierda) vs Aspecto de Firefox 3.5 (derecha)Ya hemos visto algunos indicios de lo que podía ser la interfaz de Firefox 4, y no era de esperar que al poco tiempo apareciesen themes que imitasen esta interfaz. Sin embargo el theme del que voy a hablar a continuación no imita los últimos mockups de la interfaz de Firefox 4, sino que imita los anteriores (acordáos de que cuando comenté las imágenes de la posible nueva interfaz, éstas eran sólo de Windows, mientras que había unas anteriores donde también se veía la interfaz de Mac y de Linux, el theme en cuestión imita estas imágenes) y lo cierto es que lo consiguiesen hacer realmente bien e increíblemente fácil. Realmente dotar a nuestro Firefox 3.5 de la interfaz de Firefox 4 sólo consiste en instalar un theme y un par de extensiones, además de configurarlas.

Lamentablemente este theme no está disponible ni para Linux ni para Mac, así que tendremos que esperarnos al lanzamiento de Firefox 4 para disfrutar de este theme. Para aquellos que usen Windows, el proceso es bastante sencillo. Comenzaremos instalando Strata40 (el theme principal), seguido de StrataBuddy (el cual habilita transparencias y permite elegir entre el aspecto de Firefox 3.7 o Firefox 4), Tab Progress Bar y Fission (para añadir esa barra de carga a la barra de direcciones) y por último Omnibar (para unificar la caja de búsquedas con la de direcciones).

Al acabar de instala estos complementes puede que el aspecto de Firefox no se parezca mucho al de Firefox 4, sin embargo aún tenemos que configurar los complementos. Abrimos la ventana de complementos y seleccionamos StrataBuddy. A continuación le damos a opciones, lo cual hará que taparezca una ventana con opciones diversas. Para comenzar iremos a la pestaña de Strata y seleccionaremos, en Style, 4.0 y en Background style, Aero Glass. A continuación pasaremos a la pestaña de Tabs, donde cambiaremos la opción de Tab style a Tabs on top. Finalmente en la pestaña de Misc, marcaremos sólo las opciones de Progress lines y Remove ‘List all tabs’ button.

Y ya lo tenemos, ahora nuestro Firefox será idéntico al de la imagen.

Aspecto de Firefox 3.5 (izquierda) y Aspecto de Firefox 4 (derecha)