Titulo Bones by Ricardo Vargas

PROYECTO DE TÍTULO - BONES

PROYECTO DE TÍTULO PROFESORES: MARTA KIVERSTEIN ANDRÉS CORREA ALUMNO: RICARDO A. VARGAS VIZCAYA

PROYECTO DE TÍTULO - BONES

ÍNDICE ANTECEDENTES................. 7 Abstract.............................................................................................................9

La Importancia de un Sitio Web.................................................. 24

Educación...................................................................................................... 11

Diseño Web.................................................................................................26

Sistema Educacional en Chile........................................................ 11

Importancia del Diseño Web......................................................... 27

Vida Universitaria.....................................................................................12

Campo Laboral.........................................................................................28

Aprender a Conocer..............................................................................15

Ofertas de Empleo.................................................................................29

Metodologías y Estilos de Aprendizaje.................................. 16

Problemática.............................................................................................. 32

Clasificaciones en Relación con los Estilos

Encuesta a Estudiantes de Diseño............................................ 32

de Aprendizaje...........................................................................................17

Manejo y Habilidades Web.............................................................. 35

Características Principales de los Estilos

Público Objetivo.......................................................................................36

de Aprendizaje.......................................................................................... 18

Perfil Psicográfico...................................................................................38

Educación Presencial.......................................................................... 19

Matriz de Necesidades.......................................................................40

Educación Digital....................................................................................20

Mandantes................................................................................................... 42

Internet.............................................................................................................21

Acámica......................................................................................................... 47

Acceso a Internet en Chile................................................................21

Observaciones Acámica....................................................................50

Internet y Educación............................................................................. 22

Estructura de contenidos acámica............................................51

Tecnologías................................................................................................. 23

The Complete Reference vol.5..................................................... 52

Tecnologías de la Información

Estructura de Contenidos ............................................................... 57

y Comunicación....................................................................................... 23

Chineasy........................................................................................................58

Habilidades TIC en la Educación................................................ 23

Intervención................................................................................................ 61 Conclusiones..............................................................................................62

PROPUESTA. . .....................63 Presentación de Contenido............................................................65

Dropdown Menú................................................................................... 104

Objetivos........................................................................................................69

Buscador Activo.................................................................................... 104

Referentes Gráficos................................................................................71

Tooltips........................................................................................................ 105

Conceptos ................................................................................................... 77

Advertencias............................................................................................ 105

Proyecto.........................................................................................................78

Barra de Progreso............................................................................... 105

Color.................................................................................................................79

Pestañas..................................................................................................... 105

Tipografía...................................................................................................... 81

Botones....................................................................................................... 106

Logo..................................................................................................................82

Grilla............................................................................................................... 106

Propuestas Iniciales..............................................................................84

Vista Previa............................................................................................... 106

Proyecto Bones........................................................................................92

Test de Usuario.......................................................................................101

Selección....................................................................................................107

Kit UI................................................................................................................102

Ordenar.........................................................................................................107

Párrafos........................................................................................................102

Background...............................................................................................107

Destacados................................................................................................103

Completar...................................................................................................107

Iconografías...............................................................................................103

Mockups..................................................................................................... 108

Botones de Chequeo........................................................................ 104

Futuro del Proyecto............................................................................. 113

Barra Navegación................................................................................ 104

Presupuesto.............................................................................................. 114

Buscador.................................................................................................... 104

Agradecimientos................................................................................... 115

ANTECEDENTES

PROYECTO DE TÍTULO - BONES

ABSTRACT

Los alumnos de Diseño Gráfico de Duoc UC tienen que cursar la asignatura Prototipado Web en su cuarto 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.

PROYECTO DE TÍTULO - BONES

EDUCACIÓN

SISTEMA EDUCACIONAL EN 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 innovación, 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.

http://www.cinda.cl/wp-content/ uploads/2014/02/El-rol-de-las-universidades-en-el-desarrollo-cient%C3%ADfico-y-tecnol%C3%B3gico-2010.pdf

