Memoria

PROYECTO DE TÍTULO: PROTOTIPA, Web para Diseñadores POR: Ricardo A. Vargas Vizcaya PROFESORES GUÍAS: Marta Kiverstein Gurovich Andrés Correa Illanes 1

2

ร NDICE

Antecedentes

P r o p u e s ta

Abstract pรกg.07

Estructura de Contenidos

Contexto pรกg.09

Objetivos pรกg.67

Problemรกtica pรกg.29

Referentes pรกg.68

Pรบblico Objetivo pรกg.33

Mapa Conceptual pรกg.33

Matriz de Necesidades

Proyecto pรกg.74

pรกg.37

Mandantes pรกg.39

Grรกfica

Estudio de Casos

Presupuesto pรกg.90

pรกg.44

Conclusiones pรกg.60

pรกg.63

Horas de Proyecto

pรกg.75 pรกg.91

3

4

Antecedentes 5

6

ABSTRACT

L

os alumnos de diseño gráfico de Duoc UC tienen que cursar la asignatura Prototipado Web en su tercer semestre de la carrera, por lo cual, el estudiante tiene que aprender un nuevo

lenguaje de comunicación de mediana complejidad y es aquí donde el proyecto busca entregar un material de apoyo que facilite el aprendizaje del alumno de una forma más didáctica implementando los recursos tecnológicos que hay hoy en día.

Por otro lado la necesidad de los sitios web va en aumento por lo cual es de suma importancia que los estudiantes aprendan a diseñar y prototipar un sitio web.

7

8

EDUCACIÓN

siste ma ed u cacio na l e n chile En el sistema universitario chileno coexisten tres tipos de universidades; las denominadas universidades de enseñanza, las universidades de investigación y las universidades que cumplen las tres funciones; enseñanza, investigación y emprendimiento y que se denominan universidad de la innovación. Estas últimas utilizan una serie de elementos que les permite cumplir su misión; centros investigación y desarrollo, oficina de transferencia tecnológica, unidad propiedad intelectual, incubadoras y, programas de emprendimiento y de parque científico tecnológico.

Es importante mencionar que tanto en las universidades de investigación como en las de innovacion, y con mayor énfasis en estas últimas, las características de la institución tienen un impacto en la formación de los profesionales por el contacto con nuevas tecnologías. h t t p : // w w w . c i n d a . cl/wp-content/ uploads/2014/02/El-rolde-las-universidadesen-el-desarrollocient%C3%ADfico-ytecnol%C3%B3gico-2010. pdf

9

V i d a U n i v e r s i ta r i a

L

a educación universitaria o de educación superior ha de hacer hincapié en la dimensión social de la persona y de la vida.

Ha de fomentar en el estudiante una actitud de comprensión

hacia sus compañeros y demás figuras que serán importantes en su vida profesional y personal, ha de fomentar los conocimientos, habilidades y actitudes necesarias para que los alumnos puedan llegar a acuerdos y comprometerse juntos en empresas comunes, valorando las aportaciones de cada miembro y respetando y aceptando las discrepancias.

En un mundo donde el conflicto es, desgraciadamente, omnipresente, y la competencia, la persecución del triunfo individual a toda costa y la rivalidad personal se han convertido en lugares comunes, enseñar a compartir, a descubrir al otro, a trabajar en pro de objetivos comunes es una empresa ardua, pero no por ello menos irrenunciable.

h t t p : // w w w . u b . e d u / d p p s e d / fvillar/principal/pdf/ proyecto/cap_15_contexto_ psicopedag.pdf

El trabajo del estudiante en la educación superior ha de hacerle flexible al cambio, pero también capaz de defender, de manera constructiva y democrática, unos principios de convivencia y de justicia que considere fundamentales, sin renuncias.

10

“Si buscas resultados diferentes, no hagas s i e m p r e l o m i s m o .�

Albert Einstein

11

Aprender a conocer El profesor universitario ha de ser consciente de que los conocimientos sobre su disciplina (y sobre la forma en la que la imparte también) es algo en constante cambio, dinámico, y que es parte de su misión conocer esos cambios, esos nuevos conocimientos que surgen en cualquier materia. El conocimiento, como la formación de las personas, no tiene un punto final. No ha de pensar que podrá llenar sus mochilas de conocimientos durante cierto periodo del ejercicio profesional, para simplemente aprovisionar, utilizar esos conocimientos acumulados durante el resto de años en los que se imparta docencia. Su mochila de conocimientos ha de estar continuamente llenándose, y lo nuevo no simplemente se ha de añadir a lo que ya tenían, sino que ha de tener la capacidad de poder cambiarlo también. Por otra parte, también el profesor universitario, con sus propias investigaciones, contribuye a esos cambios en su disciplina. Es este compromiso no sólo con los nuevos conocimientos producidos por otros, sino con la propia tarea de producir él mismo conocimientos, la que garantizará que h t t p : // w w w . u b . e d u / d p p s e d / fvillar/principal/pdf/ proyecto/cap_15_contexto_ psicopedag.pdf

12

el profesor sea un experto en la materia que imparte.

Metodologías y estilos de aprendizaje Las personas perciben y adquieren los conocimientos de manera distinta. Además, tienen preferencias hacia determinadas estrategias cognitivas que son las que finalmente les ayudarán a dar significado a la nueva información. Por ejemplo, unos prefieren hacerlo en grupos, otros individualmente, algunos optan por la experimentación y otros requieren asesoría.

El concepto estilos de aprendizaje se refiere a esas estrategias preferidas por los estudiantes y que se relacionan con formas de recopilar, interpretar, organizar y pensar sobre la nueva información.

En otras palabras, podríamos decir que son los “rasgos cognitivos, afectivos y fisiológicos que determinarán la forma en que los estudiantes perciben, interaccionan y responden a un ambiente de aprendizaje” o, de manera más sencilla, la “descripción de las actitudes y comportamientos que determinan la forma preferida de aprendizaje del individuo”. h t t p : // e d u c r e a . c l / e s t i l o s y-metodologias-deaprendizaje/

Es importante establecer que los estilos de aprendizaje no son estables, es decir, pueden sufrir modificaciones a lo largo del tiempo.

En efecto, a medida que avanzan en su proceso de aprendizaje los estudiantes van descubriendo cuál es su mejor forma de aprender, dependiendo de condiciones tales como las circunstancias, contextos o tiempos de aprendizaje.

13

clasificacio n es e n re lació n c o n los estilos de aprendizaje Activista Los estudiantes con predominancia en el estilo activo se implican plenamente en nuevas experiencias. Crecen ante los desafíos y se aburren con largos plazos. Son personas que gustan de trabajar en grupo y se involucran en las actividades activamente.

Reflexivo Los estudiantes con un estilo de aprendizaje predominantemente reflexivo también aprenden con las nuevas experiencias, sin embargo, no les gusta implicarse directamente en ellas. Reúnen la información y la analizan con tranquilidad antes de llegar a una conclusión. Observan y escuchan a los demás, pero no intervienen hasta que se han adueñado de la situación.

Teórico Este tipo de estudiantes aprende mejor cuando la información se les presenta como parte de un sistema, modelo, teoría o concepto. h t t p : // e d u c r e a . c l / e s t i l o s y-metodologias-deaprendizaje/

