Extensión de Desarrollo para Firefox
Guía ActionScript
Antonio subió a esta direccion una guia para el curso, contiene basicamente los temas vistos hasta ahora en clases. Contiene archivos .Fla con todo el ActionScript
comentado y explicado paso a paso.
Evaluación HTML 1, Fondos 2
Hoy hicimos una corrección de todos los trabajos “5 bandas/películas favoritas” en HTML. En general hay buen uso de etiquetas y atributos. Las principales deficiencias fueron:
- Omisión de meta “description” en el HEAD:
<meta name="description" content="La descripción corta de mi página" /> - Etiquetas mal cerradas o sin cerrar
- Poco aprovechamiento de HTML para dar valor al contenido
Los que quieran mejorar sus ejercicios, no se olviden subirlos a su FTP y poner el link como comentarios de este artículo, por lo menos antes del Miércoles próximo (al menos).
Además, continuamos explorando las posibilidades del atributo background para posicionar imágenes vía CSS.
#mi .selector {
background-image:url( la/imagen.gif );
background-position: left top;
background-repeat: no-repeat;
}
Los archivos usados en esta clase estan en los archivos del curso.
Documentación HTML y CSS (express)
Documentación HTML y CSS hay mucha en la web, pero encontré este link que hace el proceso de búsqueda mucho más expedito (siempre quise usar la palabra “expedito”).
Es como para tener esa página abierta mientras se trabaja.
Les dejo el link: GotApi.
RSS
En la clase de hoy hablamos de RSS (Rich Site Summary), qué es, para qué sirve y cómo se usa. Para saber más pueden leer este artículo en EstadoBeta (y los links relacionados).
Actualmente, muchos sitios proveen canales RSS como alternativa a su versión HTML. Entre ellos podemos mencionar a Reuters.com, Google News, BBC, The New York Times y los diarios online de Emol (sin contar los cientos de miles de blogs!).
Aquí van más links a cosas que vimos en clases:
- Bloglines
- Agregador de RSS gratuito basado en Web. No hay que instalar nada.
- Rezzibo
- Otro agregador basado en web, made in Chile
- Google Reader
- Otro agregador online, de Google
- Mozilla Thunderbird
- Agregador de RSS y lector de emails de escritorio. grátis para MAc y PC
- NetNewsWire
- Buen agregador RSS de escritorio, pagado, para Mac (US$30)
- NewsMap
- Interfaz alternativa para los canales (feeds) RSS de Google News
Css e imágenes 1
La clase pasada (26 de Abril) vimos cómo usar imágenes de fondo en CSS utilizando los atributos background-image, background-repeat y background-position, así:
#mi-div {
background-image: url(img/fondo.jpg);
background-position: left top;
background-repeat: repeat-x;
}
También vimos la versión reducida de lo mismo:
#mi-div {
background: url(img/fondo.jpg) left top repeat-x;
}
El ZIP con los archivos para esa clase está en eCampus.
Editores de código
Como los Desarrolladores Web 4×4 no usan Dreamweaver, aquí les dejo un par de editores recomendados para Mac o PC. La verdad hay muchos pero no los he probado todos, así que dejo los que conozco. Indico los que no son grátis.
PC
- Notepad++
No es muy bonito, pero le lleva colores de sintaxis, auto-indentado y otras gracias. Muy liviano y grátis como el aire. - Aptana.
Grátis. No lo he probado pero se ve muy bien. - Notepad 2
También se ve sencillo, con todo lo necesario, y grátis.
MAC
- TextMate
Muy simple, rápido y fácil de usar. Colores de sintaxis, auto-indentado y, lo mejor de todo, vista del arbol de directorios.
USD39, pero en mi humilde opinión valen la pena. - TextWrangler
No es lo mejor, pero sirve. Es el que usamos en clases y es grátis. - BBEdit
El hermano mayor (y pagado) de TextWrangler. - Smultron
Grátis y bueno.
Si tienen más para sugerir, agreguenlos en los comentarios.
Columnas 2
En la clase de hoy seguimos desarrollando un layout a dos columnas usando el atributo “float”.
#mi_columna {
float:left;
}
Además vimos el uso de la clase clearfix para corregir un error común en el uso de “float”.
El zip con los archivos lo encuentran en la carpeta “clases”, en los archivos del curso en eCampus.
Revisen el código del ejemplo, acumulen dudas y preguntas.
Próxima clase: manejo de imágenes en CSS, sobre el layout que ya tenemos. Trabajaremos sobre un PSD que usaremos de modelo para replicar con CSS.
Lectura sugerida (me permito linkear a mi propio sitio, por comodidad 
):
- Columnas CSS: Floats (EstadoBeta).
- CSS: dónde van las imágenes? (EstadoBeta).
Recuerden dejar sus preguntas en los comentarios.
Columnas 1
En esta clase hicimos una introducción a la diagramación con CSS.
Contenidos
Links relacionados
En este artículo explico cómo usar DIVs junto con al atributo float para diagramar columnas.
Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran en PositionIsEverything. Explicación en español en CSSLab.