VIDA UNIVERSITARIA La 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. 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.

http://www.ub.edu/dppsed/fvillar/principal/ pdf/proyecto/cap_15_contexto_psicopedag.pdf

PROYECTO DE TÍTULO - BONES

“Si buscas resultados diferentes, no hagas siempre lo mismo.”

Albert Einstein

PROYECTO DE TÍTULO - BONES

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 el profesor sea un experto en la materia que imparte.

http://www.ub.edu/dppsed/fvillar/principal/ pdf/proyecto/cap_15_contexto_psicopedag.pdf

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

http://educrea.cl/estilos-y-metodologias-de-aprendizaje/

PROYECTO DE TÍTULO - BONES

CLASIFICACIONES EN RELACIÓN CON 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. 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.

http://educrea.cl/estilos-y-metodologias-de-aprendizaje/

CARACTERÍSTICAS PRINCIPALES DE LOS ESTILOS DE APRENDIZAJE Activo

Reflexivo

Retienen y comprenden mejor la informa-

Retienen mejor la información después de

ción después de aplicarla y experimentarla

que toman un tiempo para procesarla.

en acciones propias o explicando a otras personas lo que han aprendido.

Intuitivo Prefieren la innovación y las teorías. Son

Sensorial

hábiles para captar conceptos nuevos e

Prefieren los hechos y datos específicos

ideas amplias. No presentan problemas

y concretos. Son buenos para memori-

con el uso de símbolos y abstracciones,

zar y resuelven problemas con métodos

relacionándolos con conocimientos y ex-

estándar.

periencias previas.

Visual

Verbal

Recuerdan mejor lo que ven; imágenes,

Recuerdan en gran parte lo que escuchan.

esquemas, diagramas, películas, demos-

Se benefician de la discución y el análisis

traciones. Tienden a olvidar con facilidad

y aprenden con facilidad al explicar los

las palabras e ideas que solo se manifies-

conceptos a otras personas. Aprenden con

tan en forma verbal.

eficacia mediante la lectura.

Secuencial

Global

Es más fácil aprender a través de un

Aprenden en forma general. Al principio

material que presenta la información de

cuando no logran captar la idea general

manera lógica y ordenada. Solucionan los

son incapaces de resolver los problemas.

problemas de manera lineal y paso a paso.

Sin embargo, una vez que han logrado

Pueden trabajar con secciones de material

comprender, ven la globalidad en un nivel

sin comprender el concepto completo.

que los demás no son capaces de alcanzar. Son muy creativos.

http://educrea.cl/ estilos-y-metodologias-de-aprendizaje/

PROYECTO DE TÍTULO - BONES

EDUCACIÓN PRESENCIAL 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 emplea la tecnología. Ventajas: • Existe mayor vinculo maestro-alumno y, en consecuencia, mayor comunicación y mayor contacto humano, evitando así el aislamiento humano. • No se invierte tiempo en fallas técnicas, por ejemplo de audio y 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. • 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.

http://educrea.cl/estilos-y-metodologias-de-aprendizaje/

EDUCACIÓN DIGITAL 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. • 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.

http://educrea.cl/estilos-y-metodologias-de-aprendizaje/

PROYECTO DE TÍTULO - BONES

INTERNET

ACCESO A INTERNET EN CHILE 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 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 positiva. En ese sentido, el uso que se le dé al

84 de cada 100 habitantes tiene acceso a internet en Chile

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

100% de los estudiantes tiene acceso a internet

http://www.subtel.gob.cl/aumentan-los-chilenos-conectados-a-internet-y-cifra-llega-a-84-de-accesos/

INTERNET Y EDUCACIÓ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, 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. http://www.uclm.es/profesorado/ricardo/webnntt/bloque%202/internet.htm

PROYECTO DE TÍTULO - BONES

TECNOLOGÍAS TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓ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 EN LA EDUCACIÓ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 año 2008. Ambos insumos fueron utilizados para el desarrollo del Sistema de medición de competencias TIC en estudiantes, SIMCE TIC, aplicado por http://www.subtel.gob.cl/aumentan-los-chilenos-conectados-a-internet-y-cifra-llega-a-84-de-accesos/

