A la hora de incluir cualquier tipografía en un sitio web moderno, podemos utilizar @font-face. Pero depende el navegador, (el karma de todos los diseñadores web se mantiene inpune) podemos tener problemas a la hora de usar una fuente determinada.
http://convertfonts.com/font-face.php
Buscando una solución al respecto, encontré este sitio en el cual podemos subir nuestra fuente preferida en TTF y nos genera un .zip con todo lo necesario para usar dicha fuente en una web. Excelente.
En algún momento Youtube fue la revolución. La posibilidad de subir o ver videos por Internet entusiasmó a músicos, documentalistas, usuarios caseros que podían mostrar sus videos, políticos que encontraban nuevas vías de comunicación, movimientos sociales que podían contar sus experiencias, artistas que podían llevar su arte a la web sin intermediarios, por poner algunos ejemplos. Y también a miles de usuarios que podían encontrar prácticamente todo lo que buscaran. Youtube no es el único sitio que permite subir videos, pero con el apoyo que le brinda ser parte de Google se convirtió en el más usado.
Pero este formato tiene límites y la imaginación, no. ¿Por qué resignarse a ver videos de la misma manera que en la TV, encerrado en un cuadrado? ¿Por qué quedar cautivos de un recurso privativo como el Flash?
Sobre este segundo punto van a hacer hincapié los promotores del software libre y quienes trabajan por una web más inclusiva para quienes tienen algún tipo de disminución visual. ¿Por qué? Porque tiene un formato privativo (es decir que no se conoce su código ni se puede modificar), porque tiene muchos “busgs” o errores y porque impide la accesibilidad, ya que aquellos programas que leen en la web y, por ejemplo, traducen a un ciego no saben qué hacer frente un archivo flash salvo decir “esto es una película”.
Todo esto fue planteado por Guillermo Movia (“hack”) y Felipe Lerena (“hacker”) de la Fundación Mozilla en el Hack/Hackers BA Media Party que se realizó el fin de semana en el Centro Cultural Konex, quienes además mostraron que es lo que se viene en la materia. Lerena lo sintetizo en la frase “sacar el video de la página y poner la página en el video”.
Lo que está permitiendo pensar y avanzar hacia una nueva integración entre video y web es la aparición del HTML5 que permite agregar interactividad al video, que ya no tiene que “cargarse” sino que está integrado al código y por lo tanto puede “codearse” (neologismo usado por quienes manejan códigos).
¿Para qué nos puede servir esto a quienes tenemos más conocimiento en cómo generar contenidos que en escribir “códigos”? Para pensar en nuevas maneras de comunicación más interactivas, en formas de presentar las noticias más dinámicas, en la posibilidad de nuevas estrategias educativas.
¿Cómo? Agregando “meta información” a los videos tal cuál hoy conocemos. Esto permitiría por ejemplo que cuando alguien hable se agregue un subtítulo, se habrá un globito como los de las historietas con lo que está pensando, o que si nombra una ciudad aparezca un Google Maps que nos permita ubicarla en un mapa, si menciona un personaje histórico se abra una ventana con su biografía en Wikipedia, si habla de un músico se abra otro video de dicho intérprete o una galería de fotos de la banda en Flickr, si nombra a un periodista aparezca su usuario de twitter o su cuenta de Facebook. Y así muchas cosas más.
Esa información, al no estar en el video sino en la web, se actualiza automáticamente cuando la fuente se actualiza (por ejemplo cambios en una biografía) por lo que no hay que modificar nada.
Cuesta imaginarlo sin verlo. Por eso podemos recomendar que visiten el proyecto que Chrome realizó con la banda canadiense Arcade Fire experimentando con esta nueva tecnología para su tema “We use to wait”:http://www.
Allí podrás soñar con que estás corriendo por la ciudad en la que naciste utilizando Google Maps, sonidos y herramientas de dibujo mientras escuchás el tema que ganó en la categoría “Cyber” del Festival de Internacional de Publicidad de Cannes. Se recomienda usar el navegador Crhome o Firefox, ya que no se llevan bien con Explorer o Safari.
Empezar a trabajar en proyectos de este tipo no requiere demasiados conocimientos, salvo un poco de HTML. En el taller del Hacks Hackers se presentó Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5 y para quienes no saben de programación Popcorn Maker, una herramienta desarrollada por Mozilla que está en fase de prueba pero ya se puede usar entrando en http://maker.
Este plugin está pensado para ir publicando en tiempo real la cobertura de un evento. Permite marcar un determinado post como «LiveBlog» e ir actualizando el mismo directamente desde el front-end.
Excelente herramienta para la gente que se dedica a PRENSA.
LINK : http://wordpress.org/extend/plugins/liveblog
Desde ahora podemos llamar muchos más colores por nombres, para tener nuestros «preferidos» a mano y no andar lidiando con hexadecimales.
Les dejo la lista completa en meyerweb.com/eric/css/colors
Cuando validamos un formulario usando JQUERY y el plugin VALIDATE quizás necesitemos que el botón de ENVIAR esté desactivado hasta que el formulario esté completo y valide correctamente. Lo podemos lograr con el siguiente script:
<script type="text/javascript">
$('#formulario').bind('change keyup', function() {
if($(this).validate().checkForm()) {
$('#boton_enviar').attr('disabled', false);
} else {
$('#boton_enviar').attr('disabled', true);
} });
</script>
Recuerden reemplazar #formulario por la ID de su formulario y #boton_enviar por la ID de su botón.
Hoy, trabajando con formularios, se me presentó la siguiente duda:
¿Qué será mejor para el usuario a la hora de avisar que determinador campos de un formulario son obligatorios?
¿ un asterisco al lado de cada campo, y luego una leyenda? ¿aclarar diréctamente que el campo es obligatorio?
Investigando sobre usabilidad de formularios, encontré esto:
«Diferenciar, en los formularios, los campos opcionales de los obligatorios, sin hacer pensar al usuario.»
Digo, no está mal el asterisco, es una solución bien formal al problema de los campos requeridos. Pero decirle directamente al usuario «este campo es requerido, llenalo.» sea aún más usable, amable y claro.
Lo sé, la diferencia es mínima.
y los sitios grandes que usan? veamos:
Facebook: Nada. Avisa al enviar el formulario.
Google: Lo mismo. Avisa solo al enviar el formulario.
Twitter: nada. acompaña al usuario en cada paso del formulario usando foco. avisa si algo anda mal al enviar.
Taringa: igual que Twitter.
Sorprendente hallazgo. Ninguno de estos cuatro gigantes de la web avisa, ni con asteriscos ni con palabras, qué campos son obligatorios. Imagino que por una simple razón: TODOS los campos que obligan a llenar son obligatorios, porque no tiene sentido ofrecer campos no obligatorios. Llenar formularios es fastidioso, cuanto menos molestar al usuario, mejor.
Google pone a disposición un muy selecto y completo repositorio de fuentes con licencias libres: Google Web Fonts, listo para ser utilizado por desarrolladores web.
+1 para Google.
La nueva versión de GIMP, la 2.8, estará disponible a fin de año.
Peeero mientras, podemos instalar la 2.7.2 que trae tres de las mejoras más esperadas:
– Carpetas para agrupar capas. SI !!!! por fin.
– Todo en una sola ventana!!! siiiiiiiiiiiiiiiiiii por fin.
– Cuando insertamos texto, lo hacemos sobre la imágen, ya no se abre un pop-up aparte. Un golazo.
Cómo instalarlo ?
sudo add-apt-repository ppa:matthaeus123/mrw-gimp-svn
sudo apt-get update && sudo apt-get install gimp
Si al iniciar tira error, ejecutar:
sudo apt-get install libgegl-0.0-0
Para pasarlo al modo «mono ventana», abris el GIMP y vas a Ventanas > Single Window-Mode
Se aprobó la ley de accesibilidad de la información en las páginas web.
«ARTÍCULO 1º.- El Estado nacional, entiéndanse los tres poderes que
lo constituyen, sus organismos descentralizados o autárquicos, los entes
públicos no estatales, las empresas del Estado y las empresas privadas
concesionarias de servicios públicos, empresas prestadoras o contratistas de
bienes y servicios, deberán respetar en los diseños de sus páginas Web las
normas y requisitos sobre accesibilidad de la información que faciliten el
acceso a sus contenidos, a todas las personas con discapacidad con el objeto
de garantizarles la igualdad real de oportunidades y trato, evitando así
todo tipo de discriminación.»
Después de un tiempito sin postear, les traigo algo muy útil (para el bolsillo del diseñador y la cartera de la diseñadora), se trata de un sitio que nos genera código CSS para darle esquinas redondeadas a DIVs y formularios.
http://a.deveria.com/roundgen/
Para los que quieren una solución más rápida, simplemente agreguen estos estilos al elemento a redondear:
background-color: #AAF; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: url(data:image/svg+xml;charset=utf-8; base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My 5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkY iIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48c mVjdCBmaWxsPSIjQUFGIiByeD0iMTAiIHdpZHRoPSI xMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);