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 (todos los módulos duran tres horas) 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). 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 (aplicación de lo visto en la clase en varios documentos HTML) 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. 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. Mapa del sitio y principio básico de navegación. Trabajo práctico Nº2 (mi primer sitio; estructurar una web de cinco páginas de acuerdo a información específica aplicando las etiquetas semánticas de HTML5). CLASE 3 CSS3 Inicio (aplicación de 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.

3 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. Aplicación de bordes e imágenes de fondo. Herencia, anidamiento y agrupamiento de estilos. Uso de la propiedad overflow. Conflictos en la aplicación de estilos: claves para solucionarlos. Margin y padding. Concepto y uso. Creación de un menú (botonera). Trabajo práctico Nº3 (aplicar estilos de manera correcta a mi primer sitio). CLASE 4 CSS3 intermedio Consultas sobre el práctico de la semana pasada. Capa): posicionamiento absoluto y relativo. Detalles y modos de uso. Características y comportamiento. Ejemplos de aplicación. Uso de float y clear. Manipulación del eje Z. Estructuración web usando capas contenedoras y posicionamiento flotante. Estructura siempre centrada y fluida. Creación de un footer estilizado con listas y redes sociales. Trabajo práctico Nº4 (crear una estructura base aplicando los conceptos aprendidos; aplicar, además, todo lo visto al sitio ya desarrollado). CLASE 5 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 colores: nombres cross-browser, hexadecimal, rgb y rgba. Aplicación y modos de uso. Uso de fuentes externas y personalizadas. CLASE 6 CSS3 avanzado Consultas sobre el práctico de la semana pasada. Repaso general de lo visto hasta el momento. Pseudo-elementos (::) y Pseudo-clases (:). Características y formas de aplicación. Ejemplos prácticos. Selectores avanzados. Imágenes de fondo (css y html). Detalles y modo correcto de uso. Uso de la propiedad border-radius. Uso de transiciones y opacity.

4 Trabajo práctico Nº5 (Los alumnos resuelven un trabajo práctico interactivo, donde deben aplicar los selectores avanzados aprendidos). CLASE 7 CSS3 usos adicionales (interactividad sin Javascript) Consultas sobre el práctico de la semana pasada. Visibillity y display. Características y modos de uso. Ejemplos prácticos. Importancia y aplicaciones. Evento onclick con paseudo-clases y selector avanzado. Galería de imágenes con puro CSS3. Evento onclick con radio-buttons más pseudo-clases y selector avanzado. Tip adicional: crear botonera de interacciones. Creación de una ventana modal usando pseudo-clases, anclas, z-index, opacity y transition. Trabajo práctico Nº6 (Modificar el sitio desarrollado para convertirlo en una ONE-PAGE que incluya: una galería de imágenes; ocultar y mostrar algún elemento ante la interacción del usuario; una ventana modal; mostrar información adicional al pasar el mouse sobre una imagen). CLASE 8 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. 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º7 (creación de una landing page profesional). CLASE 9 Maquetación web responsive (de la idea al boceto) 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 como alternativa. Solución/problema. Abordaje de un caso real. La importancia del boceto o wireframe. Detalles y características.

