Editar Nuevo Curso: Gráfica Digital 2014 No tienes permiso para modificar esta página, por el siguiente motivo: La acción que has solicitado está restringida a los usuarios del grupo: Usuarios. Asignatura: Gráfica Digital Año: Período Académico: primerosegundoescuela de veranotodos Tipo de Curso: Taller de Etapa Taller de Construcción Presentación Taller de Título Ramo Lectivo Otro Taller de Posgrado Ramo de Posgrado Seminario de Posgrado Taller(es): ARQ 1º ARQ 2º ARQ 3º ARQ 4º ARQ 5º DIS 1º DG 2º DG 3º DG 4º DO 2º DO 3º DO 4º Tit. ARQ Tit. DG Tit. DO Magíster Profesor(es): Katherine Exss Profesor(es) Invitado(s): Ayudante(s): Alumnos: Karol BarreraCarla CárcamoIngrid CéspedesSofia EnriquezJaviera EscuderoConstanza JohnsonMelany MarinCarolina NúñezCindy SanhuezaJaviera UlzurrúnMauro VillenaAlison Saravia Escribe solo la parte final de la URL de tu página de persona (lo que viene después de la “/”), sin incluir “https://wiki.ead.pucv.cl/” Palabras Clave: todo en bajas, separadas por coma Carreras Relacionadas: Arquitectura Diseño Magíster Otra Docencia Vinculada: Ninguno Sí No Link Aula Virtual: Formato "https://prodavmoodle.ucv.cl/enrol/index.php?id=12345" Contenido: <div style="border: 1px solid #F6CECE; background-color: #ffffff; color: #6d6d72; padding: 1em; text-align:center;"> [[Gráfica Digital 2014]] | [[Tareas Gráfica Digital 2014]] </div> =Introducción y problemática= '''26 de Junio''' ''El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos "aceptar el flujo y reflujo de las cosas."''<ref>John Allsopp, [http://www.alistapart.com/articles/dao/ "A Dao of Web Design"]</ref> <references></references> ==Encargo 1== Frente a este hecho concreto en cuanto a parámetros y medidas estándar de resolución ¿cómo nos afecta a nosotros como diseñadores? ¿de qué manera influye que las nuevas tecnologías, dispositivos y los gustos y preferencias de las mismas personas van cambiando mucho más rápido de lo que pensamos? Escribir de uno a tres párrafos breves como reflexión en la wiki, en la página [[Tareas Gráfica Digital 2014]]. ==Encargo 2== Trabajo personal, donde cada uno tengo que elegir un sitio responsive para analizar el comportamiento de su interfaz en diferentes formatos. * Considerar al menos 3 formatos: Desktop, Tablet, Mobile * Analizar distintos elementos de la interfaz como: párrafos de textos, menús, imágenes, etc * Crear caso de estudio en la wiki con esta documentación ===Listado de sitios por estudiar=== # Carla Cárcamo | [http://www.earthhour.org/ Earth Hour] # Constanza Johnson | [http://mccollcenter.org/ McColl center] # Alison Saravia | [http://cafeevoke.com/ Cafe Evoke] # Mauro Villena | [http://www.ted.com/ Ted.com] # Ingrid Céspedes | [http://www.thedolectures.com/ The DO Lectures] # Cindy Sanhueza | [http://www.itravelyork.info/ I Travel York] # Melany Marin | [http://www.vouchercodes.co.uk/most-wanted/ Most Wanted] # Javiera Ulzurrún | [http://www.thisisthebrigade.com/ The Brigade] # Javiera Escudero | [http://www.colly.com/ Simon Collison/] # Karol Barrera | [http://forefathersgroup.com/ Forefathers] # Sofia Enriquez | [http://www.london-se.com/ London SE] ==Encargo 3== ===Clase de HTML5 y CSS3=== Clase dictada por Maximilano Martin, Diseñador Gráfico titulado de PUCV, actualmente Socio Fundador y Dirección en IDA - Ideas Digitales Aplicadas Miembro en AIChile. ===Contexto=== Se presenta como un "nuevo" campo en el cual, el Diseño Gráfico tiene mucho que decir. Aunque para muchos el código parezca muy distante a lo que se comienza realizando de forma más manual. HTML y CSS se integran y son parte importante del '''Diseño Front'''. *Interpretación semántica de la información diseñada *Individualización del diseño y el contenido *Desarrollo sobre un administrador de contenidos como WordPress *Integración y creación de inteligencias Web. ====¿Qué es HTML==== Las siglas de HTML significan HyperText Markup Language, que se refiere a un lenguaje de marcado. Se puede comparar el Lenguaje de Marcado con la antigua industria editorial, ya que un manuscrito a esta imprenta llegaba con zonas marcadas para ser destacadas y jerarquizadas, con el fin de que el imprentero reconociera estas zonas, las entendiera y tradujera a lo que el escritor quería transmitir. Del mismo modo en Diseño Front se puede recibir una imagen(jpg,png) de la interfaz con el diseño que se quiere realizar. La misión del diseñador es llevar y traducir esta imagen a códigos. Y donde es importante identificar jerarquías de títulos, subtítulos y párrafos. En 1991 se crea HTML y se generan estándares, ya que se comienza a incurrir en malas prácticas, tales como la mezcla de HTML y CSS3. En HTML sólo irá la estructura y el contenido, por otro lado se pone en la cascada de estilos o CSS (ej: si queremos poner un texto de color rojo). =====Características del HTML===== #Lenguaje de Marcado #Otorga estructura semántica al contenido( '''<head> <body> <aside> <footer>''') #Describir estructura y contenido #Complementar el texto con Objetos(hay imágenes, textos, vídeos que se pueden embeber) #Se escribe en forma de “Etiquetas” ('''<etiqueta></etiqueta>''') #Rodeada por Corchetes Angulares('''< >''') Estructura y contenido del HTML [[Archivo:Estructurahtml.jpg|600px]] ====Elementos de bloque y elementos de línea==== *Los elementos de bloque utilizan el ancho total de la página, a menos que se indique lo contrario. *Los elementos de línea se posicionan por defecto hacia el lado izquierdo. Este no funciona con padding o margenes, amenos que se le indique que actué como '''bloque'''. Ej: Un título es un elemento de línea. [[Archivo:Bloqueylilnea.jpg|400px]] ====Lo se dice para la máquina y lo que ve el humano==== En la siguiente imagen se puede apreciar como es necesario entregar la misma cantidad de información al humano y a la máquina para que el mensaje llegue. Como en el lado derecho es escrito en códigos que se relacionan con el lado izquierdo, que significan lo mismo pero que se escriben de formas distintas. [[Archivo:Contenidohtmlmaquinahumano.jpg|400px]] ====Estructura de los elementos==== Este lenguaje de marcado trabaja con etiquetas, que son herramientas fundamentales para que los navegadores interpreten el código, ya que estos nos muestran estructura, videos, imágenes y párrafos. De HTML4 a HTML se han incorporado nuevas etiquetas que nos permiten usar menos código en nuestros sitios. *section: Esta etiqueta sirve para poner secciones dentro de un documento. Por ponerlo de forma sencilla, funciona de una forma similar a la etiqueta div que nos separa también diferentes secciones. *article: sirve para poner artículos y publicaciones de usuarios. *header, footer: sirve para ahorrar código, anteriormente se debían agregar divs para generar estás zonas, pero ahora html5 reconoce esta etiqueta. *nav:sirve para realizar el menú de navegación. *audio y video: *embed: *canvas: '''<etiqueta>''''''contenido''''''</etiqueta>''' '''<a>''' vinculo o ancla '''</a>''' ===El encargo=== *Tomar ejemplo de estudio y correrlo en local! *Replicar ejemplo de estudio y limpiarlo de recursos externos! *Visualizar/destacar estructura con bordes! *Entrega Carpeta con nombre [[Categoría: Gráfica Digital]] Resumen: Esta es una edición menor Vigilar esta página Guardar la página Mostrar previsualización Mostrar los cambios Cancelar