primera vez a nivel nacional en el mes de noviembre del año 2011.

LA IMPORTANCIA DE UN SITIO WEB 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

86% de las empresas cuentan con un Sitio Web

el valor de mercado de las empresas. Es de suma importancia el poder alcanzar a sus clientes de una 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 que también no solamente basta con tener una “página” 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.

Dirección pro-chile http://www.eluniversal.com. mx/articulos/51037.HTML 25 Noviembre 2012 Importancia de un Sitio Web. http://www. tweaco.com/es/Noticias/Noticia?nid=540 5 Noviembre 2014

PROYECTO DE TÍTULO - BONES

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

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 usuarios encontrar lo que están buscando.

Diseño Web http://es.calameo.com/ books/001577170efd8119a3df0 10 febrero 2014

PROYECTO DE TÍTULO - BONES

IMPORTANCIA DEL DISEÑO WEB 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.

CAMPO LABORAL 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.

Diseño Web http://es.calameo.com/ books/001577170efd8119a3df0 10 febrero 2014

PROYECTO DE TÍTULO - BONES

OFERTAS DE EMPLEO 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 requieren conocimiento de e-mailing, Marketing Digital o Diseño Web, es por eso, la importancia de la asignatura Prototipado Web.

Un 65% de los empleos requieren conocimiento en sitios web

http://www.laborum.cl/empleos-busquedaext-disenador-grafico.HTML

“El Diseñador, a diferencia del artista, no es normalmente la fuente de los mensajes que comunica, sino, su intérprete.” Jorge Frascara

PROYECTO DE TÍTULO - BONES

“El quiebre está en la base educacional. El aprender a programar es un cambio de paradigma, es otro idioma, requiere de otra estructura mental.” Natalia Muñoz Carpintero Diseñadora // Universidad de Chile Solufor B - UX

PROBLEMÁTICA

ENCUESTA REALIZADA A 100 ESTUDIANTES DE DISEÑO 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.

Un 4% de los chilenos saben Inglés

Uno de los principales problemas en el aprendizaje HTML y CSS es el idioma de su sintáxis. En la actualidad, solo un 4% de los chilenos saben realmente inglés, por lo tanto, integrar otro lenguaje que utiliza una sintáxis técnica, hace que

57% de los alumnos aprueban la asignatura sin problemas

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 frustraciones tendiendo a rechazar la asignatura.

60% no puede realizar una web por su cuenta

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, es decir, como

70% no recuerda nada de lo pasado en Prototipado Web

se va modificando la estructura del Sitio Web a medida que va escribiendo y etiquetando los elementos. 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.

PROYECTO DE TÍTULO - BONES

“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 tiempo correspondiente al tema.” Sebastián Blau Diseñador Gráfico // UTEM AFP Capital - UX

“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 comienza el desinterés por parte de ellos.” Cesar Godoy Aracena Diseñador Gráfico // Duoc UC BCI - Comunicaciones Internas

PROYECTO DE TÍTULO - BONES

MANEJO Y HABILIDADES WEB

El mayor problema de los estudiantes se encuentra en el entendimiento de la semántica de HTML y la sintáxis de la hoja de estilos CSS, siendo ésta la más afectada y posible de tratar en el tiempo estimado de la asignatura. Encuesta Duoc UC http://www.latercera.com/noticia/negocios/2011

PÚBLICO OBJETIVO

CARACTERÍ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. 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.

PROYECTO DE TÍTULO - BONES

PERFIL PSICOGRÁFICO

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.

PROYECTO DE TÍTULO - BONES

PÚBLICO SUSTANCIAL Público Sustancial Diseñadores Gráficos que quieran introducirse en el tema web y aprender los fundamentos de HTML y CSS, para así complementar sus competencias en el ámbito profesional. Público Alcanzable Cada año cursan la asignatura Prototipado Web alrededor de 300 alumnos. Siendo esta asignatura la que más se reprueba, o donde más desertan los alumnos de la carrera. Público Reactivo 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.