5 El uso de grillas para el diseño web. Qué width usar? Photoshop básico para diseño web. Trabajo práctico Nº8 (realización de un boceto del sitio en Photoshop en sus tres versiones -large devices, small tablets y extra small devices- respetando las grillas y la técnica explicada, siempre basándose en los requerimientos del cliente). Tiempo de entrega: dos semanas. CLASE 10 Maquetación web responsive (del boceto al diseño) Planteo del diseño en base al boceto. Definición de estilos. Aplicación de técnicas en Photoshop para plasmar el diseño y comportamiento general del sitio. Herramientas clave de Photoshop para el diseño web. Trabajo práctico Nº10 (aprobado el boceto, los alumnos avanzan con la aplicación del diseño en PSD de acuerdo a las técnicas aprendidas). CLASE 11 Maquetación web responsive (del boceto a la maqueta web PSD a HTML/CSS3) Maquetación web con HTML5 y CSS3. Técnicas para programar la estructura web con capas a partir del boceto. Detalles del proceso con el foco puesto en responsive web design. Trabajo práctico Nº11 (aprobado boceto y diseño en PSD, los alumnos avanzan con la codificación del proyecto en cuanto a su estructura para PC). CLASE 12 (esta clase se dicta durante dos encuentros - seis horas) Responsive web design (diseño web adaptativo) 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. Retina display. Patrones de diseño responsive. Trabajo práctico Nº12 (parte uno: aplicar los conceptos aprendidos a la estructura base con la que se viene trabajando; parte dos: aplicar RWD al sitio desarrollado -adaptación a tablets y mobile-.

6 CLASE 13 Maquetación web responsive (aplicación de estilos al sitio) Codificación del proyecto aplicándole los estilos a la estructura ya programada según el diseño hecho en PSD. Técnicas para importar parte del diseño. Desarrollo y explicación de las mejores prácticas. Trabajo práctico Nº13 (los alumnos deben finalizar con la programación del sitio en cuenta a estilos para aplicar luego las directivas de RWD). CLASE 14 CLASE 15 Optimización final del sitio Aplicación de todos los conceptos de RWD al sitio desarrollado. Pruebas de funcionamiento. Detalles de las mejores técnicas. Desarrollo de un menú de navegación off-canvas. Subir el sitio al servidor mediante FPT. Javascript: primeros pasos. Trabajo práctico Nº14 (los alumnos deben finalizar con el proceso de maquetación web responsiva y subir el sitio al servidor). Javascript y jquery inicio (comportamiento e interactividad) Clase dividida en dos encuentros Qué es Javascript? Detalles clave para trabajar con este lenguaje de programación. Primeros scripts (modificación dinámica de nuestro HTML). Declaración y uso de variables. Estructura condicional. Aplicación concreta en la interacción con el usuario. Desarrollo de un juego textual. Funciones y forma correcta de aplicar scripts y vincularlos con nuestro HTML. La importancia de usar funciones para optimizar el trabajo con Javascript. Desarrollo de un sistema para direccionar al usuario al ingresar a un sitio. 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. Primeros scripts. Eventos y efectos. Encadenamiento y call-back. Detalles, aplicación y usos correctos. Selección y manipulación de los elementos del DOM. Manipulación del CSS de nuestro proyecto: aplicación de clases, aplicación de estilos. Primeras aplicaciones prácticas: preloader, navegación con smooth scrolling y un menú desplegable.

7 Trabajo práctico Nº13 Parte uno: desarrollo de un juego tipo Elije tu propia aventura ; completar todos los ejercicios proporcionados desde un archivo HTML entregado. Parte dos: crear un menú desplegable y aplicar la clase.active a los ítems del menú para que queden seleccionados al hacer click. CLASE 16 jquery intermedio - Plugins (comportamiento e interactividad) Plugins: una solución simple a problemas complejos. Qué son? Cómo funcionan? Cuáles usar? Instalación y uso correcto de cuatro plugins para lucirse en los proyectos web. Trabajo práctico Nº16 (Aplicar los plugins jquery en un index proporcionado por el profesor Elegir uno y usarlo en la web desarrollada). CLASE 17 jquery avanzado (comportamiento e interactividad) Biblioteca de componentes para la creación de interfaces de usuarios. Detalles, uso y aplicación correcta. jquery + Ajax: cargar contenido en la página sin tener que recargarla toda. Instalación y uso de un servidor local. HTML5 + Geolocalización con jquery. Desarrollo con la API de Google. Uso de LocalStorage y SesionStorage. Desarrollo de un sistema de búsqueda de fotos (API de Flickr). Trabajo práctico Nº17 (utilizar alguno de los componentes vistos para mejorar la interface de uso del sitio usar Ajax para cargar contenido asíncrono). CLASE 18 Frameworks front-end Bootstrap I 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 proporcionadas por el framework. Sistema mobile-first. Claves de su aplicación. Utilidades responsive y otras cositas Trabajo práctico Nº18 (maquetar de manera correcta la estructura web proporcionada por el profesor). CLASE 19 Frameworks front-end Bootstrap II

8 Maquetación completa, en clase, de una home page responsive usando Bootstrap. El paso a paso en vivo es central para despejar dudas y profundizar el uso de este framework front-end. Trabajo práctico Nº19 (los alumnos deben maquetar y dejar 100% funcional un portfolio one-page ). CLASE 20 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. Trabajo práctico Nº20 (Aplicar todos lo visto sobre SEO al sitio web del cliente real que deben presentar como trabajo final). 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

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

10 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!