Examen Final
Comentarios (2)Los grupos son los siguientes:
- Tonchy Bencina, Carlos Saavedra y Felipe Rodriguez.
- Sebastián Ramis y Mario Peñafiel.
- Iván Soto y Carlos Carvajal
Los encargos ya asignados estan bajo los siguientes enlaces:
- Banco Metrópolis. (Brief.pdf) (IC.pdf).
- Tienda Specialized. (Brief.pdf) (IC.pdf).
- Turismo Austral. (Brief.pdf) (IC.pdf).
Recuerden entregar copias impresas y digitales, presentarse como empresa, usar lenguaje formal y respetar los requerimientos.
————-actualización ————–
El sistema de evaluación sera grupal, pero cada integrante del grupo evaluara a sus compañeros y se auto evaluara, estas notas serán consideradas en la nota personal final de cada entrega.
Overflow y Formularios
Dejar un comentarioEn la última clase vimos técnicas para hacer “cajitas con scroll” usando una cominación de height y overflow:auto.
HTML
<div id="cajita">
<p>Contenidos...</p>
<p>Más contenidos..</p>
<p>Etc.</p>
</div>
CSS
#cajita {
height:100px; /* alto fijo */ overflow:auto; /* esto genera el scroll */
}
Además vimos lo básico para la contrucción de formularios HTML.
<fieldset id="grupo-1">
<legend>Datos personales></legend>
<label for="nombre">Tu Nombre:</label>
<input type="text" id="nombre" name="nombre" value="" />
<input type="submit" value="Enviar" />
</fieldset>
Los archivos utlizados en clases están en el eCampus.
Position: absolute
Dejar un comentarioHoy vimos otra forma de diagramar bloques usando una combinación de elementos con el atributo position en absolute y relative.
Para una descripción más completa de la técnica y código de ejemplo, pueden ver éste artículo en mi blog.
Los archivos para los ejercicios hechos en clase están en Uniweb.
Documentación CSS y HTML (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.
Tarea: Términos Básicos.
Investigue la función y describa los siguientes términos:
- Podcast.
- Blog.
- Hipertexto.
- RSS.
- Portal Web.
- Sitio Web.
- Wiki.
- VideoCast.
- Hipervinculo.
- Feed.
Se entrega en formato PDF, con los conceptos básicos de diseño que se vieron en clases. Se revisara y evaluara el uso correcto de tipografías, texto y colores.
actualización:
Las fuentes que les prometi estan en esta carpeta y el mejor programa para administrarlas es el FontExplorer, que a diferencia de las fuentes, es gratuito 
Ismael no viene
Alumnos: por un caso fulminante de Sars + Gripe Aviar no voy hoy Martes a clases. Pero antes de que se pongan a saltar en un pie de alegría, les dejo unos ejercicios para que aprovechen tanto tiempo libre. Así soy de aguafiestas.
El ejercicio será revisado el próximo Martes y quien no lo haga deberá contar el chiste más fome que se sepa en el patio central del Uniacc, con un altavoz.
El Ejercicio
La tarea es simple: deben estructurar un documento XHTML con 5 bandas de música o películas que les gusten. Cada elemento debe tener un título, una breve descripción y una lista con los detalles técnicos (sello/productora, año, autor/director) y, si existe, un link a más información en la web.
El documento además debe tener un título y una introducción general (por ejemplo “lista oficial de mis grupos preferidos”), con nombre e email, todo en el HTML.
El documento debe incluír al menos los elementos H1, H2, A, STRONG y P. Además se evaluará el uso de la etiqueta META y sus atributos en el HEAD y la estructura general del documento. Revisen los ejercicios anteriores si no saben de qué estoy hablando. Si tienen dudas, pregúntenme en los comentarios de este artículo.
Suerte.
Ismael.
Normas Básicas de HTML
Recuerden las siguientes normas básicas del buen desarrollador web:
- Todo documento HTML debe poseer la siguiente estructura básica:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Titulo de la pagina/documento</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="author" content="nombre del autor" /><link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<p>hola mundo</p>
</body>
</html>
- Si abro un tag, debo cerrarlo:
<h1>hola mundo</h1> - Si mi tag es simple tambien debo cerrarlo:
<br/> - Si genero un enlace debe seguir la siguiente estructura:
<a href="documento.htm" title="texto descriptivo">esto es un link</a> - Si genero una imágen debe seguir la siguiente estructura:
<img src="imagen.png" alt="texto descriptivo" />
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 “material_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.
Espacio Web
Enlaces a espacio web de los alumnos.
http://www.uniweb.cl/victor.saavedra
http://www.uniweb.cl/ivan.sotof
http://www.uniweb.cl/tonchy.bencina
http://www.uniweb.cl/juan.ramis
http://www.uniweb.cl/felipe.rodriguezn
http://www.uniweb.cl/mario.penafiel
http://www.uniweb.cl/carlos.carvajal
http://www.uniweb.cl/cristobal.glatz
