Comunidad de diseño web y desarrollo en internet online

Estilo iPhone para las carpetas de Apache

¿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 :D

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 :P

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate