Diseñando nuestra web para el iPhone

Diseñando nuestra web para el iPhone – Parte 4

April 2, 2010

This post was published 14 years ago so it may be outdated.

Nota: Esta es la cuarta parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).

En la parte anterior expliqué cómo crear cabeceras, pues bien, en esta parte me centraré en los pies de página. Utilizaré las mismas páginas para mostrar distintos tipos de pies de página. Podemos ver a la izquierda como Coosh trata de imitar la barra inferior de algunas aplicaciones nativas del iPhone (ver imagen de la derecha). Mientras, tanto Google como Yahoo muestran un pie de página algo “dejado caer”, es decir, sin estar demasiado adaptado al estilo del iPhone, así que en lugar de explicar cómo diseñar un pie de página así (algo realmente fácil), explicaré como diseñar un pie de página que siga las líneas de la cabecera del Yahoo (que expliqué como crear en la parte anterior).

Así que comenzaremos por imitar la interfaz del iPhone y después veremos cómo adaptar el estilo de la caebcera al pie.

Creando un pie de página que imite el de una aplicación nativa

En las dos imágenes anteriores podéis ver cómo es el menú inferior de algunas aplicaciones nativas del iPhone. No todas las aplicaciones muestran un menú así, pero sí algunas importantes. Básicamente este menú consiste en un fondo con un degradado de colores oscuros y diversos iconos distribuidos a lo largo del mismo.

Yo no voy a diseñar iconos para el menú en este tutorial, así que me limitaré a usar imágenes con un fondo distinto para que resalten un poco. Sobre la altura del menú, son 47px de alto más el borde superior (de un color gris más claro) que añade 1px, haciendo un total de 48px.

Resultado de imitar la interfaz de una aplicación nativa del iPhone

El código HTML que usaríamos para este menú sería el siguiente:

[html]
<div id="footer">

<ul>
<li class="icon-circle selected"><a href="#">Categorías</a></li>
<li class="icon-circle"><a href="#">Páginas</a></li>
<li class="icon-circle"><a href="#">Etiquetas</a></li>
<li class="icon-circle"><a href="#">Búsquedas</a></li>
</ul>

</div>
[/html]

Y el CSS sería el que tenéis a continuación:

[css]body, div, h1, ul { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#footer {
margin:312px 0 0 0; /* Para ajustarlo al final de la página, como en mi demostración no hay más contenido, esta línea es necesaria para posicionar el pie de página en el final de la página, así que si añadís contenido, eliminad esta línea */
border-top:1px solid #434343;
height:47px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#2E2E2E), to(#000), color-stop(0.5, #151515), color-stop(0.5, #000));
}

#footer ul {
width:100%;
height:100%;
list-style:none;
text-align:center;
}

#footer ul li {
margin:1px 5px;
padding:0 5px;
height:45px;
font-family:Helvetica;
float:left;
font-size:11px;
}

#footer ul li.icon-circle { background:url(circle-iphone.png) top center no-repeat; }

#footer ul li.icon-circle a {
height:12px;
display:block;
text-decoration:none;
color:#969696;
padding:33px 2px 0 2px;
}

#footer ul li.icon-circle.selected a {
color:#FFF;
background:url(circle-iphone-selected.png) top center no-repeat;
}

#footer ul li.icon-circle.selected {
-webkit-border-radius:5px;
background:-webkit-gradient(linear, left top, left bottom, fr om(#494949), to(#252525), color-stop(0.5, #353535), color-stop(0.5, #252525));
}[/css]

Nota: Debido a un problema con WordPress, he tenido que modificar el código CSS para guardar el artículo. En algunas líneas veréis que pone “fr om”, pues bien, debería ir junto, sin el espacio entre “fr” y “om”.

Adaptando la cabecera para el pié de página

Hagamos memoria de la cabecera que habíamos diseñado basándonos en la de Yahoo.

El código HTML era el siguiente:
[html]
<div id="header">
<div id="logo_container">
<!– Aquí estará el logo –>
<h1>Miweb.com</h1>
</div>
<div id="menu_container">
<!– Aquí estarán las pestañas –>
<ul id="menu">
<li class="selected"><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Páginas</a></li>
</ul>
</div>
<div id="subheader">
<!– Aquí estará el buscador –>
</div>
</div>

[/html]

Y su CSS era:

[css]
body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#header {
width:100%;
height:150px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#logo_container {
width:100%;
height:50px;
}

#logo_container h1 {
padding:8px;
font-family:Helvetica;
font-size:30px;
color:#FFF;
}

#menu_container {
width:100%;
height:50px;
}

#menu {
width:100%;
height:50px;
padding:0;
margin:0;
list-style:none;
}

#menu li {
height:38px;
margin:2px 5px 0 5px;
padding:5px;
float:left;
}

#menu li a {
height:28px;
padding:5px;
font-family:Helvetica;
font-size:20px;
color:#FFF;
text-decoration:none;
font-weight:bold;
display:block;
}

#menu li.selected {
background: -webkit-gradient(linear, left top, left bottom, fr om(#FFF), to(#FEFEFE));
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
}

#menu li.selected a {
color:#000;
}

#subheader {
width:100%;
height:50px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
border-bottom:1px solid #666;
}

[/css]

Adaptar la cabecera al pie de página es un proceso bastante sencillo. Tan sólo deberíamos retirar el logotipo e invertir las posiciones del menú y el contenido inferior: ahora la parte gris debería estar en la zona superior y el menú inferior, adaptado a su vez las esquinas curvas de los enlaces y el degradado.

Estos cambios ser verían reflejados en el código HTML y en el CSS. El HTML pasará a ser así:
[html]<div id="footer">
<div id="prefooter">
<!– Aquí estará el buscador –>
</div>
<div id="footer_menu_container">
<!– Aquí estarán las pestañas –>
<ul id="footer_menu">
<li class="selected"><a href="#">Inicio</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Páginas</a></li>
</ul>
</div>
</div>[/html]

Y el CSS, así:[css]body, div, h1 { /* Reseteamos algunos estilos para que se ajuste correctamente el contenido */
margin:0;
padding:0;
}

#footer {
margin:256px 0 0 0;
width:100%;
height:100px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#75B856), to(#4C7A06));
}

#footer_menu_container {
width:100%;
height:50px;
}

#footer_menu {
width:100%;
height:50px;
padding:0;
margin:0;
list-style:none;
}

#footer_menu li {
height:38px;
margin:-1px 5px 2px 5px;
padding:5px;
float:left;
}

#footer_menu li a {
height:28px;
padding:5px;
font-family:Helvetica;
font-size:20px;
color:#FFF;
text-decoration:none;
font-weight:bold;
display:block;
}

#footer_menu li.selected {
background: -webkit-gradient(linear, left top, left bottom, fr om(#C0C0C0), to(#999));
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}

#footer_menu li.selected a {
color:#000;
}

#prefooter {
width:100%;
height:50px;
background: -webkit-gradient(linear, left top, left bottom, fr om(#FEFEFE), to(#C0C0C0));
border-bottom:1px solid #666;
}
[/css]

Y esto es todo de momento. Tan sólo me gustaría hacer un apunte: los links que pongamos en el pie de página no tienen por qué ser los mismos que pondríamos en la versión completa de la web. Me explico, generalmente se pone en el pie de página un enlace a la parte superior de la web, sin embargo, pulsando la barra de título de Mobile Safari ya nos lleva a la parte superior, con lo cual no es necesario añadir este enlace en nuestro pie de página.

No replies on “Diseñando nuestra web para el iPhone – Parte 4”

There are no comments yet.

Ulzurrun de Asanza i Sàez

Diseñando nuestra web para el iPhone – Parte 4

Creando un pie de página que imite el de una aplicación nativa

Adaptando la cabecera para el pié de página

No replies on “Diseñando nuestra web para el iPhone – Parte 4”

Leave a Reply Cancel reply