Estás en: Cristalab > Tips > Estilo iPhone para las carpetas de Apache

Estilo iPhone para las carpetas de Apache

Por: diciembre7

17 de Febrero del 2009

362 de clabLevel
Otros artículos de diciembre7

2,183 visitas

html apache iphone

¿De qué va?

La idea es modificar el estilo de las carpetas del servidor web, Apache, para hacerlo compatible con iPhone y iPod Touch.

Eso de qué sirve te preguntarás. Digamos que eso sirve para poder navegar en los archivos de tu servidor desde el iPhone, y por supuesto, cuando digo archivos incluyo vídeos

Pasarás de esto

a esto

Ingredientes

1 servidor con Apache instalado
1 editor de texto
1 icono PNG 57x57px (archivo adjunto)
Framework iUI. Lo modifique para "optimizarlo" así que puedes usar el adjunto para ahorrar tiempo.

Tener nociones básicas de HTML, de Apache y de qué es un iPhone también ayuda

Preparación

En mi caso, Apache funciona desde mi laptop para compartir los vídeos que tengo allí (MP4), a través de XAMPP. Tú puedes usar tu servidor web o bajar XAMPP.

Crea una carpeta "_estilo" (o como quieras llamarla) en el servidor, allí guardaras todos los archivos de estilo. En esa misma carpeta debes de crear dos archivos header.shtml y footer.html.

header.shtml

En este archivo usaremos una cabecera normal de XHTML

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Usamos la metatag viewport para indicarle a Safari la escala que usa la página. Generalmente es 1 y esa escala usaremos.

Código :

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

Incluímos el título que es el nombre de la carpeta

Código :

<title><!--#echo var="REQUEST_URI" --></title>

también incluímos la URL del ícono (PNG, 57x57px) que debe usar el iPhone cuando lo guardamos en los accesos directos:

Código :

<link rel="apple-touch-icon" href="/_estilo/icono.png"/>

luego la hoja de estilo de iUI para obtener el estilo del iPhone. Esta la guardaremos en la carpeta iUI dentro de la carpeta "_estilo":

Código :

<style type="text/css" media="screen">@import "/_estilo/iui/iui.css";</style>
</head>

Para terminar agregamos la parte del body, que muestra el titulo de la carpeta. Es importante conservar el mismo nombre de clases(atributos class) y jerarquía de las etiquetas para que la hoja de estilos de iUI sea válida.

Código :

<body>
<div class="toolbar">
<h1 id="pageTitle"><!--#echo var="REQUEST_URI" --></h1>
</div>

El código completo queda así

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=0.5; maximum-scale=1.0; user-scalable=1;"/>
<title><!--#echo var="REQUEST_URI" --></title>
<link rel="apple-touch-icon" href="/_estilo/icono.png"/>
<style type="text/css" media="screen">@import "/_estilo/iui/iui.css";</style>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"><!--#echo var="REQUEST_URI" --></h1>
<a id="backButton" class="button" href="#"></a>
</div>

footer.html

Este archivo solo lo usamos para cerrar las etiquetas HTML, el código es bastante simple:

Código :

</body>
</html>

Sube la carpeta iUI, junto al ícono, a la carpeta de "_estilo" en el root de tu servidor. Deberías de obtener algo como esto:

(Si cambias de lugar la carpeta debes de cambiar las URLs en header.shtml y en el .htaccess)

Con lo anterior tienes todo el estilo listo para usarse, ahora debes de decidir en qué carpeta aplicar el estilo e incluír la configuración en el .htaccess. A menos que estes muy familiarizado con Apache no te recomiendo modificar el código, mejor lo copias y lo pegas

Código :

IndexOptions SuppressHTMLPreamble FoldersFirst SuppressRules SuppressLastModified SuppressDescription NameWidth=*
HeaderName /_estilo/header.shtml
ReadmeName /_estilo/footer.html

En resumen ese código le dice que archivos usar como cabecera y footer, y qué información mostrar y cual no. Como es una pantalla pequeña se ocultan la mayoría de opciones para dejar sólo el nombre del archivo. Guarda los cambios y listo, ya puedes navegar tus archivos desde el iPhone.