Demo CSS3/HTML5 en #TechDaysChile
En una palabra: WOW. El lunes tuve oportunidad de viajar a Chile para participar de la tercer edición del TechDays, un evento organizado por Microsoft para la comunidad técnica (cerca de 3000 asistentes!), donde se pudo ver absolutamente de todo: Excelentes presentaciones de nuestros productos ‘técnicos’, así como excelentes stands de XBox, Kinect y Windows Phone, con la participación de Nokia, oradores de Estados Unidos, México,Colombia, Uruguay, Argentina, Chile… AMAZING! Felicitaciones para todo el equipo de Microsoft Chile, quedé realmente sorprendido con la organización y el entusiasmo de todos!
En un momento me llamó la atención la cantidad de gente reunida en el stand de Internet Explorer:
Pero después entendí que habían muchos fans (notar cómo tengo códigos, e hice blur de la cara del amigo posando):
Respecto a mi participación, tuve oportunidad de presentar junto a Gonzalo Perez y Ruben Mugartegui (a.k.a. TechDaysMan – fantástica la participación de Rubén con 6 sesiones!) sobre HTML5, Internet Explorer 9 y 10. Dejé colgado en Skydrive los slides que usamos por la mañana. Todas las sesiones fueron “streameadas(?)” (perdón Seara!) en vivo en el sitio de TechDays.cl.
Jugando con CSS3
Durante el keynote, Eduardo me invitó a presentar sobre HTML5 e IE10. Una de mis demos, se trató sobre cómo se puede aplicar transformaciones y rotaciones en CSS3, para que un listado de texto, se convierta en el logo del evento:
Les comparto el código para quienes quieran mirarlo de cerca. El “truco” de las barras horizontales y diagonal, está hecho a partir de aplicar estilos a los espacios definidos al final de cada palabra:
ul li:nth-child(3) span
{
-ms-transform-origin: 0% 0%;
-ms-transform: rotate(45deg);
top: -20px;
left: -45px;
width: 70px;
height: 5px;
}
Cada ítem de la lista termina con un <span> que contiene un espacio en blanco al cual se le aplica el estilo. En el ejemplo también se puede ver cómo utilizar los selectores nuevos de CSS3, para obtener el item ‘n’ de la lista.
Las transformaciones y animaciones aún están en estado draft, por lo cual verán que estoy usando el prefijo –ms-. Para que las demos funcionen en Firefox, Safari y Opera, pueden utilizar los prefijos –moz-, –webkit- y –o-.
Por último, les comparto la información del Diplomado de HTML5 que se está organizando desde México… una excelente oportunidad para aprender del tema… for free!!!
Espero les sirva!
Comments
Anonymous
November 23, 2011
amigo Miguel... Es taaan fácil escribir "difundidas"... :) ABRAZO!!Anonymous
November 24, 2011
Genial el codigo gracias ^^