Diplomado Aplicaciones para el Diseño Web

Transcripción

1 Diplomado Aplicaciones para el Diseño Web

2 Descripción Conocer e interactuar con recursos, aplicaciones y herramientas necesarias para el diseño, desarrollo, publicación, difusión, medición y posicionamiento de sitio web. Clases Días: Lunes - Miércoles - Viernes Horario: Unidad I y II: 18:30hrs. a 22:00hrs. Unidad III: 18:45hrs. a 21:45hrs. Café: 20:00hrs. Evaluación Nota: 4,0 (Cuatro Coma Cero). Asistencia: 80%

3 Unidades UNIDAD I: Diseño y desarrollo de sitios web + Tratamiento de imágenes y soluciones para la web. + Creación de soluciones animadas para la web. + Desarrollo y edición de sitios web. + Profesor Orlando Durán

4 Unidades UNIDAD II: Diseño web con HTML5, CSS3 y jquery + Desarrollo de Sitios Web con HTML5, CSS3 y jquery + Desarrollo de Sitios Web Responsivos + Integración de Interactividad con jquery + Profesor Carola Miranda

5 Unidades UNIDAD III: Estrategias de Marketing OnLine y Community Manager + Desarrollo de Sitios Web con HTML5, CSS3 y jquery + Desarrollo de Sitios Web Responsivos + Integración de Interactividad con jquery + Profesor Marcio Granado Rodrigo Orellana Orlando Durán

6 Unidad I Diseño y desarrollo de sitios web

