Las nuevas versiones de Safari (3.x) soportan animación por CSS, bajo las propiedades:
- -webkit-transition-property: Qué propiedad vamos a animar (top,left,opacity).
- -webkit-transition-duration: Duración de la transición.
- -webkit-transition-timing-function: La functión de movimiento asociada a la transición (linear, easing, etc).
Los que hayais trabajado con las librerías de efectos Tween de Javascript o Actionscript sabreis que permiten, como esta propuesta de Apple, aplicar comportamientos de animación sencillos. Podeis ver unos ejemplos en este artículo de Surfin’ Safari.
A mi me parece una propuesta equivocada, similar al <marquee> del html viejuno, que más que extender las posibilidades de la CSS, la trasladan a un plano de actuación que no le pertecene. Para el comportamiento de los elementos de un documento tenemos Javascript, esta es mi opinión pero ¿qué pensais vosotros?
Curso de Introducción al Diseño de Webs Eficaces
15 Apr
Posted by elesku as Arquitectura de la Información, Diseño, web
Bueno, hace un tiempo me apunté a un curso online de la Universidad de Murcia, atraido porque uno de los profesores era nada más y nada menos que Yusef Hassan Montero, lo más de lo más en arquitectura de la información y el nombre más repetido en este tema durante la carrera en Documentación. Al principio dudaba un poco del tema, me daba miedo eso de “Introducción”, pero jo, tener la posibilidad de que Yusef Hassan me diera clases, aunque fuera online pienso que hacia que valiese la pena. Además me costó 100€ así que le iba a meter caña, más que nada porque ahora sé lo que cuesta ganarse los dineros como para ir tirándolos así como así.
Lo que tienen los cursos online es que no se pueden medir lo bueno o malo que son porque no cuentas con una docencia presencial y puede ser el mejor curso del mundo pero si no haces nada, no lo vas a aprovechar y al revés, puede tratarse de un curso en el que te dan 4 enlaces de internet, pero si tienes interés puedes aprender muchísimo.
A mi el curso me gusta y como he pagado dinero, pues me he puesto a estudiar un poco, la verdad es que el mundo de las webs en cuanto se pierde de vista al maldito programador y queda la interfaz contra el usuario, la máquina contra el hombre… ¡es que me encanta!
En cuanto al curso, está dividido en tres partes: una introducción al diseño web con estándares, un poco de accesibilidad, usabilidad y SEO y por último, la parte de Hassan, la arquitectura de la información.
La primera parte la vi flojita, en el sentido de que cualquiera que haya hecho una página web ya se sabe todo lo que cuentan. Vamos, que no aprendí nada nuevo, como cuando Marcos se compra un libro en Amazon.
La segunda parte, genial, test heurísticos, test de usuarios, accesibilidad… Vamos, cada dos frases que leía pensaba, esto lo tengo que aplicar a la web de la empresa… Disfruté leyendo y creo que disfrutaré aplicando lo aprendido.
Y la tercera parte, donde estoy ahora, pues eso, es la que esperaba con más ganas y seguro que no me defrauda. De hecho, de mayor quiero ser Arquitecto de la Información y todo esto debe estar grabado en mi mente a fuego.
En el curso también te evalúan. Al final de cada tema tienes que hacer una autoevaluación y luego un trabajo de final de curso en el que puedes desarrollar uno de los temas. Yo me quedo con el tema 2, el de accesibilidad y usabilidad porque creo que es el que más partido le puedo sacar para aplicar en el mundo real (no me dejan en la empresa jugar mucho ni con el diseño ni con la Arquitectura de la información), así que haré un test heurístico de la web de la empresa y veremos a ver cuantos puntos saca.
También hay tutorías y yo, como no, le mandé una al señor Hassan, simplemente para que me comentara cosas, me recomendara bibliografía y tal. Estoy esperando a ver si contesta, espero que no pasen de los alumnos, porque una de las cosas que me gustaría es la posibilidad de debatir, pero el foro es una castaña (no puedes escribir si un profesor no propone un tema y no hay temas propuestos), con lo que me molaría debatir sobre CMS, accesibilidad y usabilidad…
En fin, que en cuanto termine este curso comienza la continuación, el Curso Avanzado de Diseño de Webs Eficaces… me da miedo eso de “Avanzado” :).
Recordaba yo en estos momentos, aquella maravillosa época -ya lejana- de inocencia en la que todo lo que venía en los libros era sagrado o lo que había que poner en el examen. Y heme aquí, un chorro de años despues descubriendo -muy a mi pesar y al de mi bolsillo- que aquellos maravillos libros que me llegaron perfectamente empaquetados de amazon están resultando mucho menos espectaculares de lo que me esperaba (eso sí, en la estantería quedan super molones, y encima están en inglés). Los libros, los voy ojeando poco a poco, pq la verdad, ¿que no vamos a encontrar hoy en internet gracias a San Guguel?.
Hoy le tocaba de nuevo el turno al Bulletproof web desing. Libro que prometía mucho, pero como todo…”prometer hasta meter y luego de metido nada de los prometido”. He abierto un capítulo al azar que me convenciera, y había uno que parecía interesante con el bonito título de Expandable rows, uauuu, ahí es nada.
Me he puesto todo chulo con mi librito a transcribir lineas de código html y css. Rollito escribano. Empezamos por el html
<ul id=”register”>
<li id=”reg”>Not registered? <a href=”/register/” mce_href=”/register/” >Register</a> now!</li>
<li id=”find”><a href=”/find/” mce_href=”/find/” >Find a store</a></li>
</ul>
<div id=”message”>
<p><strong>Special this week:</strong>$2 shipping on all orders! <a href=”/special/” mce_href=”/special/” >LEARN MORE</a></p></div>
y su hojita de estilo
body{ font-family:Arial, Helvetica, sans-serif; font-size:small;}
#register{ float:left; width:100%; background:#bddb62; margin:0; padding:0; list-style:none;}
#reg{ float:left; margin:0; padding:8px 14px;}
#find{ float:right; margin:0; padding:8px 14px;}
#message{ background:#92b91c; clear:both; text-align:center;}
Pues en esas estaba yo, mirando la figure 3.15 de la página 63 del chapter 3, memorizando la bonita imagen cuando, para mi sorpresa me encuentro en IE6 lo siguiente:
y pienso para mis adentros… “marditos rodedore der dichoso interne esplore”, claro, como no cumple los estándares, pues eso será. Así que decido irme a visitar a mi fiel amigo y compañero Firefox, con la esperanza de encontrar luz en aquel pozo de maldad, y este es el resultado:
Total, que despues de mirar y remirar la Figure 3.15 de la página 63 del chapter 3, y leerme y releerme el codigo del libro y el mis páginas, llego a la conclusión de que o hoy no es mi día, o el Dan Cederholm se ha columpiado de lo lindo. En otro momento hubiera peleado por arreglar el código a mi manera, pero ahora no tengo ganas, y ha sido tan grande el fruste que he cerrado el libro y me he puesto a escribir este post.
De nuevo han vuelto a mi historias de piratas y de corsarios, y de tesoros escondidos por los que la gente cruzaba el planeta fiándose de un pergamino arrugado y desdibujado…. ichhh, como para fiarse ahora del papel impreso por la editorial New Riders.
Apatrullando el interné estaba yo, cuando mi amigo Juanki me llamó al teléfono para informarme de su novedosa adquisición: una flamante bici urbana para salir a pasear en familia. El caso es que insitía el chaval en enseñarme la bici y me pasó la url de la marca, que es la siguiente
http://www.trekbikes.com/es/es/bikes/2008/urban/soho/soho40/
y oh, sorpresa, el me hablaba de la bici, y yo flipaba de la lupa y del diseño. Debo reconocer que me encantó. Aunque lo de la lupa va genial, en algunas etiquetas, el CSS no lo aplica bien en Firefox, pero bueno, yo, les perdono.
Prometo investigar el codigito famoso.
Vaya, tengo una duda. Resulta que tengo un CSS enmarañado, pero vamos, que ni Marcos puede meterle mano sin perderse (tested). Además ahora tengo unos subdominios y he tenido que clonar los css (cosas de Drupal que un día de estos entraré, pero que viene a cuento de mi post anterior), así que obviamente, tengo cosas que me sobran en todos los css y me gustaría limpiarlo. Hace tiempo leyendo Ovillo hablaron de herramientas que te ayudaban a encontrar el código css que no se utilizaba.
Las dudas:
¿Os habéis encontrado con este problema antes?
¿Cómo habéis hecho para resolverlo?
Quizá lo bueno de trabajar en una empresa como webmaster es resolver esas cosas que piden, tan rebuscadas que te preguntas cómo han hecho para llegar a pensar que algo así sería posible de hacer. Muchas veces pienso que la gente ajena a este mundo de programación cree que esto se hace mágicamente y que la labor del programador sólo consiste en sentarse delante del ordenador y como si fuera un microondas, esperar a que un pitido avise de que ya está hecha la web.
Pues en una de esas me he metido y después de terminar de importar la página web principal a Drupal, ahora me toca empezar a desarrollar los sub-sites de la empresa, cosa que yo creo que, después de ingeniármelas para estructurar la web principal es lo más difícil que me han pedido.
Y eso que la web principal ya tenía lo suyo: menús desplegables con elementos y descendientes, multilenguaje, adaptarse y ajustarse a un estilo ya creado anteriormente… Se puede decir que fueron dos meses de planificaciones y de pruebas hasta empezar a rellenar la web con contenido.
Lo malo es que, aunque lo intentes, no siempre se tiene una previsión de todo lo que pueda pasar en la vida de esa web, y aunque sabía que Drupal tenía soporte para múltiples sitios con una sola instalación, no sabía como se adaptaría a las necesidades que me solicitaran.
Y es que, si en una sola instancia de Drupal quieres meter muchas webs independientes, es lo más sencillo del mundo, simplemente creas una nueva base de datos y copias el directorio sites/default a /sites/nuevaweb, editas el settings.php con los datos de la base de datos y arrancas el script install.php y alehop, nueva web al canto (configuraciones de DNS, Apache y demás aparte). Pero si lo que quieres es compartir usuarios, contenido, etc., la cosa se complica bastante.
Así que durante toda la semana me he metido en un sinfín de lecturas tratando de documentarme acerca de todo esto, y venga a mirar y mirar. Mi primera prueba ha sido intentarlo con ayuda de los Views de Mysql5, pero no me daba un control individual a cada subsite creado. No podía modificar el título o cosas similares y no explicaba como hacer para conseguirlo.
La segunda de mis opciones fue crear una web independiente, cosa de lo más sencilla del mundo, como he explicado antes, en seguida creé una base de datos, el directorio correspondiente, el settings.php, el virtualhost de apache y el dns y en apenas unos minutos, tenía la web, con su propio panel de administración y todo, pero entonces tenía que duplicar el contenido que se repite y si se cambia en un sitio, tendría que cambiarlo a mano en los demás, así que deseché la idea.
Y por fin parece que he encontrado la solución, con ayuda de un módulo. Al principio probé el multisite manager, pero no me convenció el rato que lo estuve probando y entonces apareció entre tanta documentación que me estaba leyendo el módulo domain access y con él he conseguido lo que me hacía falta y simplemente he creado un theme para cada subdominio (para poder ajustar los bloques y el personalizar el aspecto) y el resto me ha parecido intuitivo, fácil y me facilita la tarea cada vez que me pidan crear un subdominio nuevo. Es difícil que me solucione todo lo que necesito, pero por lo menos por ahora lo está haciendo. Puedo crear contenido independiente o compartido por varios subdominios, manteniendo el multilenguaje y con una administración sencilla. Y es que Drupal es mucho Drupal.
Es un truco viejo pero que hasta hace poco no empecé a aplicar en mis proeyctos. Se trata de un fix para ahorrarse el <div style=”clear:both” />
La típica situación donde tenemos que usar un clear es cuando queremos posicionar un elemento debajo de uno o varios elementos posicionados con float. En la situación normal pondríamos el clear como siguiente elemento en el html, en plan.
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”clear:both”></div>
<p>Contenido que va debajo del grupo de divs anteriores</p>
Contenido que va debajo del grupo de divs anteriores
Con el clearfix, en cambio, tenemos que añadirle la clase .clearfix al último div de nuestro grupo posicionado en float.
<div style=”float:left”>Contenido alineado a la izq</div>
<div style=”float:left” >Contenido alineado a la izq</div>
<div style=”float:left” class=”clearfix” >Contenido alineado a la izq</div>
<p>Contenido que va debajo del grupo de divs anteriores</p>
Y esta es la clase en particular que nos ayuda a conseguir este efecto.
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Resumiendo su funcionamiento: esta clase genera un elemento block sin visibilidad justo después del clearfix y a éste elemento le coloca el clear:both por nosotros.
Ya, pero ¿y si mi navegador del pasado no acepta el selector :after?
Suponiendo que estés hablando del ie6, tiene un corportamiento ajeno a las especificaciones en lo referente al modelo de caja y el flujo de float. Si un elemento contenedor tiene un height definido pero su contenido es mayor, el contenedor se ajusta a su contenido (y de paso revienta el flujo de float). Así el height:1% se asegura que en ie6 tengamos el mismo comportamiento.
Bueno, lo teneis explicado como toca en positioniseverything y por cierto, ya nadie usa ie Mac, así que podeis quitar el hack, que siempre queda feo.
Pues eso, que comienzo a hartarme de tener que poner cada vez que termino un div que es float la famosa cadenita de texto
<div style=”clear:both;”></div>.
Y no puedo más. Pero por más que miro, no termino de encontrar una solución que me convenza.
He intentado cosas ya de las que ni me acuerdo, porque, despues de cada intento, venían momentos de frustración y de ralentización del trabajo, y al final acababas cargando de nuevo la page de clears.
Por ejemplo. Tengo una default.asp de la ultima web que tiene… a ver que cuente, un segundo… cinco. Pff, creo que se me ha ido la mano y ha llegado el momento de controlar esto antes de que derive en una clearitis crónica.
Divitis: Enfermedad desconocida hasta los primeros años del siglo XXI. Suele presentarse en aquellos sujetos que deciden iniciarse en el mundo del CSS por su cuenta y riesgo. Dificil de curar, aun no existe vacuna efectiva, y suele asociarse a síntomas de la ideatrofia. Se piensa que es una evolución genética del virus de las Tables into Tables, región del html primigenio, caracterizado por el uso y abuso del pixeltrans.gif.
Sus síntomas son: Su principal síntoma es una concepción de cualquier elemento que pongas en tu página como un div, todo es div. Cualquier cosa que pongas.
Evolución de la enfermedad: Luego se asocia con un uso mayoritario de ID para identificar cualquier div. En una misma página te puedes encontrar 20 div id=lista. Posteriormente, el sujeto involucrado en la enfermedad decide reducir el uso de id’s y opta por los class. Aunque la mejora es notable, poco a poco la páginas se van llevando de class innecesarios y volvemos a recaer en la enfermedad, aunque muchos especialistas han optado por denominarla classitis, no terminan de ponerse de acuerdo sobre cual es el siguiente estadio de la enfermedad.
Ejemplo claro y sencillo de la enfermedad:
<div id=”centro”>
<div class=”lista”>
<ul>
<li>hola</li>
<li>hola</li>
</ul>
</div>
</div>
¿hace falta ese div=lista cuando podríamos poner <ul class=”lista”>??
Estaba yo pensando sobre que escribir hace un rato y, maldiciendo al IE6 con Rob a traves del mesenger me ha recordado una de las maravillosas cualidades del IE6 y es la de interpretar los PNG a su antojo.
Pero todo esto viene de atrás. Hace unos meses, comencé a utilizar los PNG (lo siento, uno es fan de los GIF), y todo iba bien hasta que testee la web en mi IE6 (navegador que me niego a desinstalar de mi ordenador mientras las cosas vayan como van) y un sudor frio recorrió todo mi cuerpo. Me di cuenta que todos esos bonitos PNG que me había currado, de los cuales ni de coña conservaba el original, resulta que en Firefox se veían bien, pero en el IE6 se veían como Bill Gates quería (algún problema con la gama cromática Bill??). Bueno, llegado a este extremo, descubro que existen varias soluciones planteadas por ahí, como encontré en el siempre recomendable anieto.
Bien, soluciones hay, pero para mi no dejan de ser más hacks que tenemos que meterles a nuestros estilos para que el dichoso navegador funciones como toca, ¿y que quereis que os diga?, el que suscribe odia los hacks, no me gustan, los veo código sucio del que no te puedes fiar, prefiero currar a pelo, y si de momento no podemos usar PNG, bueno, pues seguiré usando GIF’s con los que bien contento he estado durante este tiempo.
Os pongo unas capturas de pantalla para que veais como interpreta el IE6 un PNG con un fondo #666666;.
