Lic. Mariano Pistone Front-end developer Mendoza Argentina

Transcripción

1 Te apasiona el diseño/desarrollo web y no sabés por dónde empezar? Entonces este curso es para vos, pues está pensado para personas que no se quedan quietas, que tienen ganas de superarse y de enfrentar nuevos desafíos. Aquí aprenderás todo lo necesario para desenvolverte profesionalmente en este apasionante mundo, acompañándote de manera personalizada durante todo el proceso de aprendizaje.

2 CLASE 1 INTRODUCCIÓN a HTML Descripción del contenido completo del curso y sus alcances. Documento inicial Conceptos básicos para entender el funcionamiento de las páginas web. (protocolo http; servidor web; hosting; dominios; diferencia entre sitios estáticos y dinámicos) Principios de HTML (Hyper Text Markup Language o lenguaje de marcado de hipertexto). Qué es? Su evolución. Etiquetas y elementos HTML; estructura de programación. Uso e importancia de los comentarios. Estructura de un documento HTML (básica y completa). Práctica introductoria // creación de un documento HTML completo y aplicación de algunas de las etiquetas aprendidas CLASE 2 HTML II Consultas sobre el práctico de la semana pasada. Aclaración de dudas. Instalación de Sublime Text. Instalación de plugins esenciales (EMMET, ex ZenCodign). Interfaz de uso. Etiquetas estructurales ( DOCTYPE, html, head y body). Funciones y reglas básicas. Etiquetas generales (imágenes, links, formateo de texto, encabezados, párrafos y otras). Etiquetas en desuso. Trabajo práctico Nº1 // uso de etiquetas y sus atributos en un proyecto concreto CLASE 3 HTML III Capas y contenedores. Principios de estructuración web: elementos en línea y en bloque (fundamentos y comportamiento). La etiqueta <div> y la etiqueta <span> (contenedores genéricos sin valor semántico). Detalles de su uso. Utilización y correcta aplicación de las etiquetas semánticas estructurales de HTML5. Anidamiento de etiquetas Mapa del sitio y principio básico de navegabilidad.

3 Trabajo práctico Nº2 // inicio del primero proyecto: estructurar una web de cinco páginas aplicando los conceptos estructurales aprendidos y las etiquetas semánticas de HTML5 CLASE 4 CSS3 Inicio // estilos Consultas sobre el práctico de la semana pasada. Qué es CSS? (hojas de estilo en cascada) Estructura de programación. Sintaxis. Reglas de estilo, selector y declaración; propiedad/valor. Creación y vinculación con el documento HTML de una hoja de estilo. Selectores globales y no globales. Class e id. Usos y diferencias. Formas de aplicar una regla de estilo. Ejemplos de aplicación concreta. Agrupamiento de estilos Margin y padding. Concepto y uso. Organización de nuestra hoja de estilos Trabajo práctico Nº3 // inicio de la mejora estética del sitio según los lineamientos planteados en clase CLASE 5 CSS3 intermedio // estilos Consultas sobre el práctico de la semana pasada. Herencia de estilos y concepto de cascada Anidamiento de estilos Conflictos en la aplicación de estilos: claves para solucionarlos Propiedades width y max-width Imágenes y estructuras responsivas Orden correcto de las declaraciones de estilo Ampliamos el uso de nuevas propiedades y recursos de CSS: overflow, clase active, creación de componentes reutilizables, bordes, hover, agregar íconos a listas, etc. Creación del menú de navegación Trabajo práctico Nº4 // completamos la mejora estética del sitio con la guía y ayuda del profesor CLASE 6 CSS3 intermedio // estructuración web Posicionamiento de cajas/capas Posicionamiento absoluto, relativo, fijo y estático. Detalles y modos de uso. Características y comportamiento. Ejemplos de aplicación.

4 Uso de float y clear. Mover elementos con coordenadas según su posicionamiento Manipulación del eje Z. Estructuración web usando capas contenedoras y posicionamiento flotante. Estructura siempre centrada y fluida. Trabajo práctico Nº5 // crear una estructura base responsiva aplicando los conceptos aprendidos; aplicar, además, todo lo visto al sitio ya desarrollado CLASE 7 CSS3 intermedio // clase taller Clase taller Repaso y reafirmación de conceptos sobre todo lo visto hasta el momento. A esta altura los alumnos ya tienen desarrollado un sitio web básico pero correctamente estructurado con HTML5 y CSS3. Uso de fuentes: seguras, externas y personalizadas Uso de colores: nombres cross-browser, hexadecimal, rgb y rgba. Aplicación y modos de uso. Uso de la propiedad border-radius Imágenes de fondo (css y html). Detalles y modo correcto de uso. Uso y aplicación de la propiedad background para crear un layouts modernos y sofisticados CLASE 8 CSS3 avanzado // selectores avanzados Repaso general de lo visto hasta el momento. Pseudo-clases y pseudo-elementos. Características y formas de aplicación. Ejemplos prácticos. Selectores avanzados. Comportamiento e interactividad con CSS3 (anticipo) Uso de la propiedad transition Trabajo práctico Nº6 // los alumnos resuelven un trabajo práctico interactivo, donde deben aplicar los selectores CLASE 9 CSS3 usos adicionales // interactividad sin Javascript Consultas sobre el práctico de la semana pasada. Visibillity, display y opacity. Características y modos de uso. Ejemplos prácticos. Evento Click con pseudo-clases y selectores avanzados Ocultar/mostrar contenido, galería de imágenes y ventana modal. Llevar a producción el proyecto (poner online)

