Categoría: diseño web

Jornadas del Sur

Jornadas del Sur es un evento que incluye, principalmente, una serie de charlas brindadas por oradores de varias provincias del país y cuya temática ronda en torno a la filosofía del cooperativismo, el trabajo colaborativo y la acción solidaria, entre otras.

Simultáneamente se dictan diversos cursos a cargo de personas altamente capacitadas en su correspondiente área, presenciales, con material y certificados.

Todo esto se encuentra enmarcado dentro de las tecnologías de la información porque es allí donde nace el movimiento de la filosofía del software libre, que luego daría origen y se extendería hacia el arte, la literatura, y las demás manifestaciones culturales del ser humano.

banner_450_300b

¡miren quien está anunciado ;) !
Si todo sale bien, voy a presentar mi charla sobre herramientas libres para desarollo y diseño web.

charladwsl

HTML 5 : video y audio nativo

Por fin una buena noticia. Parece que la nueva versión de HTML, la 5, incluye un par de etiquetas que van a facilitar muchísimo la inclusión de video y audio en forma nativa en los sitios web, de la misma forma que hoy incluimos una imagen solo con una etiqueta <img>.

Las etiquetas serían <video> y <audio>. El formato libre utilizado se llama {es:OGG}, y esa  {es:extension de archivo} se usa tanto para audio como para video, es una tecnología diseñada para dar un alto grado de eficiencia en el «streaming» y la compresión de archivos.

ogg

Con esta novedad, ya no hará falta andar instalando «plugins» en el navegador para poder ver los sitios con contenido multimedia. La próxima versión del navegador Firefox (la 3.5 ) ya tendrá soporte para esto, al igual que Opera y Chrome.

Esto puede ser el comienzo del  final del formato cerrado {es:SWF} de Adobe, ya que como la companía no quiere liberarlo, no puede ser estandarizado.

Una de las espectativas más grandes es si  Google migrará Youtube a HTML5 + OGG, abandonando la actual implementación en flash.
Si esto sucede, las cosas van a cambiar bastante en el mundo web ¿no te parece?

CSS: Maquetado y pie

A pedido de un colega va este requete-mini-tuto de como hacer que el DIV de pie de página quede en donde debe (al fondo del contenedor).

Supongamos una estructura semántica como la siguiente:

<body>
<div id=»contenedor»>
<div id=»encabezado»></div>
<div id=»contenido»>Contenido de la página</div>
<div id=»pie»>Copyleft 2009</div>
</div>
</body>

Bueno, los estilos para cada parte quedarían así:

html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
#contenedor {
width: 100%;
height: 100%;
background: #DDD;
position: relative;
}
#encabezado {
width: 100%;
background: #CCC;
position: absolute;
top:0;
height:130px;
}
#contenido {
width: 100%;
overflow: auto;
position: absolute;
top: 130px;
bottom: 40px;
}
#pie {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 40px;
}

CSS: centrar un DIV

Con esta técnica podremos centrar un DIV de tamaño fijo tanto vertical como horizontalmente, y que se vea bien como mínimo en Firefox e IE7.

#div_a_centrar {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
margin-top: -100px; // la mitad del height
width: 300px;
margin-left: -150px; // la mitad del width
}
Para entender mejor como funciona esto, podemos ver en el siguiente
cuadro explicativo:
css_center

La librería OverLib

ejemplo_overlib

Un excelente recurso web.  Se trata de una librería JS que nos permite mostrar «pops» o
«globitos» al pasar sobre hipervínculos. En su sitio web podemos ver como funciona
con varios ejemplos. Además, se puede customizar los colores e inclusive modificar
el estilo del popup.

Para instalarla, tenemos que seguir estos pasos:

1- Copiamos la librería a nuestra carpeta JS en la raíz del sitio. Si no tenés una, creala.

2- Agrego una línea en el <head> para linkear a la librería (no te olvides de modificar la ruta):

<script type=»text/javascript» src=»js/overlib.js»><!– overLIB (c) Erik Bosrup –></script>
3-Inmediatamente despues de la apertura de la etiqueta <body> insertamos esta línea:
<div id=»overDiv» style=»position:absolute; visibility:hidden; z-index:1000;»></div>
con esto definimos una DIV que ocupará todo el sitio y estará por
encima de cualquier otro elemento.

4-Finalmente, modificamos los links en los que queremos que aparezca el globo para
que queden de esta manera:
<a href=»javascript:void(0);» onmouseover=»return overlib(‘Esto es gracias a OverLib.’);»
onmouseout=»return nd();»>LINK</a>

Generador de Favicons

favicon_generator_title

Cuando estamos diseñando un sitio siempre surge la necesidad de crear un lindo favicon . Para hacer esta tarea más fácil existe este sitio que nos permite crear nuestro favicon rápidamente a partir de una imagen.
Para agregar el favicon a tu sitio solamente debes agregar la siguiente línea entre las etiquetas <head> del mismo, modificando el atributo ‘href’ con la ruta donde se encuentra el archivo.

<head>
 <link rel='shortcut icon' href='favicon.ico' />
</head>

Generador de Favicons