MATRIZ DE NECESIDADES

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.

MANDANTES

Duoc Uc Sede San Carlos de Apoquindo será la institución que llevará a cabo el proyecto, el cual consistirá básicamente en la creación de un material de apoyo digital y en la entrega de materiales gráficos 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, entregando información de utilidad tanto académica como miscelánea, de manera que el estudiante se sienta preparado en el ámbito académico.

PROYECTO DE TÍTULO - BONES

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 también 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).

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.

PROYECTO DE TÍTULO - BONES

El concurso para emprendedores cuenta con siete etapas; la primera es la etapa donde un equipo de 1 hasta 5 alumnos postula su proyecto. En 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 los alumnos 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

PROYECTO DE TÍTULO - BONES

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.

PROYECTO DE TÍTULO - BONES

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 es que uno puede inscribirse al curso a través de Facebook, y todos los avances quedan guardados, pudiendo 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 posee demasiada teoría que a algunos alumnos no les interesa. La conexión de internet puede fallar, y al tener un error, de igual forma se puede continuar al siguiente, sin tener en cuenta realmente cuál es su error.

PROYECTO DE TÍTULO - BONES

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

Responsive Design

THE COMPLETE REFERENCE 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 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, sin embargo 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.

PROYECTO DE TÍTULO - BONES

ESTRUCTURA DE CONTENIDOS THE COMPLETE REFERENCE VOL. 5 Nivel 1.

Traditional HTML

HTML5

HTML and XHTML

Element Reference

Nivel 2.

Introduction to CSS

CSS Syntax and Property

Reference

CSS3 Proprietary And

Emerging Features

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 china. ¿Cómo funciona? Interiorizando primero los caracteres más sencillos a través de divertidas ilustraciones; aprenden a combinarlos y crear nuevas palabras y conceptos.

PROYECTO DE TÍTULO - BONES

INTERVENCIÓN ¿Para quién?

Alumnos que cursan segundo semestre del segundo año de Diseño Gráfico Profesional en Duoc UC San Carlos de Apoquindo.

¿Qué?

Se desarrollará una herramienta comunicacional digital que entregará los conocimientos necesarios, respecto a la producción de un Sitio Web.

¿Cómo?

Recopilando información respecto a las etiquetas necesarias de HTML y los 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 desde el mes de Agosto hasta el mes de Diciembre, donde posteriormente tienen que presentar un examen que cuenta con la creación de un Sitio Web, y será presentado en ambas asignaturas..

¿Por qué?

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.

CONCLUSIONES Duoc UC se preocupa de entregar las competencias necesarias a los alumnos 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 de 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.

PROPUESTA

PROYECTO DE TÍTULO - BONES

PRESENTACIÓN DE CONTENIDO La estructura de contenido estará basada 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 ejercicio didáctico (arrastrar y soltar), selección múltiple, prototipar con una interfaz semejante a Illustrator y con un ejercicio más técnico (etiquetar y generar contenido). Cada sección contará con un texto explicativo sobre una etiqueta en específico, una vista previa para que el alumno vaya viendo como afectan las etiquetas al texto del HTML. Por otra parte, existirá una barra de experiencia para que así se pueda ver un progreso sobre lo aprendido y evitar la frustración del “no avanzo”, “no puedo”, “no me resulta”, etc. Cada ejercicio tendrá una sugerencia para ayudar al alumno, si es necesario también podrán utilizar la barra de búsqueda para ir a contenidos anteriores y así facilitar, más aún, el desarrollo de los distintos ejercicios que se van presentando. En caso de que el alumno no recuerde nada, éste podrá volver atrás, comenzar los ejercicios desde 0, si estima conveniente, o simplemente repasar algunos contenidos que no recuerda bien.

HTML Introducción ¿Qué es HTML? Estructura básica de un documento html Creando tu primera página con HTML Examen módulo 1