Les gusta analizar y sintetizar; si la información es lógica, es buena.

Pragmático Su forma de acceder a la información es mediante la aplicación práctica de las ideas. Tienden a ser estudiantes impacientes cuando hay alguien que teoriza en exceso.

14

ca r ac t e r í s t i ca s p r i n c i pa l e s d e los estilos de aprendizaje

h t t p : // e d u c r e a . c l / e s t i l o s y-metodologias-deaprendizaje/

Activo Retienen y comprenden mejor la información después de aplicarla y experimentarla en acciones propias o explicando a otras personas lo que han aprendido.

Reflexivo Retienen mejor la información después de que toman un tiempo para procesarla.

Sensorial Prefieren los hechos y datos específicos y concretos. Son buenos para memorizar y resuelven problemas con métodos estándar.

Intuitivo Prefieren la innovación y las teorías. Son hábiles para captar conceptos nuevos e ideas amplias.

No presentan problemas con el uso de símbolos y abstracciones, relacionándolos con conocimientos y experiencias previas.

Visual Recuerdan mejor lo que ven; imágenes, esquemas, diagramas, películas, demostraciones. Tienden a olvidar con facilidad las palabras e ideas que solo se manifiestan en forma verbal.

Verbal Recuerdan en gran parte lo que escuchan. Se benefician de la discución y el análisis y aprenden con facilidad al explicar los conceptos a otras personas. Aprenden con eficacia mediante la lectura.

Secuencial Es más fácil aprender a través de un material que presenta la información de manera lógica y ordenada. Solucionan los problemas de manera lineal y paso a paso. Pueden trabajar con secciones de material sin comprender el concepto completo.

Global Aprenden en forma general. Al principio cuando no logran captar la idea general son incapaces de resolver los problemas. Sin embargo una vez que han logrado comprender, ven la globalidad en un nivel que los demás no son capaces de alcanzar. Son muy creativos.

15

Ed u cació n P res e ncia l Permite una interacción más “cercana”, entre el instructor y los alumnos; pero, condiciona la participación de algunos estudiantes, y no ofrece una flexibilidad de horarios ni una actualización de contenidos de la misma manera que las modalidades que emplean la tecnología.

Ventajas: •

Existe mayor vinculo maestro-alumno y en consecuencia mayor comunicación y existe mayor contacto humano evitando así el aislamiento humano.

•

No se invierte tiempo en fallas técnicas por ejemplo de audio, video.

Desventajas: •

Se invierte mayor tiempo en los traslados al centro educativo y esto trae como consecuencia también la inversión de mayores recursos económicos.

h t t p : // e d u c r e a . c l / e s t i l o s y-metodologias-deaprendizaje/

•

El profesor lleva la carga de trabajo lo que hace que el alumno en la mayoría de las veces sea solo el receptor y no se reflexionen los temas con mayor claridad.

•

Los horarios son mas rígidos. A algunas personas que viven muy lejos o no pueden salir de casa no podrían asistir a este tipo de educación.

16

E d u c a c i ó n d i g i ta l Es una posibilidad de ajustarse en tiempo, espacio, forma y necesidades de aprendizaje del estudiante. La educación virtual facilita el manejo de la información de los contenidos del tema a tratar y esta mediada por las Tics, que proporcionan herramientas de aprendizaje mas versátil, veloces, estimulantes e incentivadoras.

Ventajas: •

Puede adaptar el estudio a su horario personal.

•

Todos los alumnos tienen acceso a la enseñanza, no viéndose perjudicados aquellos que no pueden acudir periódicamente a clase por motivos como el trabajo, la distancia, etc...

•

Podrá seguir el ritmo de trabajo marcado por el profesor y por sus compañeros de curso Para la universidad Permite a la universidad ampliar su oferta de formación a aquellas personas o trabajadores que no pueden acceder a sus cursos presenciales.

h t t p : // e d u c r e a . c l / e s t i l o s y-metodologias-deaprendizaje/

•

Permite superar la calidad de los cursos presenciales

•

Aumenta la efectividad de los presupuestos destinados a la educación

Desventajas: •

La pasividad del sujeto frente a este medio, pues se percibe como un ”medio fácil”.

•

La tendencia a trabajar cualquier aspecto o contenido de forma virtual, dejando de lado el uso de medios más sencillos como el retro proyector.

17

INTERNET

acc es o a inte rn et e n chile 3 d e c a da 5 h o g a re s cu en ta con in te rn et

El significativo aumento en el acceso y uso de Internet en la última década ha generado cambios importantes en múltiples dimensiones en la sociedad. Es así como, por ejemplo, hoy es más posible que antes trabajar, estudiar, pagar cuentas y comprar desde el hogar. Muchas de estas actividades que son posibles gracias a

64 d e c ad a 10 0 h a b ita n tes s e co n e c t a a i n tern et

Internet generan externalidades positivas que pueden aumentar la innovación y la productividad en la economía de un país. Sin embargo, para que ello realmente ocurra no sólo se debe contar con acceso a internet sino que además su uso debe estar asociado a actividades que efectivamente generan externalidades positivas (Autor et al., 2003). En ese sentido el uso que se le dé al acceso

1 0 0 % d e l os e s t u d i a n tes ti en e a cce s o a i n tern et d e a lg ú n mod o

Encuesta Nacional de Acceso y Uso de Intern e t : h t t p : // w w w . s u b t e l . gob.cl/noticias/2699-encuesta-nacional-sobre-uso-y-acceso-de-internet/ 6 octubre 2014

18

a Internet es muy relevante. Por ejemplo, la búsqueda de información o la difusión de nuevos conocimientos a través de la web tienen efectos positivos mientras que la descarga ilegal de música y películas no los tiene.

inte rn et y ed u cació n Como consecuencia de la actual era de la electrónica y de la cultura de la imagen que nos caracteriza, las posibilidades que se nos abre a la comunicación y en particular a los procesos de enseñanza-aprendizaje, la irrupción de las nuevas tecnologías, de los sistemas multimedia ligados al ordenador personal y en particular las redes, con la creación de entornos personales y culturales (concepto de cibercultura) en un espacio abstracto o lugar virtual (ciberespacio), nos permite vislumbrar un caudal de nuevas concepciones, replanteamientos del actual concepto de enseñanza y el cómo llevarla a cabo.

De hecho estas tecnologías, nos están suministrando nuevas formas de percibir, de ver y de pensar en global de forma ubicua, de localizar la información de modo hipertextual, no lineal a como estamos acostumbrados, independientemente del lugar del globo en donde esté situada. Asimismo da nuevas posibilidades a quienes por su lejanía a los centros de educación les era sino imposible prácticamente inviable.

De cara al usuario actual o potencial, la red está cambiando los hábitos, conceptos y costumbres, por esto los profesionales de la educación necesitan conocer este medio. De su conocimiento, h t t p : // w w w . u c l m . e s / p r o f e sorado/ricardo/webnntt/ bloque%202/internet.htm

análisis, reflexión sobre las potencialidades y consecuencias de su uso y abuso, permitirá al estudiante una mayor comprensión del cambio social y cultural en el que estamos inmersos, camino hacia una sociedad de la información cada vez más global y cada día más cercana.

19

TECNOLOGÍAS