5 Trabajo práctico Nº7 // Incorporar los recursos de comportamiento e interactividad aprendidos al sitio desarrollado y subirlo al servidor de pruebas CLASE 10/11 HTML5 Breve historia. Etiquetas de ayer y de hoy. Estructura semántica y compatibilidad con navegadores. Solución a los problemas actuales del estándar. Nuevas etiquetas, atributos y recursos de HTML5. Usos y tips. Imágenes SVG y uso de Icon-fonts Formularios en HTML5. Nuevos input. Función y estructura. Estilos y usos. Etiqueta video y audio. Técnica correcta de aplicación cross-browser. Formatos de video. Compatibilidad con navegadores. Tips fundamentales. Trabajo Práctico Nº8 // creación de una landing page profesional CLASE 12 Maquetación web responsive // de la idea al boceto papel Pasos previos: instalación de navegadores e instalación de extensiones fundamentales para desarrolladores. Detalles de su uso. Responsive web design. Conceptos iniciales. Características y detalles de funcionamiento. Fluid layout Abordaje de un caso real. La importancia del boceto o prototipo. Detalles y características. Trabajo práctico Nº9 // realización del boceto/prototipo en papel CLASE 13 Maquetación web responsive // del boceto papel al boceto PSD Planificación del proyecto Estructura y jerarquía de elementos: uso del sistema de grillas. Qué width usar? Detalles clave sobre el proceso de trabajo Uso de plataforma colaborativa para diseño web Photoshop básico para diseño web Realización del prototipo del sitio en Photoshop/Illustrator Planteamiento de tres versiones: pc, tablets, mobile. Trabajo práctico Nº10 // realización del boceto/prototipo en Photoshop/Illustrator usando de forma correcta el sistema de grillas

6 CLASE 14 Maquetación web responsive // proceso de maquetación PSD a HTML/CSS3 Maquetación web con HTML5 y CSS3. Técnicas para programar la estructura web a partir del prototipo Detalles del proceso con el foco puesto en responsive web design Objetivo a lograr // aprobado prototipo, los alumnos avanzan con el proceso de maquetación web CLASE 15 (dos encuentros) Responsive web design Qué es RWD? Cuál es su principio de funcionamiento? Ajustes preliminares necesarios: cinco pasos fundamentales que todo desarrollador web profesional debería aplicar para garantizar el buen funcionamiento de su código. Y las fuentes? Técnica para definir de manera correcto el tamaño de nuestras fuentes. Teoría y práctica de los tres principios básicos del RWD. Uso correcto de los media queries. Mobile first y non-mobile first. Tips clave. Aplicación práctica de mobile first usando servidor local (testing on local server). Retina display. Patrones de diseño responsive. Trabajo práctico Nº11 // parte uno: optimizar un sitio entregado por el profesor; parte dos: aplicar RWD al sitio desarrollado. CLASE 16 Optimización responsive Repaso general y dudas Optimización responsive del proyecto: aplicación de todos los conceptos de RWD al sitio desarrollado Desarrollo de un menú off-canvas Objetivo a lograr // los alumnos deben completar el sitio y subirlo al servidor de pruebas CLASES ADICIONALES a tomar en la plataforma: Diseño PSD // aplicación de diseño al prototipo Photoshop PSD a HTML, diseño // mejora estética del protoptipo ya maquetado

7 CLASE 17 Javascript //comportamiento e interactividad Qué es Javascript? Detalles clave para trabajar con este lenguaje de programación. Uso de la consola Pop-up boxes Primeros scripts (modificación dinámica de nuestro HTML). Declaración y uso de variables. Selección de elementos. Agregar y capturar contenido. Funciones y forma correcta de aplicar scripts y vincularlos con nuestro HTML. Estructura condicional. Aplicación concreta en la interacción con el usuario. Operadores lógicos y relacionales Capturar datos introducidos en un input de formulario Validar formulario Proyecto: restringir el ingreso de usuarios según su edad. Trabajo práctico Nº12 // direccionar y restringir el ingreso de los usuarios a un sitio según su edad CLASE 18 Javascript II Ejercicio en vivo de repaso: desarrollo de un juego de interacción con el usuario Javascript como lenguaje orientado a eventos y objetos Escuchar eventos Funciones de Javascript Arrays y objetos Direccionar usuario a otras páginas de mi sitio restringiendo su ingreso según clave ingresada CLASE 19 (dos encuentros) jquery I / jquery II Qué es jquery? La importancia de su uso en el desarrollo web. Pasos iniciales: descarga e inclusión de jquery en nuestro proyecto web. Alternativas de uso. Estructura de programación y primeros scripts. Eventos y efectos. Encadenamiento y call-back. Detalles, aplicación y usos correctos. Uso correcto de variables Selección y manipulación de los elementos del DOM. Funciones en jquery: creación y ejecución Creación de un menú desplegable