Conceptos Básicos de HTML Párrafos Formato de texto Encabezados, líneas, comentarios Elementos HTML Imágenes Hipervínculos Listas Atributos Elementos inline y block Examen módulo 2

HTML5 Introducción a HTML 5 Estructura de páginas en HTML5 Header, nav y footer Article, section y aside Examen módulo 3

Es de suma importancia mencionar que una vez que el diseñador termine una sección del curso podrá pasar a la siguiente etapa. Éste no podrá jamás saltarse un curso, pero si podrá retroceder para tener las ideas y materias cursadas más claras.

PROYECTO DE TÍTULO - BONES

OBJETIVOS

OBJETIVOS GENERALES Lograr que el alumno desifre por su cuenta el lenguaje de etiquetado HTML y así obtenga los conocimientos básicos para la creación de un Sitio Web..

OBJETIVOS ESPECÍFICOS Generar contenido didáctico de la asignatura para el alumno, que abarque en gran medida las habilidades cognitivas de cada uno. Desarrollar una herramienta que apoye fuera del aula de clases al alumno de forma entendible, aprovechando las herramientas, terminos e iconografía de diseño que ya conocen. Ejercitar a través de la aplicación el contenido pasado en clases y en los tutoriales de la aplicación web.

PROYECTO DE TÍTULO - BONES

REFERENTES GRÁFICOS

SPOTIFY Uno de los referentes gráficos es Spotify, dado que es una plataforma muy utilizada por los universitarios, profesores y público en general (entre 16 - 40 años). Se rescatará de Spotify la diagramación que cuenta con dos aside, uno al lado derecho y el otro al izquierdo, donde en un lugar estará el tutorial y en el otro la vista previa, estando al centro los ejercicios del tutorial.

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.

PROYECTO DE TÍTULO - BONES

3D MAX 3D Max es un programa de modelado y renderizado 3D. Utiliza distintos tipos de vista: una frontal, aérea y una lateral. 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 que así el alumno o usuario pueda ver como van cambiando los elementos según sus etiquetas, atributos y valores.

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

PROYECTO DE TÍTULO - BONES

CONCEPTOS

COGNICIÓN Conocimiento por medio de la percepción y los órganos del cerebro.

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

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

DIDÁCTICA Estudia las técnicas y métodos de enseñanza.

PROYECTO

El proyecto trata de una plataforma en la cual el estudiante podrá poner en práctica todo lo aprendido en la asignatura. Si bien con esto no lograra comprender un 100% la materia, éste dará un 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 podrá 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.

PROYECTO DE TÍTULO - BONES

COLOR

R: 103 G: 160 R: 183 H ex : # 6 7A0 B 7

R: 62 G: 101 R : 17 1 H ex : # 3 E 6 5 A B

R: 94 G: 63 R: 90 H ex : # 5 E 3 F5 A

R: 214 G: 126 R: 77 H ex : # D 6 7 E 4 D

R: 132 G: 202 R: 203 H ex : # 8 4 CAC B

R : 75 G: 162 R: 218 H ex : # 6 7A0 B 7

R: 153 G: 103 R: 167 H ex : # 9 9 6 7A7

R: 238 G: 198 R: 114 H ex : # E EC 6 7 2

R: 144 G: 41 R: 48 H ex : # 8 E 2 8 3 0

R : 70 G: 161 R: 113 H ex : #4 6A 17 1

Los colores seleccionados son bajos en saturación, para evitar el estrés del alumno. Los tonos azules representan la serenidad, tranquilidad, relajación. Los tonos anaranjados representan la diversión, el dinamismo, lo moderno y juvenil. Finalmente, los tonos morados, hacen referencia a la paz interior, la divinidad, el bienestar personal.

DEGRADADOS

GRISES

R: 242 G: 242 R: 242 H ex : # f 2 f 2 f 2

R: 229 G: 229 R: 229 H ex : # e 5 e 5 e 5

R: 204 G: 204 R: 204 H ex : # c c c c c c

R : 17 8 G : 17 8 R : 17 8 H ex : # b 2 b 2 b 2