Tecnologías de la info rmació n y c o m u nicació n Las tecnologías de la información y comunicación (TIC) han adquirido gran relevancia, principalmente a partir del amplio uso de la red Internet, siendo el educativo uno de sus más importantes campos de acción. Las TIC tienen como base la información y han hecho que el usuario pase de tener el papel de receptor pasivo de un mensaje, a tener un papel activo, donde él decide la secuencia de la información y establece el ritmo, calidad, cantidad y profundización de la información que desea. Esto es, realmente, un gran avance que debe ser aprovechado en el hecho intruccional.

habilidades tic e n l a ed u cació n En el marco de su estrategia de integración de las Tecnologías de la Información y la Comunicación (TIC) a la educación y el desarrollo de competencias en los diferentes actores del sistema escolar, el Centro de Educación y Tecnología, Enlaces, ha desarrollado diferentes iniciativas orientadas al desarrollo y medición de habilidades TIC en estudiantes. Entre ellas destacan la definición de un mapa de progreso de habilidades TIC funcionales (conocido como mapa K-12) para estudiantes, desarrollado el año 2006 y la Matriz de Habilidades TIC para estudiantes del siglo XXI, desarrollada el Enlaces - ministerio de e d u c a c i ó n h t t p : // w w w . enlaces.cl/index.php?t=44&i=2&cc=2285&tm=2 25 Noviembre 2012

20

año 2008. Ambos insumos fueron utilizados para el desarrollo del Sistema de medición de competencias TIC en estudiantes, SIMCE TIC, aplicado por primera vez a nivel nacional en el mes de noviembre del año 2011.

LA WEB

l a i m p o r ta n c i a d e u n s i t i o w e b En los países más desarrollados, está demostrado que la intensidad en la aplicación de nuevas tecnologías y la incorporación de un Sitio Web, está en correlación de manera positiva con el incremento de las ventas, la productividad y el valor de mercado de las empresas.

Es de suma importancia el poder alcanzar a sus clientes de una

U n 86 % d e l as e m p res as en C h i l e c u e n tan con u n s i ti o web

manera masiva y sencilla. Nada mejor para eso, que el propio Internet. Si bien es cierto que existen muchas redes sociales en las que te puedes anunciar de forma gratuita o pagada, el tener un Sitio Web eleva el prestigio propio de la empresa y permite a los usuarios incrementar el nivel de confianza hacia tu producto o servicio.

Las redes sociales muestran resultados aleatorios que no siempre van de la mano con el comportamiento del consumidor final, por lo tanto no se puede medir el impacto real del estudio.

Todos hemos visitado más de algún sitio web en el que no llevamos ni 30 segundos y ya no queremos seguir navegándolo, sin embargo hay unas que te enamoran a primera vista. Es por eso

D i r e c c i ó n p r o - c h i l e h t t p : // www.eluniversal.com.mx/ a r t i c u l o s / 5 1 0 3 7. h t m l 2 5 Noviembre 2012

que también no solamente basta con tener una “pagina” en la web mundial, sino que debes saber explotar todas sus ventajas y beneficios que te permitirán llevar a nivel de élite a tu empresa o negocio personal.

Importancia de un sitio w e b . h t t p : // w w w . t w e a c o . com/es/Noticias/Noticia?nid=540 5 Noviembre 2014

21

“las empresas que no entren en el campo de Internet en los próximos 10 años, desaparecerán!”

Estudiosos e-business

22

diseño web El término “diseño web” se refiere a la actividad que consiste en estructurar los elementos gráficos de un sitio web para expresar estéticamente la identidad visual de una compañía u organización.

Se trata de una etapa de diseño virtual más que de diseño funcional (ergonomía, navegación).

El objetivo del diseño web es realzar la imagen de una compañía u organización a través de elementos gráficos con el objeto de reforzar su identidad visual y despertar una sensación de confianza en el usuario. Aún así y junto con el criterio de ergonomía, un sitio web debe, sobre todo, cubrir las expectativas del usuario y permitirle encontrar fácilmente la información que busca.

Por eso, el diseño web consiste en encontrar un término medio entre una presentación que tenga gráficos impresionantes -y que le proporcione a la compañía tanto credibilidad como imagen de marca- y una presentación simple y sencilla que permita a los D i s e ñ o w e b h t t p : // es.calameo.com/ books/001577170efd8119a3df0 10 febrero 2014

usuarios encontrar lo que están buscando.

23

I m p o r ta n c i a d e l d i s e ñ o w e b Uno de los aspectos fundamentales a la hora de crear cualquier web o blog es el diseño, del que debemos ocuparnos después de haber definido la arquitectura de la información (que engloba el planteamiento del árbol web, la elaboración del análisis funcional y el esquema de las funcionalidades y contenidos en los wireframes).

Para que el diseño resulte eficaz, hay que tener en cuenta la información recogida en la fase de captación de necesidades, además de los gustos, requisitos y preferencias del cliente. La creatividad será responsabilidad del equipo de diseño, que presentará diferentes propuestas gráficas basadas en la estructura definida previamente en la fase de creación de los wireframes. Entre ellas, todo el equipo involucrado en el proyecto web tendrá que escoger una de ellas.

En esta etapa, la accesibilidad, la usabilidad, y el equilibrio armónico entre estética y funcionalidad son aspectos que condicionan el diseño, pero que no tienen por qué limitarlo.

Asimismo, la creatividad y otros recursos que se emplean en esta etapa son muy variados, ya que pueden incluir fotografías, ilustraciones, vídeos, animaciones y grabaciones de audio, entre otros formatos. Además, los recursos tipográficos y la paleta de colores también adquieren un gran protagonismo a la hora de personalizar el sitio web y diferenciarlo del de los competidores, ya que contribuyen a hacerlo más impactante.

24

cam p o labo ra l El término “diseño web” se refiere a la actividad que consiste en estructurar los elementos gráficos de un sitio web para expresar estéticamente la identidad visual de una compañía u organización.

Se trata de una etapa de diseño virtual más que de diseño funcional (ergonomía, navegación).

El objetivo del diseño web es realzar la imagen de una compañía u organización a través de elementos gráficos con el objeto de reforzar su identidad visual y despertar una sensación de confianza en el usuario. Aún así y junto con el criterio de ergonomía, un sitio web debe, sobre todo, cubrir las expectativas del usuario y permitirle encontrar fácilmente la información que busca.

Por eso, el diseño web consiste en encontrar un término medio entre una presentación que tenga gráficos impresionantes -y que le proporcione a la compañía tanto credibilidad como imagen de marca- y una presentación simple y sencilla que permita a los usuarios encontrar lo que están buscando.

25

O f e r ta s d e e m p l e o Buscando ofertas de empleo en la región metropolitana, encontramos un total de 232 puestos de trabajo, éste último mes, para diseñadores profesionales, de los cuales, 152 se enfocan exclusivamente al diseño web, es por eso la importancia de la asignatura Prototipado Web.

Un 6 5 % d e l os e m p le o s req u i eren co n o c imi en to en s iti o s web Ofertas de trabajo mes de junio Diseñador Web - con experiencia en catálogos en R.Metropolit EMPRESA CONSTRUCTORA RODRIGO HEVIA RIERA · Empresa Santiago, Metropolitana de Santiago, Chile, Hace 2 días h t t p : // e m p l e o . m i t u la.cl/empleo/disenador-web-metropolitana

