¿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)
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
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