R: 153 G: 153 R: 153 H ex : # 9 9 9 9 9 9

R: 128 G: 128 R: 128 H ex : # 7 f 7 f 7 f

R: 102 G: 102 R: 102 H ex : # 6 6 6 6 6 6

R: 77 G: 77 R: 77 H ex : #4 c 4 c 4 c

R: 51 G: 51 R: 51 H ex : # 3 3 3 3 3 3

R: 26 G: 26 R: 26 H ex : # 1 9 1 9 1 9

PROYECTO DE TÍTULO - BONES

TIPOGRAFÍA

Creada por Matt Mclnerney, la fuente tipográfica Raleway es una sin serifa muy limpia, de palo, sin estridencias de ningún tipo y con un equilibrio admirable. Cuenta con una gran familia tipográfica la cual sirve tanto para titulares como para texto continuo. Por otro lado, cuenta con una muy buena lectura en pantalla como en impresos.

LOGO

El nombre del proyecto se llama BONES, dado que los huesos son parte del esqueleto humano, así como HTML es el esqueleto de un Sitio Web. El nombre está escrito en inglés, puesto que toda la sintáxis de HTML y CSS es en el mismo idioma. Si bien la calavera tiene una connotación negativa, en este caso no es agresiva; sus bordes son redondeados y es un estilo de doodle, donde un monstruo puede ser amigable. Dentro de la calavera se encuentra el cerebro, nuestro mayor disco duro, como en esta plataforma todo el contenido aprendido va quedando registrado en una base de datos. La tipografía empleada para el logotipo es Breul Grotesk Black Rounded, la cual es una tipografía, como el mismo nombre lo indica, grotesca; con bordes redondeados, de muy buena visibilidad y que permite una buena reducción para sus tamaños mínimos.

PROYECTO DE TÍTULO - BONES

PROPUESTAS INICIALES

INFOGRAFÍA 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. Su mayor problema era que se necesitaría tapizar una sala completa con infografías por la cantidad de propiedades de HTML y CSS

PROYECTO DE TÍTULO - BONES

ICONOS ANTIGUOS Si bien los colores de la iconografía representaban algo en específico, como el rojo indica error, azul HTML, naranjo CSS, verde continuar y amarillo que aún hay cosas por hacer dentro del tutorial, solo se rescatarán los colores pero en otros tonos y no precisamente en los íconos, si no que, en otros elementos de la nueva interfaz que veremos más adelante.

PROYECTO DE TÍTULO - BONES

Los principales problemas del diseño anteriormente visto era lo frío, poco atractivo, limitando con lo fome, era engorroso, por lo cual no cumplía con los requisitos vistos en los antecedentes y tampoco contaba con una decodificación de html, si no, que era más de lo mismo en otras plataformas.

PROYECTO BONES (METODOLOGÍA DE TRABAJO)

NAV HEADER

SECTION

ASIDE

SECTION

FOOTER ESTRUCTURA VISUAL DE UN SITIO WEB Antes de comenzar a utilizar la aplicación web que veremos más adelante, hay que enseñarle a los alumnos como se divide y se comporta una web, analizando y desarmándola de lo macro a lo micro, de body a sección, que hay dentro de estos (párrafos, imágenes, íconos, etc...) para luego comenzar a etiquetar y desarrollar.

PROYECTO DE TÍTULO - BONES

NAV HEADER

SECTION

FOOTER 93

Veremos como es un header y a través de post-it se irán marcando los inicios y los finales de cada contenedor, ya que, es así como funciona el lenguaje enriquesido de HTML.

PROYECTO DE TÍTULO - BONES

En este proceso mediante post-it, es donde comenzamos a etiquetar sectores de un sitio web a través de pseudocódigo, en el cual, los alumnos comenzarán a oner en práctica los ejercicios anteriormente señalados, para luego, hacer el traspaso a la hoja milimetrada y después comenzar a escribir el código con el lenguaje que ellos conocen y de ahí decifrarlos a HTML..

PROYECTO BONES (WIREFRAMES)