Diseñador web en R.Metropolit COYOTE DIGITAL SPA Santiago, Metropolitana de Santiago, Chile, Hace 2 días

Diseñador Gráfico - Experiencia Web Adportas Media Group - Santiago Aportas Media Group, 1 año de experiencia Santiago, Metropolitana de Santiago, Chile, Hace 1 hora 7 min.

26

“ E l D i s e ñ a d o r, a d i fe re n c i a d e l a r t i s t a , n o e s normalmente la fuente de los mensajes que c o m u n i c a , s i n o s u i n t é r p r e t e .”

Jorge Frascara

27

“El quiebre está en la base educacional.

El aprender a programar es un cambio de paradigma, es otro idioma, requiere de otra e s t r u c t u r a m e n t a l .”

Natalia Muñoz Carpintero

28

PROBLEMÁTICA

E n c u e s ta r e a l i z a d a a 1 0 0 estudiantes de diseño U n 4% d e l os c h i l e n os s ab en I n g le s

Hoy en día hay 1500 alumnos de diseño gráfico, de los cuales, 300 pasan por la asignatura Prototipado Web, siendo ésta una de las asignaturas con mayor problema de aprendizaje por parte del alumno.

5 7 % de l os a l u m n os ap ru eb an l a a s i g n atu ra s i n p ro b l emas

Uno de los principales problemas en el aprendizaje HTML y CSS es el idioma de su sintaxis, en la actualidad solo un 4% de los chilenos saben realmente inglés, por lo tanto, integrar otro lenguaje que utiliza una sintaxis técnica, hace que sea aún más complejo, donde solo el error de una palabra o de un símbolo, puede perjudicar totalmente el sitio, haciendo que el alumno comience con

6 0 % no p u ed e re a l i z a r u n a web p o r s u cu en ta

frustraciones tendiendo a rechazar la asignatura.

Es Una asignatura que requiere práctica, por tanto es necesario que el alumno también practique fuera del aula de clases.

Es necesario que el alumno vea un proceso, como se va modifican-

7 0 % no s ab e p on er e n p rá cti ca l a s e m á n ti ca d e l a we b

do la estructura a medida que va escribiendo y etiquetando.

El 53% de los alumnos no es capaz de realizar un sitio web por su propia cuenta y recurre a plantillas gratuitas olvidando la propuesta de valor de ésta.

h t t p : // w w w . l a t e r c e r a . c o m / noticia/negocios/2011

29

“Las personas entran con el miedo de que el área web es difícil, y cuando toman el ramo, por un poco de flojera/desinterés no le dan el t i e m p o c o r r e s p o n d i e n t e a l t e m a .”

B a u t i s t a C a n c i n o To l e d o

30

“Es difícil para ellos entender un lenguaje nuevo, por que finalmente es aprender un idioma. Ahí fallan en la comprensión de este y c o m i e n z a e l d e s i n t e r é s p o r p a r t e d e e l l o s .”

César Godoy Aracena

31

man ej o y habilidades w eb

Encuesta Duoc UC h t t p : // w w w . l a t e r c e r a . c o m / noticia/negocios/2011

El mayor problema de los estudiantes se encuentra en el entendimiento de la semĂĄntica de html y la sintaxis de la hoja de estilos CSS siendo ĂŠsta la mĂĄs afectada y posible de tratar en el tiempo estimado de la asignatura.

32

PÚBLICO OBJETIVO

Caracte rísticas Nuestro público objetivo se encuentra en Duoc UC, son alumnos de diseño gráfico y se está cursando el cuarto semestre de la carrera. Éste pertenece al grupo social C2 - C3 mayoritariamente, cursa aproximadamente entre 6 y 8 ramos con un total de 24 módulos a la semana (45 minutos por módulo)..

El alumno en promedio pasa entre 2 a 3 horas diarias en la locomoción colectiva, y es parte de sus gastos semanales con un total de $1800 a la semana. Otros de sus ingresos los utiliza para la compra de ropa, tecnología, comida, vicios varios (carretes), etc.

Les gusta ver películas, series o programas de televisión, salen con amigos, tanto compañeros de cursos o fuera de su entorno educacional.

Por lo general el alumno de diseño gráfico solo dedica 8 horas a la semana para el estudio fuera del aula de clases, el resto de tiempo lo dedica a trabajos part-time o simplemente al ocio.

33

34

Perfil psicográfico

Lo Barnechea Quilicura Huechuraba Vitacura

Conchalí Renca Cerro Navia Pudahuel

Indepen dencia

Recoleta

Quinta Normal

La Reina

Lo Prado

Santiago

Estación Central

Cerrillos Maipú

Las Condes

Providencia

Ñuñoa

Lo Espejo

La Cisterna

La Granja San Ramón

Padre Hurtado

Peñalolén

Pedro San Macul Aguirre San Cerda Miguel Joaquín

La Florida

El Bosque

San José de Maipo La Pintana

San Bernardo

Puente Alto

Pirque

El público objetivo varía entre los “Exploradores” que les gusta probar nuevas ideas y experiencias, y por su contra parte los “Disconformes” que se guían por lo visual y las sensaciones físicas que les provocan, si no le interesa algo lo dejan de lado y siguen sus preferencias como salir, ver películas, ver a la polola, etc...

35

TIPOS DE PÚBLICO

P ú b l i c o S u s ta n c i a l Duoc uc cuenta con aproximadamente 1500 alumnos cursando la carrera de diseño gráfico divididos en 5 sedes que cuentan con la Escuela de Diseño Gráfico Profesional

P úb lic o Reactivo Cada año cursan la asignatura Prototipado web alrededor de 300 alumnos. Siendo esta asignatura que más se reprueban o donde más desertan los alumnos de la carrera.

P úb lic o A lcanzab le El público objetivo alcanzable son los alumnos de Diseño Gráfico de Duoc UC Sede San Carlos de Apoquindo, donde cada año se cursa la asignatura en 3 secciones de 20 alumnos cada una, siendo ésta donde se hará el proyecto piloto.

36

MATRIZ DE NECESIDADES Y SATISFACTORES Necesidades

ser

tener

Conciencia crítica,

entendimiento

receptividad, curiosidad, asombro,

Literatura, maestros, método, políticas

disciplina, intuición,

educativas

racionalidad

participación

creación

hacer

Investigar, educar, estudiar, experimentar, realizar, meditar, interpretar

estar

Ámbitos de interacción formativa: escuelas, universidades, academias, comunidades, familia.

Adaptabilidad,

Derechos,

Afiliarse, cooperar,

Ámbitos de Interacción participativa:

receptividad, solidaridad, convicción, entrega,

responsabilidad, obligaciones,

proponer, compartir, discrepar, acatar,

cooperativa, asociaciones, iglesias,

respeto, pasión

atribuciones, trabajo.

dialogar, acordar, opinar.

comunidades, vecindarios.

Pasión, voluntad, intuición, imaginación,

Habilidades, destrezas,

Trabajar, inventar, idear,

despreocupación, audacia,

método, trabajo

construir, diseñar.

autonomía, inventiva

