Vía Cinefagos

Vía El Boomeran Videos

Vía El Boomeran Videos

Via Shortoftheweek.com

Su música no deja mucho espacio para comentarios:

Un poco de reminiscencias en la cercanía del final de este año, falta un día y medio para la llegada del año nuevo pero eso pasará rápido.

Es impresionante como las imágenes por si solas pueden hacerse camino en la nostalgia llevándote con su estela a recuerdos tan intensos, la verdad no administro muy bien las abstracciones temporales ni los géneros cuando la música me trastoca.

Ahora en una sola jornada de música, Natalie Cole, Michael Jackson, Lionel Richie, Kelly Clarkson, Caetano Beloso, Norah Jones, Tom Jobim, Blondie, Phil Collins, Alan Parsons Project, Scorpions y AC/DC me han mantenido en una escalera rusa de ideas y sentimientos.

Eso de los cuadritos con la imagen del cantante en uWall me atrapó muy rápido, en mi adolescencia (osea hace fuuu ) solía revisar detalladamente las tapas de cartón de los discos de acetato mientras escuchaba el contenido, era como un plus encontrar detalles que te anclaban mas con el gusto por tal o cual grupo.

La memoria fotográfica es el mejor canal de ventas, estoy convencido, ahora se hace marketing en la red, antes era en la tv, pero si lo vemos con cuidado la técnica guarda muchas similitudes, todo entra por los ojos, el volumen es lo que ha cambiado, muchas mas opciones de una sola vez o en un lapso muy corto, el escuchar un CD nuevo y mirar su caja mientras lo hacías tenía su encanto y su valor, te imaginabas el interprete mientras disfrutabas de la melodía, en otros casos mas afortunados recordabas el concierto al que habías asistido, ahora tienes el concierto ahí mismo después de dar clic en el cuadrito, no es la misma calidad que la música en vivo y en ocasiones ni siquiera que la del CD, sin embargo en mi caso el melómano exigente se va de paseo con el video o las imágenes que acompañan lo que oyes.

Paradójicamente, ya no escuchas música ahora VES música y ves lo que quieres oír después, el nexo a la satisfacción es mas cercano cada vez, no es extraño que nos volvamos más exigentes en cuanto a nuestras necesidades en la red y claro nos frustremos mas fácil, pero bueno, este no es el caso, me ha parecido una interesante aplicación échenle un vistazo.

uWall.tv

Habíamos visto en el primer artículo acerca de los atajos CSS un ejemplo clásico de ellos y una bastante larga explicación,

A continuación puedes ver los atajos CSS mas utilizados en una serie de ejemplos para un clase llamada “cabecera”

Para la etiqueta Font:

CSS largo:

.cabecera{

font-weight: bold;

font-family: verdana, sans-serif;

font-size: 11px; line-height: 16px;

}

Atajo:

.cabecera{

font: bold 11px/16px verdana, sans-serif;

}

Para la etiqueta Margin:

CSS largo:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:0;

margin-left:1px;

}

Atajo1:

.cabecera{

margin: 2px 1px 0 1px;

}

CSS largo2:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:0;

margin-left:1px;

}

Atajo2, se aplica cuando las cifras primera y tercera o segunda y cuarta son iguales:

.cabecera{

margin: 2px 1px 0;

}

CSS largo3:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:2px;

margin-left:1px;

}

Atajo3, se aplica cuando las cifras está repetidas por pares:

.cabecera{

margin:2px 1px;

}

CSS largo4:

.cabecera{

margin-top:1px;

margin-right:1px;

margin-bottom:1px;

margin-left:1px;

}

Atajo4, se aplica cuando las 4 cifras son iguales:

.cabecera{

margin:1px;

}

Nota: este atajo funciona exactamente igual para la etiqueta Padding

Para los bordes:

CSS largo:

.cabecera{

border-top-width: 2px;

border-top-style: dashed;

border-top-color: #f00;

}

Atajo:

.cabecera{

border-top: 2px dashed #f00;

}

Nota: Para aplicar el estilo en todos los bordes se usaría:

.cabecera{

border: 2px dashed #f00;

}

Para el atributo Background:

CSS largo:

.cabecera{

background-color: #fff;

background: url(“test.gif”);

background-repeat: repeat-x;

}

Atajo:

.cabecera{

background: #fff url(“test.gif”) repeat-x;

}

Para las listas UL

CSS largo:

.cabecera{

list-style: #fff;

list-style-type: disc;

list-style-position: outside;

list-style-image: url(image.gif)

}

Atajo:

.cabecera{

list-style: disc outside url(image.gif)

}

Para los colores:

CSS largo:

.cabecera{

color:#cccccc;

}

y

.cabecera{

color:#ff6600;

}

Atajo:

.cabecera{

color:#ccc;

}

y

.cabecera{

color:#f60;

}

Nota: Los colores básicos también se pueden definir con los nombres en inglés, white,red, blue, black, etc..

.cabecera{

color:red;

}

Para cifras con valor 0:

CSS largo:

0px;

Atajo:

0;

Nota: las medidas en pixeles, em y pt no necesitan el descriptor del tipo de unidad en valores iguales a 0

Bien este es un rápido resumen de algunos atajos CSS, espero que te sean útiles, hasta el próximo post,

@Jotace

Como puedes usarlos para ahorrar líneas de código

CSS simple:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

CSS con atajos:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}

Al crear una hoja de estilos para alguno de nuestros proyectos generalmente escribes el código lo más rápido posible, esto trae en ocasiones un resultado de una hoja muy extensa y desordenada.

