Desarrollos para Internet

Extensión de Desarrollo para Firefox

ismasan — Thu, 31 May 2007 17:10:41 +0000

Esta es la Web Developer Extension, un plugin para Firefox que te muestra de forma intuitiva la estructura de tus páginas HTML, CSS y otras gracias. Muy bueno para optimizar el desarrollo.

Guía ActionScript

ismasan — Wed, 23 May 2007 22:37:25 +0000

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

ismasan — Thu, 10 May 2007 20:54:58 +0000

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:
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)

ismasan — Mon, 07 May 2007 18:55:55 +0000

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

ismasan — Thu, 03 May 2007 20:29:16 +0000

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

ismasan — Thu, 03 May 2007 20:00:46 +0000

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

ismasan — Thu, 19 Apr 2007 18:18:03 +0000

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.

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

ismasan — Thu, 19 Apr 2007 18:17:14 +0000

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

ismasan — Thu, 12 Apr 2007 14:30:58 +0000

En esta clase hicimos una introducción a la diagramación con CSS.

Contenidos

Elementos DIV para estructuración de secciones de contenido
Atributo CSS float

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.