Ámbitos de producción, talleres, espacios de expresión, libertad.

C o n c l u s i ó n d e m at r i z El alumno debe ser capaz de recibir los mensajes de una forma óptima y precisa, para eso se requiere hacer una investigación sobre la materia y las habilidades cognitivas de cada alumno para abarcar todos los métodos de enseñanza posibles. El alumno tendrá la responsabilidad de trabajar fuera del aula, ya sea individualmente o en grupo, se desarrollará una plataforma en la cual el alumno podrá ejercitar por su propia cuenta.

37

38

MANDANTES

Duoc Uc Sede San Carlos de Apoquindo será la institución que llevará a cabo el proyecto, el cual consistirá básicamente creación de un material de apoyo digital y en la entrega de material gráfico a alumnos que estén cursando el cuarto semestre de la carrera; el material se entregará en el inicio de clases, y tendrá como fin el dar a conocer la plataforma y así facilitar al estudiante el correcto uso de ésta, facilitando información de utilidad tanto académica como miscelánea, de manera que el estudiante se sienta preparado en el ámbito académico.

39

All in Chile será el mandante dado que este concurso financia proyectos a beneficio de alumnos y personal de Duoc UC. La categoría a la que ingresaría sería a Tecnologías donde el primer lugar recibe $1.000.000, el segundo lugar $400.000 y el tercero $200.000.

Este concurso busca entregar herramientas que potencien el emprendimiento, la creatividad y participación de los alumnos Duoc

UC mediante la proposición y desarrollo de proyectos con

el fin de promover competencias de trabajo en equipo, liderazgo, pro actividad y responsabilidad social, cultural y formativa en los estudiantes, ası como propiciar espacios para el desarrollo de proyectos relacionados con la experiencia, habilidades e intereses de los mismo estudiantes.

Se divide en cinco etapas: Etapa 0: Inscripción del proyecto, Etapa 1: Modelo de negocios, Etapa 2: Presentaciones efectivas, Semi final: Asignación de Coach y la Etapa final: Elevator Pitch (presentación del proyecto presencial).

40

Organizado por la Universidad Católica, SURA y El Mercurio, contempla una red de trabajo dentro con las mejores universidades del país.

El certamen invita a todos los estudiantes de pre y postgrado pertenecientes a universidades, centros de formación técnica e institutos profesionales de Chile, a postular sus ideas, tesis, investigaciones y proyectos, mediante la elaboración de un modelo de negocio, el cual se presenta mediante una comisión.

Jump Chile nace luego de cinco versiones del Concurso Jump UC de Ideas de Negocios, organizado por la PUC. El premio son $40 millones en efectivo, a repartir entre los seleccionados, y 10 cupos para participar en el E-Ship, el “barco del emprendimiento” que recorrerá todo Chile, hasta llegar a la Patagonia chilena. Además, el programa ofrece asesoría leal y de incubación, y apoyo en difusión y marketing del proyecto.

41

El concurso para emprendedores cuenta con siete etapas, la primera es la etapa donde un equipo de 1 hasta 5 alumnos postula su proyecto, la etapa numero dos el equipo trabajará en el entendimiento de una problemática y de qué manera ella afecta a un grupo de personas. La tercera etapa cuenta con el diseño de la propuesta de valor, la cuarta etapa el desarrollo de un modelo de negocios simple y en el diseño de experimentos. En la quinta etapa se preparan los prototipos para ser exhibidos en la feria de emprendimiento (los 25 mejores proyectos). En la semifinal los semifinalistas presentarán al público general sus ideas de negocios, prototipos y/o Productos Mínimos Viables. Y por último el día de la ceremonia final serán anunciados y premiados los 11 equipos ganadores.

Los premios a repartir son: 1° lugar (1 equipo): $6.000.000 Premio SURA a la sostenibilidad (1 equipo): $5.000.000 Categoría Plata (3 equipos): $4.000.000 c/u Categoría Bronce (5 equipos): $3.000.000 c/u Premio Latam (1 equipo): $3.000.000

42

43

ESTUDIO DE CASOS

AcÁmica Es una plataforma de cursos online gratuitos y en español, se presenta como el futuro de la educación superior en línea, a través de lo que han denominado micro aprendizaje ramificado, mediante el cual ofrecen cursos accesibles, dinámicos e interactivos, que pueden ser tomados en cualquier lugar y en cualquier momento.

Algunos de sus cursos son: Maquetando el monstruo web (HTML y CSS) Programación creativa con Processing Los cursos de Acámica son totalmente en línea, sin exigencias de horario ni calendario. Aunque cada curso tiene una duración y carga semanal recomendadas al momento de registrarnos, el usuario puede elegir su propia agenda. Los cursos se componen de vídeos y exámenes, y al finalizarlos obtendrán un certificado emitido por Acámica en nombre del profesor.

44

45

46

Observaciones acámica La gran ventaja de este curso es que está disponible todos los días del año y las 24 hrs del día, por lo tanto uno puede crear su propio horario de trabajo. Otra de las ventajas que al uno inscribirse al curso a través de facebook todos los avances se van guardando y uno puede continuar el curso desde el lugar que se desconectó la última vez.

La desventaja del curso es que pueden dejarlo de lado, pueden haber distracciones dado que se utiliza internet, los videos son muy largos y mucha teoría que a algunos alumnos no les interesa, la conección de internet puede fallar y al tener un error uno de igual forma puede continuar al siguiente sin tener en cuenta realmente cual es su error.

47

Estructura de contenidos Acรกmica Nivel 1.

HTML El lenguaje popular

Comenzando con CSS

Nivel 2.

HTML5

Web Semรกntica

CSS Intermedio

Nivel 3 .Jquery

48

Responsive Design

The complete Refere nc e vol.5 Es un libro dedicado a enseñar distintos lenguajes de programación, el vol. 5 trata exclusivamente sobre el lenguaje de etiquetado HTML y la hoja de estilos CSS. Es un libro muy completo con más de 600 páginas, y en idioma inglés. Enseña paso a paso como funcionan las distintas etiquetas, sus atributos y valores de cada uno de una forma muy detallada.

Muestra contenidos con tomas de pantalla, el gran problema de este, es que hay mucho contenido que no es tan necesario para un diseñador, es más, está pensado más para programadores, ya que cuenta con etiquetas innecesarias para un desarrollo web de diseñadores.

49

50

51

52

53

Estructura de contenidos THE C O M P L E T E R E F E R E N C E Vo l . 5 Part I Core Markup

Traditional HTML

HTML5

HTML and XHTML

Element Reference

Part II Core Style

Introduction to CSS

CSS Syntax and Property

Reference

54

CSS3 Proprietary And

Emerging Features

Acade mia mac pc

Estructura de contenidos 1. HTML

Atributos

Estructura básica de html

Párrafos y Encabezados

Listas

Datos tabulados

Codificación HTML

Imágenes

Formularios

Propiedades y Reglas

2. Selectores de CSS3

Estilos para Contenido CSS3

Estilos para Diagramación CSS3

3. HTML5

Etiquetas semánticas

Etiquetas de formulario

Audio y Video nativo

Diagramación semántica

55