PROYECTO DE TÍTULO - BONES

100

PROYECTO DE TÍTULO - BONES

TEST DE USUARIO Se realizó un testeo de usuario con la interfaz sin aplicar diseño, el cual fue muy exitoso, teniendo buenas críticas sobre la usabilidad, lo sencillo de la plataforma. Los usuarios fueron: Álvaro Carvajal, Cristian Catalán, Víctor Moreno, Javiera Carrasco, Constanza Toro, Diego Astorga y Guillermo Ramírez.

101

PROYECTO BONES (KIT INTERFAZ DE USUARIO // UI)

ALINEACIÓN DE PÁRRAFOS Tipografía Raleway Regular, 16pts formato para pantallas.

102

PROYECTO DE TÍTULO - BONES

DESTACADOS

ICONOGRAFÍAS

103

BOTONES DE CHEQUEO

BARRA NAVEGACIÓN

BUSCADOR

DROPDOWN MENÚ

104

BUSCADOR ACTIVO

PROYECTO DE TÍTULO - BONES

TOOLTIPS

PESTAÑAS

ADVERTENCIAS

TOOLTIPS

Información

Confirmado Advertencias

BARRA DE PROGRESO

105

BOTONES

VISTA PREVIA

GRILLA

106

PROYECTO DE TÍTULO - BONES

SELECCIÓN

COMPLETAR <__ 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. <_p>

ORDENAR Curso HTML, aprendiendo a etiquetar. </p> <p>

BACKGROUND

107

MOCKUPS LOGIN

108

PROYECTO DE TÍTULO - BONES

HOME

109

110

PROYECTO DE TÍTULO - BONES

111

112

PROYECTO DE TÍTULO - BONES

FUTURO DEL PROYECTO El proyecto continuará a partir de la etapa de diseño, donde se calcularán 8 horas diarias por los días hábiles que correspondan a partir del mes de Agosto. Diseño (Sitio Web) 1. Investigación de casos 120 horas 2. Estructura de contenidos 48 horas 3. Realización de ejercicios 360 horas 4. Diagrama de flujo 48 horas 5. Iconografía 134 horas 6. Wireframe 72 horas 7. Mockup 360 horas 8. Prototipado 520 horas Dando un total de: 1662 horas Por lo tanto, el proyecto se debería llevar a cabo en 332 días hábiles.

113

PRESUPUESTO El trabajo realizado consta de 3 grandes etapas, una de estas es la Investigación, continuando por la etapa de Gráfica y Diseño que tendrá la plataforma, 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 14. Sistema Preguntas Aleatorias Dando un total de: $5.164.000

114

PROYECTO DE TÍTULO - BONES

AGRADECIMIENTOS Mis más sinceros agradecimientos a: María Luisa Vargas, Jorge Santibáñez, Guillermo Garcés por su apoyo externo. Mariajesús Sepúlveda y Magdalena Sepúlveda por las correcciones ortográficas y gramaticales. Álvaro Carvajal, VÍctor Moreno, Guillermo Ramírez, Javiera Carrasco, Constanza Toro, Micchela Messone, Cristián Catalán y David Cisterna por participar en los Test de Usuario. Todos los alumnos de la asignatura Prototipado Web del año 2015 que participaron en mis actividades como Ayudante. Andrés Correa y Marta Kiverstein por ser los profesores titulares de: Taller de Título y Seminario de Título respectivamente. A los profesores Alejandro Ramírez, Luis Fontecha y Fwrancisco Cancino que me hicieron darle otra mirada a mi proyecto. Al grupo “Diseñadores Chilenos” que participaron de las encuestas. Y en especial a María Soledad Vizcaya y Carlos Vargas que me dieron la oportunidad, y el apoyo incondicional de estudiar esta carrera.

115

PROYECTO DE TÍTULO - BONES

PROYECTO DE TÍTULO PROFESORES: MARTA KIVERSTEIN ANDRÉS CORREA ALUMNO: RICARDO A. VARGAS VIZCAYA 117