Ulzurrun de Asanza i Sàez

Diseñando nuestra web para el iPhone – Parte 5

Nota: Esta es la quinta 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).

Hasta ahora hemos visto cómo crear cabeceras y pies de página, pero no hemos visto nada del contenido. En esta parte me centraré en imitar las listas que aparecen en diversos lugares de iOS, pero haciendo un par de añadidos.

Lista de contactos en iOS

Lista de artículos imitando la lista de contactos de iOS

 La lista básica tendría el siguiente código HTML:
[html]
<ul class="post-list">
<!– Post 1 –>
<li>
<a href="#">
<span class="post-comments">
<span class="post-comments-number">0</span>
</span>
Nombre del artículo
<span class="post-dates">27 – 6 – 2010</span>
</a></li>
<!– Post 2 –>
<li>
<a href="#">
<span class="post-comments">
<span class="post-comments-number">6</span>
</span>
Nombre del artículo 2
<span class="post-dates">26 – 6 – 2010</span>
</a></li>
<!– Etc –></ul>
[/html]

El código CSS para imitar el resultado de la segunda imagen de la izquierda es el siguiente:

[css]
ul.post-list li a {
min-height:40px;
padding:14px 10px;
font-family:Helvetica;
font-size:20px;
font-weight:bold;
border-bottom:1px solid #D9D9D9;
color:#000;
text-decoration:none;
display:block;
}

ul.post-list li a span.post-comments {
margin:0 0 0 10px;
min-width:18px;
height:28px;

color:#FFF;
text-align:center;
border:2px solid #FFF;
-webkit-box-shadow: 0 0 5px #888;

float:right;
display:block;
-webkit-border-radius:14px;
}

ul.post-list li a span.post-comments span.post-comments-number {
padding:3px 5px;
min-width:18px;
height:22px;

background: -webkit-gradient(linear, left top, left bottom, from(#DE7B7E), to(#CB2A29), color-stop(0.5, #D76368), color-stop(0.5, #CF2A27));
color:#FFF;
text-align:center;

float:right;
display:block;
-webkit-border-radius:14px;
}

ul.post-list li a span.post-dates {
font-size:13px;
font-weight:normal;
color:#666;
display:block;
}
[/css]

 Estilo de una lista en iOSEstilo de una lista con esquinas curvas en iOS

Si analizáis el código veréis que no me he limitado a hacer una copia idéntica de las listas, sino que he modificado el código para (dejando de lado el círculo que indica, por ejemplo, los comentarios) que se ajuste a cualquier longitud del texto y que permita mostrar una pequeña descripción del contenido bajo el título (en la imagen aparece en forma de fecha de publicación).

Por último, tan sólo querría dar algunos consejos a la hora de diseñar una web para el iPhone / iPod Touch:

Y con esto doy por terminado el tutorial de diseño web para el iPhone. Me gustaría unir todas las partes y distribuirlo en formato PDF, pero antes tengo algunas otras cosas a medias, así que eso tendrá que esperar.

Espero que os haya gustado y os sirva para tener algo más en esos momentos en los que nos atascamos durante el diseño de una web.

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

There are no comments yet.

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar