Está en la página 1de 4

26/12/2015

Descriptor

INACAP
ASIGNATURA:TallerDiseoWeb

90HORAS

DESCRIPCINDELAASIGNATURA:
Taller Diseo Web es una asignatura de especialidad de carcter prctico que tiene por objetivo que los estudiantes desarrollen sitios web bsicos mediante HTML y CSS, siguiendo un proceso de ideacin, prototipado de diseo e implementacin
y usando tcnicas creativas, para su publicacin y consumo en Internet, en el mbito del desarrollo de productos digitales, mediante la aplicacin de metodologa de prcticas de laboratorio o taller.

COMPETENCIAS:
COMPETENCIA DEL PERFIL DE EGRESO ASOCIADA

Diseaproyectoswebymobile,proponiendosolucionescreativasque
respondenalosrequerimientosdelcliente,lasnecesidadesdelusuarioy
lascondicionesdelmercado,paraagregarvaloraproductosyservicios,
enfocadoenlaexperienciadelusuario,aplicandometodologasde
creatividad.

Desarrollainterfaceswebymobile,querespondenalosrequerimientos
delcliente,lasnecesidadesdelusuarioylascondicionesdelmercado,
paraproducirycomunicarsolucionesdewebymobile,utilizandolas
tecnologasyestndaresdelainformacinycomunicacin,enfocados
enlaexperienciadelusuario.

INDICADOR DE DESARROLLO

Disea maquetas de interfaces web& mobile mediante tcnicas creativas


centradas en la usabilidad y la simplicidad, respondiendo a las necesidades de los
casos ms comunes expresados en un brief.

Desarrolla sitios web en base a HTML y CSS, utilizando buenas prcticas,


editores de cdigo y navegadores web que le permiten producir una interfaz
usable.

COMPETENCIA GENRICA

NIVEL DE DOMINIO

Pensamiento creativo.

Uso de TIC.

Nivel 1. Propone soluciones y alternativas a problemas, utilizando enfoques y


mtodos dados, en el mbito acadmico.

Nivel 1. Utiliza herramientas de las TIC, para procesar y comunicar informacin


en el mbito personal y acadmico.

UNIDADESDEAPRENDIZAJE:

Elaboracin de mockups enfocado en web.

HORAS
26

Diseo de look & feel.

26

Desarrollo de proyecto web bsico.

26

EVALUACIN:

12

DOCENTEELABORADOR:SergioNouvelCastro(RodrigoAcevedoDuarte)

ASESORDEDISEOCURRICULAR:MaravilaArias

UNIDADESDEAPRENDIZAJE
1.Elaboracin de mockups enfocado en web.
APRENDIZAJESESPERADOS
1.1.Prototipa interacciones y jerarquizacin de
contenidos de un sitio web de manera simple,
mediante el uso de mockups, para definir los
lineamientos base de diseo.

26Horas
CRITERIOSDEEVALUACIN
1.1.1.
Jerarquiza contenidos de un sitio web mediante un sitemap, para su posterior diseo.
1.1.2.
Elabora un wireframe bsico, identificando los diferentes elementos de un sitio web, para su

http://siga3.inacap.cl/aapedescriptor/showasig_moodle.aspx?idasig=DIDW01

CONTENIDOSMNIMOSOBLIGATORIOS
Jerarquizacin de contenidos:
Objetivos de navegacin.
Seleccin de contenidos.
Planificacin de informacin.
1/4

26/12/2015

Descriptor

Elabora un wireframe bsico, identificando los diferentes elementos de un sitio web, para su
posterior uso como referente.

1.1.3.
Prototipa el contenido y la interfaz de un sitio usando wireframes, para su posterior uso como base
del diseo.

Diagramacin de layouts segn tipos de sitio:


reas de un sitio web.
Formatos.
Patrones.
Buenas prcticas.

Desarrollo de wireframes bsicos:


Objetivos de mockups.
Simbologa.
Estructura y contenido.
Elaboracin de mockups.

