Taller de produccion web UNIACC http://tallerweb.wordpress.com Desarrollo Web Fri, 22 Jun 2007 01:01:24 +0000 http://wordpress.com/ es hourly 1 http://www.gravatar.com/blavatar/85f3379708b16749ae01f49739b7d4c7?s=96&d=http://s.wordpress.com/i/buttonw-com.png Taller de produccion web UNIACC http://tallerweb.wordpress.com Examen Final http://tallerweb.wordpress.com/2007/06/21/examen-final/ http://tallerweb.wordpress.com/2007/06/21/examen-final/#comments Thu, 21 Jun 2007 03:24:50 +0000 tallerweb http://tallerweb.wordpress.com/2007/06/21/examen-final/ ]]>

Los grupos son los siguientes:

  1. Tonchy Bencina, Carlos Saavedra y Felipe Rodriguez.
  2. Sebastián Ramis y Mario Peñafiel.
  3. Iván Soto y Carlos Carvajal

Los encargos ya asignados estan bajo los siguientes enlaces:

  1. Banco Metrópolis. (Brief.pdf) (IC.pdf).
  2. Tienda Specialized. (Brief.pdf) (IC.pdf).
  3. 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.

]]> http://tallerweb.wordpress.com/2007/06/21/examen-final/feed/ 2 tallerweb Overflow y Formularios http://tallerweb.wordpress.com/2007/06/20/overflow-y-formularios/ http://tallerweb.wordpress.com/2007/06/20/overflow-y-formularios/#comments Wed, 20 Jun 2007 18:16:00 +0000 ismasan http://tallerweb.wordpress.com/2007/06/20/overflow-y-formularios/ ]]>

En 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.

]]> http://tallerweb.wordpress.com/2007/06/20/overflow-y-formularios/feed/ 0 ismasan Position: absolute http://tallerweb.wordpress.com/2007/05/18/position-absolute/ http://tallerweb.wordpress.com/2007/05/18/position-absolute/#comments Fri, 18 May 2007 06:20:08 +0000 ismasan http://tallerweb.wordpress.com/2007/05/18/position-absolute/ ]]>

Hoy 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.

]]> http://tallerweb.wordpress.com/2007/05/18/position-absolute/feed/ 0 ismasan Documentación CSS y HTML (express) http://tallerweb.wordpress.com/2007/05/07/documentacion-css-y-html-express/ http://tallerweb.wordpress.com/2007/05/07/documentacion-css-y-html-express/#comments Mon, 07 May 2007 18:54:56 +0000 ismasan http://tallerweb.wordpress.com/2007/05/07/documentacion-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.

]]> http://tallerweb.wordpress.com/2007/05/07/documentacion-css-y-html-express/feed/ 0 ismasan Tarea: Términos Básicos. http://tallerweb.wordpress.com/2007/04/27/tarea-terminos-basicos/ http://tallerweb.wordpress.com/2007/04/27/tarea-terminos-basicos/#comments Fri, 27 Apr 2007 16:20:51 +0000 tallerweb http://tallerweb.wordpress.com/2007/04/27/tarea-terminos-basicos/ ]]>

Investigue la función y describa los siguientes términos:

  1. Podcast.
  2. Blog.
  3. Hipertexto.
  4. RSS.
  5. Portal Web.
  6. Sitio Web.
  7. Wiki.
  8. VideoCast.
  9. Hipervinculo.
  10. 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 ;)

]]> http://tallerweb.wordpress.com/2007/04/27/tarea-terminos-basicos/feed/ 7 tallerweb Ismael no viene http://tallerweb.wordpress.com/2007/04/24/ismael-no-viene/ http://tallerweb.wordpress.com/2007/04/24/ismael-no-viene/#comments Tue, 24 Apr 2007 13:40:09 +0000 ismasan http://tallerweb.wordpress.com/2007/04/24/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.

]]> http://tallerweb.wordpress.com/2007/04/24/ismael-no-viene/feed/ 3 ismasan Normas Básicas de HTML http://tallerweb.wordpress.com/2007/04/20/normas-basicas-de-html/ http://tallerweb.wordpress.com/2007/04/20/normas-basicas-de-html/#comments Fri, 20 Apr 2007 15:13:31 +0000 tallerweb http://tallerweb.wordpress.com/2007/04/20/normas-basicas-de-html/ ]]>

Recuerden las siguientes normas básicas del buen desarrollador web:

  1. 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>

  2. Si abro un tag, debo cerrarlo:

    <h1>hola mundo</h1>

  3. Si mi tag es simple tambien debo cerrarlo:

    <br/>

  4. Si genero un enlace debe seguir la siguiente estructura:

    <a href="documento.htm" title="texto descriptivo">esto es un link</a>

  5. Si genero una imágen debe seguir la siguiente estructura:

    <img src="imagen.png" alt="texto descriptivo" />

]]> http://tallerweb.wordpress.com/2007/04/20/normas-basicas-de-html/feed/ 0 tallerweb Editores de código http://tallerweb.wordpress.com/2007/04/17/editores-de-codigo/ http://tallerweb.wordpress.com/2007/04/17/editores-de-codigo/#comments Tue, 17 Apr 2007 19:03:15 +0000 ismasan http://tallerweb.wordpress.com/2007/04/17/editores-de-codigo/ ]]>

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.

]]> http://tallerweb.wordpress.com/2007/04/17/editores-de-codigo/feed/ 0 ismasan Columnas 2 http://tallerweb.wordpress.com/2007/04/17/columnas-2/ http://tallerweb.wordpress.com/2007/04/17/columnas-2/#comments Tue, 17 Apr 2007 19:01:00 +0000 ismasan http://tallerweb.wordpress.com/2007/04/17/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 :) ):

Recuerden dejar sus preguntas en los comentarios.

]]> http://tallerweb.wordpress.com/2007/04/17/columnas-2/feed/ 0 ismasan Espacio Web http://tallerweb.wordpress.com/2007/04/13/espacio-web/ http://tallerweb.wordpress.com/2007/04/13/espacio-web/#comments Fri, 13 Apr 2007 15:35:19 +0000 tallerweb http://tallerweb.wordpress.com/2007/04/13/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

]]> http://tallerweb.wordpress.com/2007/04/13/espacio-web/feed/ 0 tallerweb