Taller de Sitios Web
¿Quién Soy?
- Ingeniero Civil Informático
- Gerente Desarrollo E-Commerce en @Linets
- Profesor Adjunto UNAB
- Profesor Adjunto UDP
- Profesor Curso Frontend Desafío Latam
- Profesor Curso Full-stack Desafío Latam
- Áreas de interés
- Ingeniería de software
- Desarrollo Web
- Infraestructura y alta disponibilidad
-
Hobbies
- Desarrollar Software
- Jugar Basketball
- Jugar Ping Pong
Algunos proyectos
www.hushpuppies.cl
Algunos proyectos
www.cat.cl
Algunos proyectos
www.billabong.cl
Algunos proyectos
www.burton.cl
Algunos proyectos
www.azaleia.cl
Algunos proyectos
www.columbia.cl
Algunos proyectos
www.azaleia.cl
Algunos proyectos
www.valleplus.cl
Programa del curso
UNIDAD I: Introducción al desarrollo web
Introducción al desarrollo Web
- Evolución de los navegadores
- Historia del lenguaje HTML
- Arquitectura de una solución web
Arquitectura de información
- Estructuras de contenido
- Sistemas de navegación
- Confección de prototipos o Wireframes
- Usabilidad y diseño de experiencias web
Programa del curso
UNIDAD II: Desarrollo Web con HTML, CSS y Javascript
HTML5 y CSS3
- Introducción al desarrollo web con HTML/CSS
- Maquetación con HTML5 y CSS3
- Uso de Imágenes, Vectores y tipografías para la web
- Responsive Design
- Bootstrap 3 uso de grilla, componentes, formularios y componentes
Javascript
- jQuery y Bootstrap
- Plugins de jQuery
Calificaciones
Esquema de calificaciones
- Solemne: 1 (25%)
- Trabajos: 5 (75%)
Detalle de evaluaciones
- Nota 1: Arquitectura de información + HTML (3 tareas)
- Nota 2: Bootstrap (2 tareas)
- Nota 3,4 y 5: Trabajo final (3 entregables)
Introducción al desarrollo Web
Historia
Navegadores
Historia de HTML
El desarrollo web
Arquitectura de una aplicación web (i)
Arquitectura de una aplicación web (iI)
Arquitectura de una aplicación web (iii)
¿Qué es el desarrollo web?
- Es el desarrollo de software que puede ser ejecutado en un navegador
- Involucra diferentes tecnologías en su construcción
- Existe un desarrollo frontend y un backend
La web no está hecha de papel
-
El pensamiento basado en el papel espera un control sobre el diseño e invariabilidad del producto acabado.
-
Pero la web no está hecha de papel, y una página web se comporta de forma distinta a una de papel.
Las páginas de papel son rígidas, las páginas web son flexibles
Mentalidad de papel, páginas web y expectativas frustradas
Paginas web adecuadas al medio: más allá del papel
Una página web no tiene que verse exactamente igual en todas partes, sino que debe funcionar en todas partes.
El contenido debe seguir siendo accesible para el usuario.
Distanciarnos de la mentalidad de papel
- Diseño web conforme a los estándares / W3C
- Diseño web sin barreras / Accesibilidad
- Flexibilidad
- Optimizada para buscadores / SEO
Diseño de una aplicación web
sketch, wireframe, mockup y prototipo
Sketch
Wireframe
- Zonas de contenido
- Uso de elementos HTML (marcado semántico)
- Servicios de navegación y ayuda
- Flujos de navegación (cómo se conectan las unidades de información)
Mockups
Prototipo
- Experimente interactuando con la interfaz y contenido del proyecto.
- Pruebe las principales interacciones de una manera similar al producto final.
Herramientas
Sublime Text
Inspector de elementos
- Buscar dentro de un sitio “site:”
- Comillas para buscar frases exactas con "Frase"
- Excluir palabras con “-”
- Buscar por tipo de archivos “filetype:”
- Utilizar herramientas de búsqueda o Advanced Search