8 Manipulación del CSS de nuestro proyecto: aplicación de clases y aplicación de estilos en respuesta a la interacción del usuario con la interfaz visual Uso de la función animate. Agregar y capturar contenido de elementos HTML Evento scroll y función scrolltop Detectar y modificar la ubicación de elementos. Programación de un botón to-top Programación de un nav dinámico Plugins Uso e instalación de widgets para enriquecer la interacción del usuario con la interfaz visual Trabajo práctico Nº13 // Dar respuesta a la interacción del usuario con la interfaz visual según situaciones planteadas en detalles del ejercicios. A su vez, deben enriquecer el proyecto real con todo lo visto en estas clases según detalles explicados en la documentación entregada CLASE 20 Frameworks front-end // Bootstrap Qué son? Para qué sirven? Ventajas y desventajas. Cómo elegir el framework correcto para mí? Bootstrap, primeros pasos: detalles de funcionamiento e instalación. El sistema de grillas y su uso correcto. Aplicación concreta del sistema de grillas usando correctamente las clases del framework. Sistema mobile-first. Claves de su aplicación. Utilidades responsive y otras cositas Técnica de maquetación con Bootstrap Trabajo práctico Nº14 // maquetar un portfolio one-page según PSD entregado CLASE adicional // transmisión en vivo (online) SEO Posicionamiento web Registrar un dominio nacional contratar un servicio de hosting. El primer paso es escribir código válido de acuerdo a los estándares actuales (lo hacemos desde la primera clase!): validar mi html y css. Optimización del sitio para mejorar su posicionamiento (Google no espera y los usuarios tampoco!). Ahora sí SEO: Qué es? Detalles clave. SEO on-page. Optimización clave y fundamental. Avisémosle a los buscadores que existimos! Dar de alta mi sitio en Google (confirmar propiedad y brindarle un mapa del sitio para mejorar la indexación) Herramientas para webmasters de Google. Vincular mi sitio con Google Analytics. Detalles sobre el uso de esta herramienta fundamental.

9 Trabajo práctico Nº15 // aplicar todos lo visto sobre SEO al sitio web del cliente real que deben presentar como trabajo final

10 METODOLOGÍA DE TRABAJO El curso comprende un total de 20 clases (cuatro por semana) de tres horas cada una. Se aborda el diseño/desarrollo web de manera profesional y desde cero. Es decir, no hace falta tener conocimientos previos pero sí perseverancia y muchas ganas de aprender. La metodología de trabajo está pensada para garantizar el proceso de aprendizaje. Consiste en clases teórico/prácticas con retroproyector en las que se introducen los temas a partir de material gráfico, el cual luego es entregado en formato digital a los alumnos. En paralelo se abordan los temas desde la práctica, desarrollando y explicando los procesos en la pantalla grande. Estos archivos también son entregados a los alumnos. Para garantizar el proceso de aprendizaje se decidió que los alumnos no realicen prácticas en clase, por lo cual no deben llevar su computadora personal. A cada clase le corresponde un trabajo práctico, el cual los alumnos deben entregar en un tiempo óptimo de una semana, salvo las excepciones planteadas. El mismo es presentado y explicado al finalizar cada módulo. A la vez, en algunos módulos, por la dificultad de los temas, se brinda un soporte adicional a través de videos que son entregados luego del cursado. SOPORTE, MATERIAL Y SEGUIMIENTO PERSONALIZADO Luego de cada clase, los alumnos tienen disponible el material utilizado. De esa manera pueden acceder a todo el contenido visto durante el cursado, lo cual representa un apoyo muy importante para su posterior desarrollo profesional.

11 A su vez, se les da acceso a videos con contenido adicional sobre la clase o de apuntalamiento sobre algún tema que les haya resultado más complicado. Todos estos recursos quedan a disposición del alumno para su descarga a través de Google Drive y de la plataforma de estudio del curso. También tienen acceso a un grupo cerrado de Facebook en el cual los alumnos interactúan entre sí y con el profesor. Allí se resuelven dudas de manera colectiva, enriqueciendo el proceso de aprendizaje de todos ( del profesor también!). IMPORTANTE: cada trabajo práctico entregado tiene una devolución personalizada y el alumno puede plantear tantas dudas como quiera que todas son siempre contestadas en tiempo y forma. En definitiva, se hace un SEGUIMIENTO PERSONALIZADO de cada alumno, acompañándolo bien de cerca durante todo el proceso de aprendizaje. IMPORTANTE II: es primordial que los alumnos completen los trabajos prácticos pues sin práctica no hay aprendizaje. Durante el cursado se insiste mucho con ello. Recomendamos que si no entienden algo pregunten y que sean persistentes con la práctica, pues al escribir código a veces las cosas no salen como uno quiere, pero ese proceso de prueba y error es parte del aprendizaje y NUNCA se frustren si algo no sale. Insistan que todo se logra si hay predisposición y ganas!