This post was published 13 years ago so it may be outdated.
Google Reader antes de activar el nuevo estilo
Google Reader no destaca precisamente por tener el diseño más bonito del mundo. De hecho no ha recibido ningún rediseño desde hace bastante tiempo, a diferencia de otros servicios de como Calendar o Gmail. Si sois de los que utilizáis Google Reader directamente desde su web, sin recurrir a ninguna aplicación que se sincronice con él, agradeceréis este artículo.
Lo que veis en la imagen de arriba es Google Reader tras activar algo de CSS a través de Stylish. Si no tenéis instalado Stylish, podéis hacerlo en Firefox o Google Chrome (en otros navegadores, como Opera o Safari, hay formas diferentes de aplicar los estilos CSS).
Si ya tenéis instalado Stylish, ahora tendréis que instalar los estilos. Al ser un archivo demasiado grande, el autor (Mestiso) no ha podido insertarlo directamente en userstyles.org, pero comparte el código en su página web. Para instalarlo (a través de Stylish) primero accederemos a userstyles.org y haremos clic en el botón Install with Stylish, a continuación editaremos el estilo y reemplazaremos todo el código por el que nos ofrece su autor en su página web. Para ello, en Firefox, mostraremos el panel lateral de Stylish (Ver » Panel lateral » Stylish) y haremos doble clic sobre el estilo Google Reader – 3 Column Reader. Una vez reemplazado el código haremos clic en Guardar y cuando accedamos de nuevo a Google Reader, veremos un diseño mucho más limpio y elegante.
El único inconveniente es que algunas características dejan de ser accesibles, como los patrones. Sin embargo esta función sigue estando activa. Para poder acceder a ella simplemente desactivaremos temporalmente el nuevo estilo (siguiendo los mismos pasos que antes, sólo que en lugar de hacer doble clic en Google Reader – 3 Column Reader lo haremos sobre el icono con una S que aparece a la izquierda del nombre, que tras el doble clic perderá el color, indicando que el estilo está desactivado).
This post was published 14 years ago so it may be outdated.
Muchas veces se dice que no siempre el camino fácil es el mejor. Esto se puede aplicar a muchas cosas, y el CSS (Cascading Style Sheets) no iba a ser menos. Seguramente si acabáis de entrar en el mundo del diseño web os habréis sentido tentados a usar tablas (<table>) en lugar de capas (<div>) y a usar el atributo style en lugar de archivos CSS. A continuación voy a exponer mis 10 razones por las cuales es mejor usar CSS que no hacerlo. Read more →
This post was published 14 years ago so it may be outdated.
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.
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;
ul.post-list li a span.post-dates {
font-size:13px;
font-weight:normal;
color:#666;
display:block;
}
[/css]
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:
El iPhone y el iPod Touch carecen de ratón, por lo que nuestros dedos son el puntero. Los elementos como los enlaces deben ser lo suficientemente grandes como para que un dedo pueda pulsarlos sin tocar ningún otro elemento.
El scroll vertical no está mal, pero el horizontal es muy molesto. Es recomendable tratar de evitar siempre que se pueda hacer que la página exceda el ancho de la pantalla.
Siempre es más cómodo tenerlo todo en una página que ir saltando de página en página. Siempre que sea posible sería conveniente usar AJAX para dar una sensación de ligereza, rapidez y unidad a la página, para que parezca más una aplicación nativa que una página web.
Aprovechemos el motor Webkit de Mobile Safari y ahorrémonos imágenes: las imágenes requieren más transferencia que algo de código CSS3, así que siempre que sea posible hacer algo con CSS3 y no con imágenes, para el iPhone sería conveniente hacerlo así.
CSS3 es el futuro, no lo olvidemos, así que si es posible usar una propiedad de CSS3 en lugar de un truco al estilo de -webkit-etc, es mejor usar la propiedad de CSS3, así otros navegadores que soporten CSS3 podrán mostrar correctamente la página.
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.
This post was published 14 years ago so it may be outdated.
Antes de nada, disculpad el retraso. Quería haber publicado este artículo anteayer o ayer, pero al final se me fueron juntando cosas y no ha sido posible. Pero como dice el refrán, más vale tarde que nunca, así que vamos allá.
En la keynote del lunes se presentó el nuevo iPhone 4, se dio un repaso al iPhone OS 4, iOS4 a partir de ahora y se mostró por primera vez iMovie para el iPhone. Además durante la sesión de “Safari, Internet adn Web State of the Union” se presentó Safari 5, que ya está disponible para Mac OS X y Windows. Por último, algunas operadoras han confirmado que la exclusividad del iPhone se ha acabado en España. Pero veamos de una en una las novedades.
This post was published 14 years ago so it may be outdated.
Anteayer publicaron en Chromatic pixel unas cuantas capturas del nuevo contenido en pestañas de Firefox 4. La idea básicamente consiste en mostrar ciertos contenidos en pestañas en lugar de en nuevas ventanas, integrándolo todo en la ventana principal del propio navegador, de forma similar a la pestaña de descargas de Chrome. De momento se está trabajando en mostrar el panel de preferencias yel gestor de AddOns en una pestaña. También se han rediseñado los mensajes de error y la página about:config.
This post was published 14 years ago so it may be outdated.
Vía Genbeta descubro que ya está disponible la primera versión estable de Google Chrome para Mac, la versión 5.0.374.55. Esta nueva versión ya tiene un administrador de marcadores bastante decente (la verdad es que me ha parecido más cómodo que el de Firefox), sincronización de los mismos y las preferencias a través de nuestra cuenta de Google y modo pantalla completa.
This post was published 14 years ago so it may be outdated.
Hoy han publicado en Smashing Magazine métodos para aplicar algunas propiedades de CSS3 como opacidad, esquinas redondeadas, sombras y demás en Internet Explorer. El método hace que el código CSS deje de ser válido y cumplir con los estándares, pero al menos se consigue un buen resultado.
A ver si en IE9 se ponen las pilas y nos evitan tener que recurrir a estos trucos.
This post was published 14 years ago so it may be outdated.
El desarrollo de Firefox 4 sigue adelante, y hoy han publicado en Chromatic Pixel más capturas del estado actual de la interfaz de la próxima versión del navegador. Tenéis unas cuantas imágenes a continuación:
Por cierto, revisando el Wiki de Mozilla, he encontrado más imágenes de Firefox 4 sobre Windows que no había visto hasta ahora. Las tenéis a continuación:
This post was published 14 years ago so it may be outdated.
Opera Mini en el iPod touch
Sorprendendido me ha dejado Apple al ver que han aprobado Opera Mini para el iPhone. Apple se ha caracterizado hasta ahora (y supongo que seguirá caracterizándose bastante más) por seguir una política bastante monopolística con la AppStore: no permiten duplicar funcionalidades del iPhone con aplicaciones de terceros. Esto quiere decir que no hay ninguna aplicación que permita llamar por teléfono o gestionar los emails o acceder a Youtube o ver mapas, etc.
Bueno, realmente no es así del todo, ya que hay aplicaciones como Google Earth para el iPhone que duplican la funcionalidad de mapas, pero en fin, se ve por dónde andan los tiros, ¿no? Lo sorprendente del caso es que Opera Mini ha sido aceptado en la AppStore (por cierto, podéis descargarlo aquí), y tiene algunas cosas bien curiosas.
Para comenzar, utiliza su propio motor de renderizado, Presto. Lógico tratándose de Opera (utiliza el mismo motor en su versión de escritorio – bueno, utilizará la versión no adaptada a dispositivos móviles), pero extraño tratándose de Apple. Al fin y al cabo, ¿esto no duplica la funcionalidad de navegar por Internet
El navegador en sí no está mal, aunque puede mejorar mucho. El zoom no funciona todo lo bien que cabría esperar y algunas páginas web se ven de forma incorrecta. A pesar de esto, vale la pena considerarlo, ya que es tremendamente rápido (ir a la página anterior es instantáneo, igual que a la siguiente) y la interfaz está realmente conseguida (la verdad es que a excepción de la barra de título y de direcciones, me gusta mucho más que la de Safari). Tiene algunas funciones útiles como resetear el zoom al pulsar un botón, poder seleccionar el buscador al usar el cuadro de búsqueda junto a la barra de direcciones o poder buscar en la propia página, carencias importantes de la versión de Safari para el iPhone.
Aunque esto tiene un lado malo para los diseñadores: lo que diseñenemos específicamente para el iPhone (saltándonos los estándares web y usando propiedades únicas de WebKit) no funcionará en Opera Mini.
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.
El código HTML que usaríamos para este menú sería el siguiente:
[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));
}
#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]
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”.
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 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]
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”.
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.