Chineasy Chineasy es un método visual creado para hacer de la lectura de los caracteres chinos algo divertido y fácil. Mediante el aprendizaje de los caracteres más utilizados, los lectores aprenderán con rapidez los conceptos y palabras básicas, y ganarán seguridad y comprensión de la lengua y la cultura chinas. ¿Cómo funciona?

Int eriorizando primero los caracteres más sencillos a través de divertidas ilustraciones, aprenden a combinarlos y crear nuevas palabras y conceptos.

56

57

58

Interve nción ¿Para quién?

Alumnos que cursan segundo semestre del segundo año universitario en Duoc UC San Carlos de Apoquindo.

¿Qué?

Se desarrollará una herramienta comunicacional impresa que entregará los conocimientos necesarios, respecto a la producción de un sitio web.

¿Cómo?

Recopilando información respecto las etiquetas necesarias de HTML y atributos de CSS con un material didáctico para que el alumno sienta que avanza en un proceso de diseño web.

¿Cuándo?

En el período educacional donde se le enseña Prototipado Web y Taller Multimedia al alumno de Diseño Gráfico. Este comienza el mes de Agosto hasta el mes de Diciembre, donde luego tienen que presentar un examen que cuenta con la creación de un sitio web, y ser´´a presentado en ambas asignaturas..

¿Por que?

Aproximadamente el 35% de los alumnos que cursan la asignatura reprueban o desertan de éste curso, no pueden realizar un sitio web por su cuenta o no le dan la debida importancia a éste.

59

CONCLUSIONES

Conclusiones de la investigació n Duoc UC se preocupa de tener a sus estudiantes con todas sus competencias para salir al mercado totalmente preparados. Una de las áreas que más pide el mercado justamente es el diseño y prototipado web, es por eso que el proyecto abarcará esta asignatura que es la de mayor deserción.

Los alumnos de diseño no tienen una buena base matemática ni de ingles, siendo este lenguaje muy importante dentro del Prototipado Web. Otro punto importante del lenguaje utilizado en web, es la cantidad de etiquetas, atributos y valores, es por ésto que se necesita hacer un gran filtro y traducciones de los mismos.

Revisando todos los antecedentes antes vistos se ha llegado a la conclusión que una buena manera de enseñar este nuevo lenguaje es a través de una plataforma que cubra todas las habilidades cognitivas de los estudiantes.

60

Propuesta 61

62

ESTRUCTURA DE CONTENIDOS ¿ C o m o s e p r e s e n ta r á e l contenido?

La estructura de contenido estará basado en dos puntos claves de la asignatura: estas son HTML (HyperText Markup Language) y CSS (Cascading Style Sheets), necesarios para crear un portafolio web simple.

Los métodos que se utilizarán en esta plataforma serán a través de videos, ejercicio didáctico (arrastrar y soltar) y con un ejercicio más técnico (prototipado web).

Cada sección contará con un video explicativo sobre una etiqueta en específico, éste no durará más de 2 minutos para no aburrir al usuario. Será un video simple y con un contenido preciso para desarrollar los ejercicios siguientes.

Los ejercicios serán de dos tipos, uno didáctico donde se tendrán que encontrar sus pares, y otro de carácter técnico donde tendrá que escribir el código según las instrucciones.

En caso de duda del alumno, podrá retroceder para volver a ver el video sin afectar sus avances.

63

HTML Documento html

Texto e imágenes

Tipo de Documentos

Cabeceras

<!Doctype HTML>

Idioma <html charset=”UTF-8”>

<h1> - <h3>

Párrafos

Cajas

Div <div id=””> <div class=””>

Semántica

<p>

Mente <head>

Título de Documento <title>

Cuerpo

Listas <ol> <ul> <li>

Hipervínculos <a href=””>

<body>

Destacados <strong>

Notas <small>

Imágenes <img src=”” alt=””>

Cabecera <head>

Navegación <nav>

Barra lateral <aside>

Sección <section>

Artículo <article>

Dirección <address>

Pié de página <Footer>

64

CSS Texto

Familia Tipográfica font-family

Tamaño de Fuente font-size

Ancho de Fuente font-weight

Estilo de Fuente font-style

Cajas

Posiciones

Ancho de Caja

Posiciones

width

Position

Altura de Caja

Flote

height

float

Caja Envolvente

Capas

overflow

z-index

Disposición display

Decoración de Texto text-decoration

Alineación de Texto

Tipos de Medidas

text-align

Sangría text-indent

Estilo de Lista list-style

Altura de Línea line-height

Pixeles px

Porcentajes %

Medida de M em

65

66

OBJETIVOS

O bjetivo Ge nera l Motivar al alumno a través de materiales educativos que favorezcan los procesos de asimilación, acomodación y adaptación del aprendizaje.

Diseñar la planificación de una unidad de aprendizaje a la luz del Marco para la Buena Enseñanza que responda a los requerimientos curriculares vigentes.

O bjetivoS ES PECÍFICOS Crear una estructura de contenidos apta para el desarrollo de una web simple para el estudiante.

Conocer las habilidades cognitivas de cada alumno.

Entregar un material didáctico para la comprensión total de la asignatura en cursoy recursos referentes a ésta.

Desarrollar actividades fuera del aula de clases para el alumno

67

REFERENTES GRÁFICOS V i s ta s 3 D m a x

3D Max es un programa de modelado y renderizado 3D, utiliza distintos tipos de vista, una frontal, aérea Uno de los rescates de esta interfaz es sus distintas vistas, dado que facilita la comprensión de cada parte del código aparte de su vista en vivo, para así el alumno o usuario pueda ver como van cambiando los elementos según sus etiquetas, atributos y valores.

68

La función del semáforo

El semáforo es un dispositivo de señalización óptica que se utiliza para mandar señales, es por esto que se rescatarán las funciones de éste, dado que para continuar de un tema al siguiente tiene que cumplir una cierta cantidad de requisitos para seguir avanzando en el contenido.

69

C o deacade m y

Codeacademy es una plataforma de aprendizaje de programaci贸n, tanto de web, como java, y otros. Los que se rescata de este referente es su diagramaci贸n, como dividen la pantalla para colocar todas las herramientas necesarias para la realizaci贸n de ejercicios.

Consta con un glosario en la parte superior izquierda que muestra los avances que uno lleva realizado, y en su p谩gina inicial, muestra el porcentaje de los cursos realizados, cuales uno ha terminado etc...

70

71

72

MAPA CONCEPTUAL Lenguaje

Cognición

Didáctica

Rea lizació n

Lenguaje: Sistema de símbolos y señales que permite a las personas la composición y comprensión de los mensajes.

Cognición: conocimiento por medio de la percepción y los órganos del cerebro.

Didáctica: estudia las técnicas y métodos de enseñanza.

Realización: Logro efectivo de las aspiraciones o los objetivos vitales de una persona, y satisfacción y orgullo que siente por ello..

73

PROYECTO

El proyecto trata de una plataforma en la cual el estudiante podrá poner en práctica todos lo aprendido en la asignatura, si bien con esto no logrará comprender un 100% la materia, éste es un material de apoyo a la clase Prototipado Web. Es de suma importancia la asistencia a clases, ya que, si alguien tiene una duda en el momento, esta puede ser resuelta inmediatamente por el profesor, y así facilitar las tareas impuestas en clases.

La plataforma estará montada en el sitio de Duoc UC en un subdominio, esto se debe a que uno se inscribirá a través del login de alumno duoc (login@alumnos.duoc.cl) y de igual forma el profesor para ver los avances de sus alumnos. La idea de la plataforma es también conocer el progreso de los alumnos, donde están fallando, que les cuesta más, quienes realmente trabajan y que se debe hacer para motivar de mejor forma al alumno.

El método de enseñanza se explicará en las siguientes páginas.

74

G a m a c r o m รกt i c a

COLORES

Pantone Black C K: 100% RGB: 0 0 0

Pantone 7549 C CMYK: 63% 47% 40% 28% RGB: 92 102 112

Pantone 152 C CMYK: 63% 47% 40% 28% RGB: 234 114 0

Pantone 363 C CMYK: 74% 23% 100% 7% RGB: 76 139 43

Pantone 431 C CMYK: 2% 64% 100% 0% RGB: 255 83 0

Pantone 2746 C CMYK: 100% 92% 17% 3% RGB: 16 30 142

Pantone 485 C CMYK: 1% 95% 94% 0% RGB: 225 25 26 75

COLORES SEGÚN EVA HELLER

Dinamismo

Moderno

Inteligencia

Que implica movimiento o lo produce.

Que pertenece al presente, al tiempo actual.

Facultad de la mente que permite aprender, entender, razonar, tomar decisiones y formarse una idea determinada de la realidad.

O bj e tividad

Il u minació n

Creencia de que existe una realidad que puede ser percibida

Saber o conocimiento que, según ciertas creencias, se alcanza por intervención divina.

Alto, no avanzar, peligro

Precaución, falta hacer... trabajando en...

76

Positivo, avanzar, siguiente, seguro

TIPOGRAFÍAS

Encode Sans Encode Sans será la tipografía utilizada para texto continuo, gracias a su legibilidad, su simplesa, su gran familia tipográfica (desde THIN a BLACK), es una tipografía moderna y especialmente diseñada para pantalla.

Light

AaBbCcDdEeFfGgHhIiJjkLlMmNn Ñ ñ O o P p Q q R r S sTt U u V v W w X x Y y Z z 1234567890 !”#$%&/()=’¿¡?

Regular

AaBbCcDdEeFfGgHhIiJjkLlMmNn Ñ ñ O o P p Q q R r S sTt U u V v W w X x Y y Z z 1234567890 !”#$%&/()=’¿¡?

Bold

AaBbCcDdEeFfGgHhIiJjkLlMmNn Ñ ñ O o P p Q q R r S sT t U u V v W w X x Y y Z z 1234567890 !”#$%&/()=’¿¡?

77

code pro Code pro es otra tipografía para pantalla e impresos, especialmente diseñada para titulares, es una tipografía de palo seco, moderna y de igualforma simple, se utilizará con un interletrado de 200 para darle más aire aún representando las pausas el descanso y la buena posición dentro de la pantalla. De igual forma que Encode Sans cuenta con una gran familia lo que la hace muy versatil.

78

Light

Abcdefghijklmnñ opqrstuv wx yz 1 23 45 6789 0 !”#$%&/()=’¿¡?

regular

Abcdefghijklmnñ opqrstuvwxyz 123 456789 0 !”#$%&/()=’¿¡?

bold

Abcdefghijklmnñ opqrstuvwxyz 1234567890 !”#$%&/()=’¿¡?

LOGOTIPO

Como podemos observar más arriba los colores del logotipo representan la tecnología, la inteligencia, la comprensión. El cerebro de la base del entendimiento, el ejercicio mental, los parámetros a seguir, el conocimiento y las habilidades cognitivas anteriormente señaladas en la etapa de investigación. También se muestra una tipografía moderna y de pantalla dado que el proyecto se basa justamente en una plataforma digital online.

El logotipo se compone con 3 palabras, crea, creala y lab dado que esto es lo que pretendemos hacer con el estudiante, lograr crear un sitio con las etiquetas y propiedades basicas de HTML y CSS. Un Círculo se cierra sobre sí mismo, y por ello representa la unidad, lo absoluto, la perfección. Es símbolo del cielo en relación a la tierra, de lo espiritual en relación a lo material. Por ello se le relaciona con la “protección” y, así, tenemos los círculos mágicos, los anillos de poder, las coronas reales o los cinturones que nos hacen invisibles. Si bien el círculo representa el cielo, lo celestial, Dios o el Alma, se usa en lo terrenal como representación de la perfección de Dios en la tierra, de su manifestación arquetípica en la materia.

Diana y Karolus

79

Grilla

GrIS

N e g at i v o

80

PROCESOS DE DISEÑO

Etiquetas con atributos de Texto y Lineales

CREANDO UN PÁRRAFO CON HTML

¶

<p>, <strong>, <em>, <a>, <li>, H1 hasta H6

La etiqueta <p> se utiliza para representar un párrafo.

Para dar énfasis a un texto se utiliza la etiqueta <strong>

<p> Tu párrafo de texto va aquí.</p>

<p> Tu <strong>párrafo</strong> de texto va aquí.</p>

ESTILOS PARA TEXTO EN CSS font-family

Serif

Constantia, , "DejaVu Serif", Georgia, serif

Sans Serif

Gotham, “Helvetica”, Arial, sans-serif

HTML <p>Y, viéndole <strong>Don Quijote</strong> de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, <strong>Sancho</strong>, que no es un hombre más que otro si no hace más que otro.</p>

Text-align

font-weight

CSS p{ font-family:serif; font-weight:100; text-align:left; }

Left

center

right

justify

www Y, viéndole Don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.

La primera propuesta gráfica fue una infografía pero esta había que simplificarla y no daba a conocer un resultado sobre el aprendizaje del alumno, y se necesitaría tapizar una sala con infografías por la cantidad de propiedades de HTML y CSS

81

ICONOS Cada color en la iconografía tendrá un significado como se muestra en las siguientes imágenes, el rojo significará que uno no puede avanzar dado un error, el amarillo que un ejercicio está en proceso, el verde correcto puede avanzar el azul para HTML y el naranjo para CSS

E r r o r n o p u e d e s a va n z a r

Ejercicio en proceso

E j e r c i c i o c o m p l e ta d o p u e d e s continuar

A li n eació n a l a izquie r da

E t i q u e ta d e e n c a b e z a d o h 1

82

DIAGRAMACIÓN

e nt r a r

Como la mayoría de los sitios web, esta se trabajará a 12 columnas, esto facilita y organiza de mejor forma el contenido.

83

1.1 Encabezados y Párrafos

HTML

1.2 Listas e Hipervínculos

css

E sta d o

1 <!DOCTYPE html>

1

2 <html

2

3 <Head>

3

4 <title> Título del Proyecto </title>

4

5 </head>

5

6 <body>

6

7

<h1> Don Quijote </h1>

7

8

<p> Y, viéndole don Quijote de aquella manera, con

8

muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya. </p>

V I STA n av e g a d o r

Don Quijote Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya.

E t i q u e ta s d e t e x t o

9 </body>

9

10 </html>

10