7 Orlando A. Durán Sáez Comunicación Gráfica y Estratégica Magister Comunicación Estratégica y Digital (UFT) Diplomado en Diseño y Desarrollo Web Diplomado en Educación Superior Estrategias de Marketing OnLine y Community Manager Académico Pregrado y Postgrado Director Diplomado en Aplicaciones para el Desarrollo Web (UFT) Profesor UFT, USACH y UCINF Director-Propietario de ORION Producciones Gráficas y Editoriales Director-Propietario de Revista TallyHo ( orlandoduransaez@gmail.com

8 Unidad I Edición de imágenes, con Photoshop Soluciones Animadas, con Flash Desarrollo Web, con Dreamweaver

9 La Sociedad de la Información Parte 1

10 la sociedad de la información 1964 Marshall McLuhan Educador Filósofo Investigador Semiólogo 1983 Richard Stallman Software libre Libertad y democracia en la Internet

11 la computación y la internet Gestión Desarrollo Comunidad Interacción Aplicaciones gratuitas. Sistemas Operativos gratuitos. GNU Navegadores Web gratuitos. LINUX Netscape Navigator Firefox Mozilla

12 la internet Conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, funcionando como una red lógica única, de alcance mundial. web Consumidor Solo lectura No hay interacción Comunicación plana web Prosumidor Interacción Web Social Redes Sociales web Multipropósito Mucha interacción Base de datos Aplicaciones múltiples Inteligencia artificial Semántica Evolución al 3D

13 Diseño y Desarrollo Web la imagen pixel y vector MAPA DE BITS VECTORIAL Grupo de píxeles con información cromática. + Paint y Picture Manager + Photoshop y Fireworks Gráficos formados por curvas y líneas definidos como vectores. + Freehand + Illustrator

14 la resolución 1 pulgada PIXELES Cuadratines con información cromática. 0,04 cms. 1 pulgada 10 ppp (100 px.) RESOLUCIÓN MÍNIMA 72 ppp (5.184 px.) > Cantidad de pixeles, que hay en un área específica (Pulgada). > Resolución = Peso / Calidad

15 la resolución EJEMPLO Resolución de pantalla Imagen resolución 72 ppp. Cuadrícula 1 pulgada.

16 la clasificación Blanco y Negro 1 Bit Escala de Grises 8 Bits Color 24 bit

17 la edición según plataforma SITIO WEB Tamaño: 5 cms X 5 cms. DIARIO Tamaño: 5 cms X 5 cms. REVISTA Papel Especial Tamaño: 5 cms X 5 cms. Resolución: 72 ppp (Pantalla) Resolución: 150ppp Resolución: 350ppp Extensión: JPEG Extensión: PSD Extensión: PSD Canal: RGB Canal: CMYK Canal: CMYK Peso: 167 Kb / 0,167 Mb Peso: Kb / 2,35 Mb Peso: Kb / 7,5 Mb

18 el texto Aa Sin Serif Aa Con Serif Aa Fantasía Modular Geométrica Palo seco Romana Egipciana Decorativas Helvetica Arial Tahoma Verdana Calibri Trebuchet Time New Roman Time Bookman Baskerville Californian Giorgia Curlz MT Brush Algerian Bauhaus 93

19 el texto TAHOMA Sistema de Gestión de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas Web, por parte de los administradores, editores y participantes. TAHOMA Sistema de Gestión de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas Web, por parte de los administradores, editores y participantes. TAHOMA Sistema de Gestión de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas Web, por parte de los administradores, editores y participantes. PAPYRUS Sistema de Gestión de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas Web, por parte de los administradores, editores y participantes. Texto Gris 90% Fondo Gris 15% Fondo / Texto Fondo-Texto-Tipografía

20 el texto CALIBRI CALIBRI CALIBRI CALIBRI Sistema de Ges/ón de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración 10 pt. Sistema de Ges/ón de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración 12 pt. Sistema de Ges/ón de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración Sistema de Ges/ón de Contenidos (Content Management System, CMS) es un programa free, que permite crear una estructura de soporte para la creación y administración 14 pt. 16 pt. > Notas y Lecturas de foto > Texto: Diario, revistas, suplementos, libro, etc > Recuadros, bajadas, etc > Recuadros, bajadas, destaques, subctulos, etc

21 los formatos o extensiones JPEG Joint Photographers Experts Group Comprime las imágenes. Comprime la información, conservando calidad y bajando el peso. Ideal para preparar imágenes para la Web. PSD PhotoShop Defect Formato por defecto de Photoshop. Permite guardar todas las creaciones realizadas por el programa. GIF Graphics Interchange Format Desarrollado por Compuserve, para obtener archivo de imagen de tamaño muy pequeño. Permite crear animaciones y transparencias. Ideal para la Web. PNG Portable Network Graphics Desarrollado para sustituir a GIF. Permite una mayor profundidad de color de hasta 24 bits Comprime sin perdida de calidad. TIFF Tagged Image File Format Desarrollado por Aldus. Ideal para guardar imágenes de alta calidad, Conserva las Capas y los Canales Alfa.

22 los formatos o extensiones RAW Crudo Ofrece una máxima calidad, ya que contiene los pixeles en bruto o negativo digital. Imagen pura captada por el sensor (chips) CMOS. BMP BitMap Guarda imágenes de 24 bits (16,8 millones de colores), 8 bits (256 colores) y menos. Sirve para generar imágenes de poco peso. AVI Audio Video Interleave Formato contenedor de audio y video lanzado por Microsoft en 1992 HTML HyperText Markup Language Lenguaje de programación que se utiliza para el desarrollo de páginas Web. Podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto. HTML5 HyperText Markup Language Corresponde a última versión de HTML, más dinámica permitiendo publicaciones de archivos de audio y video.

23 los formatos o extensiones SWF Shockwave Flash Formato de extensión de las películas animadas comprimidas, generadas desde Adobe Flash. FLV Flash Video Formato de video de Adobe Flash. MP3 Moving Picture Formato de audio usado en computadores como en reproductores de audio portátiles. Fue desarrollado por el Moving Picture Experts Group (MPEG). DOC o DOCX Extensión o formato del procesador de texto de Microsoft Word

24 las configuraciones y tamaño 640 x 480 px. 800 x 600 px x 768 px. 22,58 x 16,93 cms. 28,22 x 21,17 cms. 36,12 x 27,09 cms x 870 px x 768 px x 768 px. 40,60 x 30,69 cms. 45,16 x 27,09 cms. 47,98 x 27,09 cms. Monitor Wide fullscreen widescreen x px x px x px x px. 56,44 x 42,33 cms. 72,25 x 54,19 cms. 91,44 x 68,58 cms. 108,37 x 81,28 cms.

25 las configuraciones y tamaño

26 las configuraciones y tamaño Configuración Wide 1360 x 768 px

27 el color digital PERCEPCIÓN - OJO/CEREBRO - INTERPRETACIÓN - COLOR (H) TONALIDAD : Distinguir entre colores (Rojo, Verde, Azul, etc). (S) SATURACIÓN : Mayor o Menor mezcla del color con el blanco. (B) BRILLO : Intensidad del color. RGB Rojo-Verde-Azul (color generado por la luz) Aditivo / Primario CMYK Cian-Magenta-Amarillo (color por mezcla de tinta líquida) Sustractivo / Secundario

28 el color digital color hexadecimal Colores para la Web 256 Colores seguros para la Web 216 # FFFFFF # # FF0000 # 00FF00 # 0000FF R G B # FF0000 FF # F Orlando Durán Sáez Parte 2

29 el color digital color hexadecimal Paleta de los 216 Colores Hexadecimal, seguros para la Web. Relación de porcentajes y código hexadecimal

30 Edición de Imágenes para la Web

31 Unidad I Photoshop Prepara y exportar imágenes para la web. Diseñar el cabezal de un sitio web (head). Realizar animaciones simples. Editar video. Integración con Fireworks.

32 gracias