Si acostumbras usar editores de código con intellisense tienes la gran ventaja de que el programa te muestra las opciones de cada atributo mientras escribes pero eso no hace mas que agravar el problema.

Conforme tu desarrollo lo requiera la hoja de estilo va creciendo y puedes necesitar echar mano de una buena organización y los atajos CSS para no elevar el tamaño de la misma.

Una buena organización te puede ayudar para que una declaración bien estructurada te permita crear el código más compacto y evitar la redundancia, veamos unos cuantos ejemplos al respecto.

Esta es una declaración típica al inicio de una hoja de estilos:

body{
margin:0;
padding:0;
}

Si tu declaración va a ser similar para otras etiquetas o clases, una manera de limitar el número de líneas de la declaración puedes ser hacer algo como esto:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
}

Y en el ejemplo ahorrarás tantas líneas de código como nombres de etiquetas o clases separes con comas.

Siempre tendrás casos especiales en los que una o varias etiquetas requieren declaraciones diferentes y no las puedes juntar en un solo grupo, en ese caso tu creatividad te servirá para hacer una escritura mas ligera, por ejemplo:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

Si únicamente las etiquetas span y div requieren un tamaño de letra mas pequeño, una solución podría ser eliminarlas del bloque inicial y copiar todo el bloque nuevamente para las dos etiquetas cambiando únicamente el tamaño de fuente, así:

body, p, h1, li, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

span, div{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:12px;
font-style:normal;
line-height:18px;
}

Otra solución sería tratarlo de esta manera:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-style:normal;
line-height:18px;
}

body, p, h1, li, .claseX, .claseY, .claseZ{
font-size:14px;
}

span, div{
font-size:12px;
}

Sin embargo si aplicas el criterio de cascada, puedes generar el código de esta manera ahorrando un par de líneas en el proceso:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

span, div{
font-size:12px;
}

Las etiquetas span y div están duplicadas pues hay 2 declaraciones para ellas pero como sabes, en CSS la última declaración es la que cuenta.

Hasta aquí nada especial solo el buen criterio de agrupación y orden para armar un código mas corto.

Pero y este es el punto importante de este post, existen en el lenguaje de hojas de estilo, los llamados “atajos CSS” (shortcuts) que permiten usar técnicas de escritura corta para algunas declaraciones en particular, veamos una comparación del uso de CSS con y sin shortcuts.

CSS simple:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

CSS con shortcuts:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}

La técnica muestra claramente un código más ligero y coherente,

En la siguiente entrega podrás conocer las declaraciones que aceptan shortcuts y cómo usarlos en cada caso particular.

La tecnología al alcance de una charla, esa es la premisa del Barcamp Quito 2010, que se realiza este Sábado 20 de Marzo de 2010 en los auditorios de la Torre 1 de la PUCE (Pontificia Universidad Católica del Ecuador) a partir de la 9:00 horas, organizado por la comunidad Iguana Valley este evento aglutina un buen número de “desconferencistas” cuyo propósito será atender la avidez de conocimientos de varios grupos de asistentes, desde los que quieren acercarse a la tecnología hasta los que dominan ciertos conceptos y quieren expandir aun más sus fronteras sociales y cibernéticas.

Todos están invitados, la entrada es libre, el Barcamp Quito 2010 dura todo el día y estará dividido en dos jornadas: de 9h00 a 12h30 y de 14h00 a 17h00, habrá una pausa de hora y media para comer.

En cada una de las 4 salas disponibles se celebrarán 13 desconferencias 7 en la mañana y  6 en la tarde, para un total aproximado de 40 conferencias, la duración de cada una de ellas será de 20 minutos, 15 minutos de exposición, más 5 minutos para preguntas.

Los auditorios están divididos de la siguiente manera en función de las charlas que se impartirán en cada uno:

• Iniciación digital: especialmente preparado para ayudar y dar soporte a los que comienzan con la experiencia digital 2.0
• Vida digital: pensado para atender a usuarios de redes sociales con interés en expandir sus maneras de comunicación
• Programación y desarrollo: Para los que dominan un tópico pero quieren estar al tanto de las últimas novedades
• Videoconferencias: Interesantes charlas desde fuera de nuestro país con invitados de la talla de Benito Castro, Francesc Grau, Andrés Castelblanco y Rubén Romero.

Estas videoconferencias y sus importantes actores de la red fueron contactados mediante la gestión de la comunidad Iguana Valley.

Además en el evento puedes conocer a varios de los invitados especiales, para saber quienes son ellos y conocer todos  los temas de las desconferencias por favor visita el blog del evento.

El Barcamp Quito 2010 está auspiciado por numerosos e importantes patrocinadores.

Así que estás a tiempo, siguelo en Facebook y en Twitter y Regístrate para confirmar tu asistencia y ser parte de esta enriquecedora experiencia.

En Quito siempre encontrarás un lugar para la tecnología, acércate a la comunidad Iguana Valley nos vemos allá, yo voy al Barcamp.

Esto se logra gracias a la implementación del soporte para el protocolo oEmbed en esta versión, esta caracteristica hace que el código requerido para incrustar el video sea capturado directamente del lugar de origen y sea añadido de forma automática al contenido de cualquier entrada sin intervención del editor del articulo.

En este enlace se puede ver la referencia en inglés de oEmbed y alguna explicación de como conseguir la implementación de oEmbed en sitios que no lo soporten actualmente.

Aqui una muestra del uso de esta característica mediante copiar y pegar el URL del video en este artículo, de esta manera:

http://www.youtube.com/watch?v=LvjjREMGOEo

Es un tema de Black Eyed Peas para el que se hizo un flashmob

Muy util para los fanaticos a la inserción de videos.