Las etiquetas de texto son todas aquellas que contienen caracteres, en estas se encuentran las etiquetas de encabezados o títulos que van desde el <h1> al <h6> y las de párrafo que se caracterizan por estar encerradas con la etiqueta <p> I n st r u c c i o n e s 1. Dentro de las etiquetas <body> y </body> crear un encabezado con la etiqueta <h1> y la cierras con </h1> dentro de la misma línea de la hoja.

2. En la siguiente línea crear un párrafo aplicando la etiqueta <p> y

V o lv e r a v e r v i d e o

r e s u lt a d o

68.75%

r e i n i c i a r ta r e a

G u a r d a r y c o nt i n u a r

Las páginas interiores del sitio web utilizarán el 100% del ancho de la pantalla con un margen de 2% por lado, dentro de esta división estará estructurada por 6 columnas cada una.

84

1. HTML 1.1 Encabezados y Párrafos

H T1.2 M Listas L e Hipervínculosc s s 1.3

E sta d o

mágenes

1 <!DOCTYPE html> 2. CSS

1

2 <html

2

3 <Head>1.1 Estilos de párrafo

3

4 <title> Título del Proyecto </title> 1.2 nterlineado

4

5 </head>1.3

lineaci n

5

6 <body>1.4 Color

6

7

<h1> Don Quijote </h1>

7

8

<p> Y, viéndole don Quijote de aquella manera, con

8

muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto

VIS

D

Y, vi dijo Tod el tie el bi bien

ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya. </p> 9 </body>

9

10 </html>

10

Las

encu

párr

V o lv e r a v e r v i d e o

68.75%

r e s u lt a d o

Las secciones del sitio web no podrán tener más de 5 columnas de ancho, y no se podrá trabajar en un dispositivo menor a la resolución de un tablet horizontal (1024px de ancho).

85

P l ata f o r m a d i g i ta l

usu a r io

c l av e

e nt r a r

1.1 Encabezados y Párrafos

HTML

1.2 Listas e Hipervínculos

css

E sta d o

1 <!DOCTYPE html>

1

2 <html

2

3 <Head>

3

4 <title> Título del Proyecto </title>

4

5 </head>

5

6 <body>

6

7

<h1> Don Quijote </h1>

7

8

<p> Y, viéndole don Quijote de aquella manera, con

8

muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto

V I STA n av e g a d o r

Don Quijote Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya.

ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya. </p>

E t i q u e ta s d e t e x t o

9 </body>

9

10 </html>

10

Las etiquetas de texto son todas aquellas que contienen caracteres, en estas se encuentran las etiquetas de encabezados o títulos que van desde el <h1> al <h6> y las de párrafo que se caracterizan por estar encerradas con la etiqueta <p> I n st r u c c i o n e s 1. Dentro de las etiquetas <body> y </body> crear un encabezado con la etiqueta <h1> y la cierras con </h1> dentro de la misma línea de la hoja.

2. En la siguiente línea crear un párrafo aplicando la etiqueta <p> y

V o lv e r a v e r v i d e o

r e s u lt a d o

68.75%

r e i n i c i a r ta r e a

G u a r d a r y c o nt i n u a r

Siguiendo trabajando el tema se decidió por no sacar al alumno del computador, dado que web es netamente un lenguaje digital, y que por cantidad de contenido era mejor crear una plataforma digital en la cual el alumno fuera ejercitando paso a paso los contenidos que pasaban en clases, pero aún así no se estaban cubriendo todas las metodologías necesarias de enseñanza en el alumno.

86

V i d e o ( E ta pa 1 )

Don Quijote

1 <!DOCTYPE html> 2 <html 3 <Head>

Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya.

4 <title> Título del Proyecto </title> 5 </head> 6 <body> 7

<h1> Don Quijote </h1>

8

<p> Y, viéndole don Quijote de aquella manera,

con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí

se sigue que, habiendo durado mucho el mal, el bien está ya. </ p> 9 </body> 10 </html>

A la plataforma se irán agregando videos en los cuales en el lado izquierdo se irá mostrando que etiquetas se van utilizando, mientras en el lado derecho se irán mostrando una vista en vivo de lo que ocurre según el lenguaje empleado

87

E j e r c i c i o d i d á c t i c o ( E ta pa 2 )

E TI Q UE TA

C ONTENIDO

HTML

Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el

Don Quijote de la Mancha

1 2 3 4 5 6 7 8

9 10

<DOCTYPE HTML!> <html charset:”UTF-8”> <head> <tittle> </title> </head> <body> < h1>Don Quijote de la Mancha</h1> < p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el.</p> </body> </html>

VIST A PREVIA

Esta es la etapa del ejercicio más didáctico, donde el alumno debe tomar la etiqueta y arrastrarla a su caja par, si tiene dudas puede volver a ver el video explicativo, ver la vista previa del desarrollo realizado y una vez todo esté OK, podrá seguir con el siguiente contenido.

88

E j e r c i c i o T é c n i c o ( E ta pa 3 )

E t i q u e ta s d e t e x t o

Las etiquetas de texto son todas aquellas que contienen caracteres, en estas se encuentran las etiquetas de encabezados o títulos que van desde el <h1> al <h6> y las de párrafo que se caracterizan por estar encerradas con la etiqueta <p>

I n st r u c c i o n e s 1. Dentro de las etiquetas <body> y </ body> crear un encabezado con la

La etapa tres es una de las más importante, acá será donde el alumno debe seguir las instrucciones y escribir el código, la importancia de esta es aplicar todos los conocimientos anteriores, ya que, esta es la forma de trabajar dentro de cualquier editor de texto para crear un sitio web.

89

Pres upuesto El trabajo realizado consta de 4 grandes etapas, una de estas es la investigación, continuando por la etapa de la estructura de contenidos que tendrá la plataforma, el diseño de ésta y finalizando con la programación derivada a un ingeniero en programación.

Los costos requeridos para el proyecto son: Investigación $1.156.000 1. Investigación del caso

2. Análisis de la investigación 3. Investigación del público objetivo 4. Estudio de casos relacionados Gráfica y Diseño

$1.504.000

5. Estructura de contenidos 6. Diagrama de flujo de la plataforma 7. Iconografías 8. Videos 9. Wireframe 10. Mockup 11. Prototipado Programación

$2.504..000

12. Login 13. Base de datos Dando un total de:

90

$5.164.000

Futu ro de l p roy ecto El proyecto continuará a partir de la etapa de diseño donde se calcularán 5 horas diarias por los días hábiles que correspondan a partir del mes de Agosto.

Diseño (Sitio Web) 1. Estructura de contenidos

12 horas

2. Realización de ejercicios

96 horas

3. Diagrama de flujo

24 horas

4. Iconografía

48 horas

5. Wireframe

24 horas

6. Mockup

48 horas

7. Prototipado

48 horas

48 horas

9. Realización de videos

96 horas

10. Iconografía

48 horas

11. Wireframe

24 horas

12. Mockup

48 horas

13. Prototipado

48 horas

14. Programación

96 horas

Dando un total de:

708 horas

Diseño (Videos) 8. Story Board

Por lo tanto el proyecto se debería llevar a cabo en 141 días hábiles.

91

PROYECTO DE TÍTULO: PROTOTIPA, Web para Diseñadores POR: Ricardo A. Vargas Vizcaya PROFESORES GUÍAS: Marta Kiverstein Gurovich Andrés Correa Illanes 92