ACTIVIDADESMNIMASOBLIGATORIAS
1. Elaboran un sitemap o mapa conceptual, jerarquizando los contenidos de un sitio web, en formato libre y en 3 dimensiones.
2. Desarrollan un wireframe a partir de la observacin de los contenidos y secciones de un sitio web, que luego se usar como base para un diseo completo.
3. Realizan mockups a partir de un sitio web de 4 secciones, utilizando balsamiq como herramienta principal, definiendo con claridad los puntos de contenido e interaccin.

4. Construyen a partir de un brief para un sitio web, un prototipo en papel, compuesto de wireframes, el cual podr ser navegado por un usuario con la ayuda del alumno con fines de testeo.

2.Diseo de look & feel.


APRENDIZAJESESPERADOS
2.1.Desarrolla propuestas grficas usando
software especializado, aplicando tcnicas
creativas y apoyado por el uso de wireframes,
para su posterior aplicacin en el desarrollo.

26Horas
CRITERIOSDEEVALUACIN
2.1.1.
Transforma los elementos de un wireframe en una propuesta grfica, para su uso como referente.
2.1.2.
Elabora un mini sitio con HTML / CSS, a travs de un editor de texto, para su publicacin en internet.
2.1.3.
Desarrolla imgenes optimizadas para web usando software especializado, para integrar el diseo
con el cdigo web.
2.1.4.Elabora una interfaz grfica en base a un wireframe, usando tcnicas creativas, para su
posterior aplicacin en el diseo.

CONTENIDOSMNIMOSOBLIGATORIOS
Adaptacin de wireframes/mockups para el desarrollo de propuestas grficas:
Resoluciones de pantalla.
Errores comunes.
Buenas prcticas.

Desarrollo creativo de look & feel:


Aplicacin de forma y color.
Disposicin de propuesta creativa.
Alineamiento y diagramacin de elementos.

Optimizacin de imgenes para web usando fireworks:


Elementos bsicos: Botones, objetos, reas geomtricas, entre otros.
Delimitar reas para corte.
Optimizacin de imgenes y formatos.
Exportacin de imagen.

ACTIVIDADESMNIMASOBLIGATORIAS
1. Elaboran un wireframe y transformauna propuesta grfica de sitio web, con nfasis en la creatividad y el uso de tcnicas grficas.

2. Elaboran una propuesta grfica de forma creativa, a partir de la observacin de un wireframe de sitio web, aplicando forma, color y disposicin de los elementos.

3. Optimizan las imgenes de acuerdo a lo requerido para la web, utilizando Adobe Fireworks, a partir de la propuesta grfica generada en el encargo anterior.
4. Elaboran una propuesta grfica creativa, a partir de un wireframe, en la cual se aprecie un estilo definido, optimizando las imgenes para la web mediante Adobe Fireworks.

3.Desarrollo de proyecto web bsico.


APRENDIZAJESESPERADOS
3.1.Construye un sitio web bsico, usando HTML
y CSS, para ser publicado en Internet mediante
FTP.

26Horas
CRITERIOSDEEVALUACIN
3.1.1.
Desarrolla una pgina HTML bsica, aplicando las principales etiquetas de <head> </head> y
<body> </body> para su publicacin en internet.
3.1.2.
Elabora un wireframe bsico, identificando los diferentes elementos de un sitio web, para su
posterior uso como referente.
3.1.3.
Publica un sitio web local en internet por protocolo FTP, utilizando Filezilla, para volverlo accesible a
usuarios de internet.

http://siga3.inacap.cl/aapedescriptor/showasig_moodle.aspx?idasig=DIDW01

CONTENIDOSMNIMOSOBLIGATORIOS
HTML & CSS bsico:
Estructura y lgica.
Sintaxis.
Etiquetas bsicas.
Errores comunes.
Buenas prcticas.
Anidacin CSS.
Herencia.

Estructura bsica de sitios web:


Links.
Estructura de directorios.
2/4

26/12/2015

Descriptor

Vinculacin de assets: CSS, JavaScript, imgenes.

Publicacin de sitios web con FTP:


