¿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.
Cuando lo pruebes deberías de poder ver tus carpetas
tus archivos
y Safari se encargará de que cargar los vídeos con Quicktime
Como agregaste un ícono puedes añadir un acceso directo
Archivos Adjuntos
_estilo.zip (17.7kb)
De verdad que cambia mucho la manera de interactuar con los archivos
Felicidades por esto
Por plb el 22 de Julio de 2010
Yo tengo un modem-router ADSL2+ con wifi, mediante el cual tanto mi PC como mi IPhne se conectan perfectamente a internet. La dirección de mi IPhone es en general 192.168.1.3 otorgada por el router.
Pero no puedo acceder a mi PC (192.168.1.2) desde el IPhone porque me dice que el servidor "No responde", no obstante si accedo a 192.168.1.1 que la página de administración del router.
Cualquier sugerencia será muy bienvenida.
Gracias.
Pedro
Por Luzalcuadrado el 14 de Agosto de 2010