Conceptos bsicos de FTP.
Funcionamiento de protocolo.
Publicacin de archivos.
Errores comunes.

ACTIVIDADESMNIMASOBLIGATORIAS
1. Elaboran una pgina HTML bsica que contemple el uso de etiquetas de doctype, HTLM, head y body para su publicacin en internet.

2. Desarrollan un mini sitio con al menos una pgina de inicio y tres link de pginas interiores, utilizando correctamente las etiquetas HTML y no poseer errores de anidacin, ni cierre de etiquetas en HTML, CSS.
3. Realizan la publicacin de un mini sitio desarrollado localmente haca un servidor web, usando un cliente FTP, incluyendo todos los archivos.
4. Generan un sitio web, desarrollado en HTML y CSS usando editores de texto para publicarlo en la web mediante FTP, a partir de un set de wireframes y un diseo visual con sus imgenes ya cortadas.

ESTRATEGIASMETODOLGICAS

UNIDAD DE APRENDIZAJE 1: Elaboracin de mockups enfocado en web.


Prcticas de laboratorio o taller.
Aprendizaje basado en problemas.
Simulacin.
Mtodo de caso.
Aprendizaje basado en proyectos.

UNIDAD DE APRENDIZAJE 2: Diseo de look & feel.


Prcticas de laboratorio o taller.
Simulacin.
Mtodo de caso.
Aprendizaje basado en proyecto.
Aprendizaje basado en problema.

UNIDAD DE APRENDIZAJE 3: Desarrollo de proyecto web bsico.


Prcticas de laboratorio o taller.
Aprendizaje basado en proyecto.
Solucin ejercicio y problema.

BIBLIOGRAFADELAASIGNATURA

BibliografiaObligatoria
Ttulo

Autor

Ao ISBN/ISSN

Editorial

Fuente

NombreRecursoDigital TipodeMaterial

Artefactosdeespecificacinderequerimientosdeusabilidad

Fagalde,Patricio

2011

BUniversidaddeBuenosAires

eLibro

Usabilidad:laevaluacindelosserviciosenelentornoWeb

Gonzlezprez,
Yanelis

2006 10249435

ScieloCuba

Revistamdica.LaHabana.2006,Vol.14,n5,p.1
eLibro
26.

Revista
Electrnica

Theelementsofuserexperience:usercentereddesignfortheWeband
beyond

Garrett,JesseJames

2011 9780321683687 NewRiders

Libro

Sistemasmultimedia:anlisis,diseoyevaluacin

AedoCuevas,Ignacio

2004 9788436247916

eLibro

ebook

MetodologademedicinyevaluacindelausabilidadensitiosWeb
educativos

AlvaObeso,Mara
Elena

2009 9788483175842 EdiunoUniversidaddeOviedo

eLibro

Tesis

Contribucindelaplaneacinaldesarrolloweb:loswireframes

Morris,Mirta

2008 10249435

ACIMED.Marzo2008,Vol.17Issue3,p.19.

AcademicSearch
Complete

Artculo

Eldiseoemocional:porqunosgustan(ono)losobjetoscotidianos

Norman,DonaldA.

2005 9788449317293 Pearson

Libro

UNEDUniversidadNacionaldeEducacina
Distancia

Tesis

BibliografiaSugerida:
http://siga3.inacap.cl/aapedescriptor/showasig_moodle.aspx?idasig=DIDW01

3/4

26/12/2015

Descriptor

Ttulo

Autor

Ao ISBN/ISSN

Eldiseoenlavidacotidiana

Heskett,Johns

Thesmashingbook2
Usabilidad:diseodesitiosweb

Editorial

Fuente

NombreRecursoDigital TipodeMaterial

2008 9788425219818 GustavoGili

Libro

Ward,Matt

2011 9783943075397 SmashingMedia

Libro

Nielsen,Jakob

2000 9788420530086 PrenticeHall

Libro

Cerrar

http://siga3.inacap.cl/aapedescriptor/showasig_moodle.aspx?idasig=DIDW01

4/4