DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características...

17
BOOTCAMP DE 7/8 MESES El contenido de este programa es orientativo, pudien- do variar el mismo por razones de actualización o mo- dificación de los contenidos. DESARROLLO WEB, UX Y UI FULL STACK DEVELOPER

Transcript of DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características...

Page 1: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

BOOTCAMP DE

7/8 MESES

El contenido de este programa es orientativo, pudien-do variar el mismo por razones de actualización o mo-dificación de los contenidos.

DESARROLLO WEB,UX Y UIFULL STACK DEVELOPER

Page 2: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

OBJE-TIVOS

Una de las características principales de un bootcamp es que las jornadas diarias son muy intensas, por ello el día debe ser enfocado de una manera amena y distendida. Se trata de conseguir una inmersión total en la materia du-rante estos seis meses, a fin de que el alumno salga con una visión global del sector del diseño gráfico.

El contenido del Bootcamp de Desarrollo Web, UX y UI ha sido diseñado por nuestro equipo docente y está pensado para cubrir las necesidades de las empresas de la indus-tria del desarrollo web.

Este Bootcamp está dirigido a personas interesadas en el mundo del desarrollo y programación web, no siendo ne-cesarios conocimientos previos para un adecuado apro-vechamiento del mismo.

Page 3: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- UX / UI. Durante este módulo el alumno adquiere conocimientos de diseños de interfaz, interacciones modernas, investigación de usuarios, stakeholders, estrategia de contenidos, ar-quitectura de información, prototipado, combinaciones de estética y usabilidad, investigación de temas o modelos de página web, estudios de imagen y color, etc.

02- Estructura web con HTML5. Durante los últimos años, el estándar HTML5 se ha afianzado en casi la totalidad de las páginas web. Este lenguaje es un markup (de hecho, las siglas de HTML significan Hyper Text Markup Language) usado para estructurar y presentar el contenido para la web. Por ello, y para poder aprovechar al máximo el bootcamp, resulta indispensable prestar especial atención a este módulo para así poder contar con una sólida base de conoci-mientos de uno de los lenguajes más elementales.

03- Apariencia web con CSS3. Después de HTML5, CSS3 es el segundo lenguaje que deberías aprender si piensas dedicarte al diseño y desarrollo web. Aunque HTML5 sirve para definir la estructura, CSS3 te permite darle un aspecto único a tu sitio. Por ello, durante este módulo nos centramos en aprender este lenguaje y continuar consolidando nuestra base de progra-mación.

04- Desarrollo frontend: JavaScript y jQuery. Javascript es el lenguaje de programación web por excelencia de parte del cliente (frontend). El único que puede ejecutarse en todos los na-vegadores sin necesidad de cargar plugins adicionales. Nos permite crear páginas dinámicas, dotando a nuestro sitio web de efectos y funciones que extienden las posibilidades que nos ofrece HTML5. Además, la aparición de librerías como jQuery facilita mucho la creación de complejas funciones y efectos visuales espectaculares

05- Desarrollo backend con PHP7 y mySQL. Después de aprender los anteriores lenguajes de programación web, en este último módulo nos centramos en las necesidades específicas del desarrollo de sitios dinámicos e interactivos desde el lado del servidor (backend), proporcio-nando respuestas completas y precisas a las cuestiones más habituales (gestión de formula-rios, acceso a bases de datos, gestión de sesiones, envío de mensajes de correo electrónico, etc.) gracias al conocimiento de PHP7 y mySQL.

INFOR-MACIÓN

HORARIOS

FULL TIME

PRECIO

7.400 €

Consulta ofertas y promociones actua-les en

[email protected] www.cei.es

DURACIÓN

7/8 MESES

Lunes a jueves(+ algún viernes)

Page 4: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

UN DÍA EN EL BOOTCAMPUna de las características principales de un Bootcamp es que las jornadas diarias son muy inten-sas, por ello, el día debe ser enfocado de una manera amena y distendida. Se trata de conseguir una inmersión total en la materia durante estos siete/ocho meses, a fin de que el alumno salga con una visión global del sector del desarrollo, experiencia de usuario y usabilidad web.

9.00 - 12.00 H.

En el aula

Clases magistrales. Dedicamos las tres pri-meras horas del día a las clases junto a nuestros alumnos de estudios de máster de desarrollo web. Programar no consiste en saber ejecutar decenas de lenguajes de programación. Un alumno verdaderamente formado es aquél que conoce cómo funcio-na el desarrollo web desde cero, entendien-do perféctamente la base común a todos a todos los lenguajes de programación. En estas clases el profesor avanza en el temario de una forma un poco más teórica, aunque siempre entrelazando estas dosis de teoría con prácticas diarias relacionadas y, por su-puesto,en perpetúo contacto con tu orde-nador a fin de lograr una inmersión teórico-práctica plena.

15.00 - 16.00 H.

Break

Los alumnos disfrutan de un momento de descanso distendido en la cafetería de la es-cuela, o donde ellos elijan.

12.00 - 15.00 H.

Zona abierta de trabajo

Los alumnos de bootcamp resuelven dudas junto a sus compañeros y uno de nuestros profesores en la zona abierta de trabajo. Este nuevo profesor propone y supervisa una práctica por grupos de trabajo relacio-nada con el temario impartido en las cla-ses magistrales a fin de afianzar y poner en práctica lo aprendido. Muchas veces esta práctica será real, basada en las instruccio-nes de un cliente.

Algunos viernes:

12.00 - 15.00 H.

Zona abierta de trabajo & eventos

Aquellos viernes lectivos son los días perfec-tos para realizar actividades de grupo, even-tos, visitas a agencias de desarrollo web o para la impartición de masterclasses. En oca-siones las masterclasses pueden ser también impartidas los jueves.

9.00 - 12.00 H.

En el aula

Clases magistrales. Dedicamos las 3 prime-ras horas a clases teorico prácticas junto a nuestros alumnos de estudios de máster. El desarrollo web no consiste en saber ejecutar decenas de lenguajes de programación. Un alumno verdaderamente formado es aquel que conoce cómo funciona la programa-ción web, desde la base. El profesor avanza en el temario de una manera un poco más teórica, aunque siempre entrelazando estas dosis de teoría con prácticas relacionadas y, por supuesto, en perpetuo contacto con tu ordenador a fin de lograr una inmersión teorico-práctica plena.

De lunes A jueves:

16.00 - XX H.

Trabajos y portfolio

Los alumnos dedican las últimas horas del día a terminar prácticas y trabajos de la es-cuela o a desarrollar su portfolio

Page 5: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

OFI-CIAL

CEI es un Centro de Formación Au-torizado por Apple. Por ello, nuestros alumnos podrán obtener la certifica-ción profesional de Apple e impulsar su carrera en tecnologías del diseño y de la información, entornos empresa-riales y mercados B2B.

IBM confía en nosotros y por ello nos ha otorgado la insignia IBM Education Partner. Este sello premia a centros de enseñanza que mantienen y fomen-tan una formación de calidad.

Nuestra escuela se consolida como Centro de Formación de referencia de Maxon en España y nos convertimos en la 1ª escuela de Europa en ser Ma-xon Training Provider for R18.

Nuestra escuela es uno de los cinco centros Adobe Authorized Training Center de España. Este hecho demues-tra que CEI ha cumplido con todas las exigencias que solicita Adobe y, asi-mismo, constituye una garantía de calidad para todos nuestros alumnos.

Page 6: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

MÓDULOD

ISE

ÑO

UX

/UI

Page 7: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- INTRODUCCIÓN

· Presentación y objetivos del curso· Fundamentos en UX/UI· ¿Qué es UX? ¿Qué es el UI?· Diferencias y similitudes

02- EL CLIENTE

· Briefing· Datos del negocio· Toma de requerimientos· Análisis de la competencia

03- UX RESEARCH

· Investigación y análisis· Focus Groups· Eye Tracking· Card Sorting· Test A/B· Test de usuarios· Buyer Persona· Escenarios· Customer Journey· Evaluación Heurística

04- ARQUITECTURA DE INFORMACIÓN

· Inventario de Contenidos· Árbol de contenidos· Sistemas de organización· Sistemas de etiquetado· Sistemas de navegación· Sistemas de búsqueda· Formularios

05- ARQUITECTURA DE INFORMACIÓN

· Principios de diseño· Prototipado con Balsamiq· Diseño o mockups con Sketch· Prototipos y diagramas de flujo· Invision· Marvel

06- MANUAL DE ESTILO

· Grilla· Tipografía

· Color· Iconos y botones

07- UX WRITING E INTERNACIONALIZACIÓN

· Cómo se lee en internet· Principios de escritura para la web· Consejos para webs multilenguaje

08- UX Y SEO

· Similitudes entre UX y SEO· Factores SEO (web)· Factores ASO (apps)

09- GESTIÓN DE PROYECTOS

· Elaboración de un presupuesto web: conceptos y partidas

· Planificación de proyectos· Calendario de entregas y plazos· Presentación del proyecto

10- MOBILE FIRST Y TENDENCIAS

Page 8: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

DIS

O W

EB

CO

N H

TM

L5

MÓDULO

Page 9: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- CONTENIDO DEL CURSO

Introducción al uso de equipos informáticos

· Sistemas operativos:

- Windows- Mac - Linux

· Instalación y gestión de software:- Navegadores- Editores de texto

· Sistema de archivos y carpetas

- Creación de archivos y carpetas- Organización de proyectos web- Rutas absolutas, relativas y URL

· Navegación por internet

Principios en Administración de Redes

· Arquitectura cliente-servidor

- Servidores y protocolos

• Certificados SSL• HTTP/HTTPS• FTP/SFTP/FTPS

- Equipo cliente

· Introducción a routers y switches· DNS (dominios e IPs)

- IP pública- IP local- Nombres de dominio

· Hosting, housing & CPD

Principios básicos para la creación de sitios web estáticos

· Lenguajes Utilizados (HTML5 y CSS3)· Flujo de ejecución del código· Estructura visual de una web

Principios de usabilidad y accesibilidad

Prototipado de una web (UX/UI)

· Interfaz de Usuario (Marvel)· Experiencia de Usuario (InVision)

HTML5

· Etiquetas y atributos· Semántica y uso· Estándar y estructura de documentos

HTML5· Comentarios· Párrafos, titulares y formatos de texto· Multimedia (Imágenes, Audio y Vídeo)· Enlaces y botones

· Listas· Tablas· Formularios· iFrames· Etiquetas meta· Favicom

Page 10: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

CO

N C

SS

3

DIS

O W

EB

MÓDULO

Page 11: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- CONTENIDO DEL CURSO

CSS3

· Enlazar CSS· Selectores y pseudoselectores· Atributos

- Colores- Fondos- Formato y transformación de textos- Alto/Ancho- Bordes- Márgenes- Rellenos- Posiciones- Alineación- Sombreados y degradados- Opacidad- Transformaciones- Filtros

· Pseudoclases (active, hover, check-ed, first-child, last-child, nth-child)

· Pseudoelementos (after, before)· Importación e implementación de

fuentes (media y font-face)· Importación e implementación de

iconos (fuentes y SVG)· Variables CSS· Responsive Design (media queries)· Animaciones CSS (keyframes)

Responsive Design y Mobile Design

· Estructuras generales (Floats)· Estructuras Simples (Flexbox)· Estructuras Complejas (CSS Grid)

Frameworks y APIs

· Bootstrap 4· Materialize· Material Design

Page 12: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

FR

ON

TE

ND

CO

N J

AV

AS

CR

IPT

Y J

QU

ER

Y

MÓDULO

Page 13: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- DESARROLLO WEB(FRONTEND)

Primeros pasos con JavaScript

· Introduccion a la programación defrontend

· JavaScript. Sintaxis general· Incluir JavaScript en documentos

HTML· JavaScript en archivos adjuntos· JavaScript dentro del código HTML· JavaScript. Variables y operadores· Variables locales y variables globales· Variables numéricas· Metodos para variables numéricas· Operadores de asignación· Operadores de incremento y decre-

mento· Operadores matemáticos· Cadenas de texto (strings)· Métodos para cadenas de texto· Variables Undefined· Variables NULL· Variables NaN· Operadores lógicos en JavaScript· Operadores relacionales

Estructuras de control de flujo y variables complejas

· JavaScript. Tipos variables complejas· Arrays en JavaScript· Métodos para Arrays· Condicionales en JavaScript· If / else· Switch· Bucles en JavaScript· Ciclo for· Ciclo while

Funciones en JavaScript

· Funciones en JavaScript· Sintaxis y uso· Scope de JavaScript· Trabajo con funciones

El DOM

· JavaScript. El DOM· Introducción al DOM· Objeto Notation· Crear nodos· Agregar nodos· Modificar, reemplazar y eliminar nodos· Acceso a los atributos del DOM· Modificar estilos de elementos

· Eventos del DOM

JavaScript avanzado. Objetos

· Definicion de objeto· Arrays asociativos· Propiedades· Métodos· Métodos apply() y call()· Introducción a la notación JSON· Trabajo con JSON en JavaScript (I)· Trabajo con JSON en JavaScript (II)

AJAX en JavaScript

· AJAX en JavaScript· Primeros pasos· Primera aplicación· Funcionamiento de una aplicación

AJAX· Métodos y propiedades del objeto

XMLHttpRequest· Objetos para AJAX· Trabajo con AJAX. Listas desplegables· Trabajo con AJAX. Autocompletar for-

mulario· Trabajo con AJAX. Lector RSS· Trabajo con AJAX. Google maps

jQuery básico

· Introducción a Jquery· Pasos para utilizar jQuery· Primer script con jQuery· Básicos de jQuery: añadir y quitar cla-

ses CSS· Básicos de jQuery: mostrar y ocultar

elementos de la página· Básicos jQuery: efectos rápidos con

jQuery· Básicos jQuery: callback de funciones

jQuery· Básicos jQuery: uso de Ajax básico con

jQuery· Básicos jQuery: Ajax jQuery con men-

saje de carga

jQuery Avanzado

• El 3 de jQuery. Metodos esenciales• Función jQuery o función $()• Core/each: each del core de jQuery.• Método size() y propiedad length del

core de jQuery.· Método data() core jQuery· Selectores de jQuery· Selectores de jerarquía en jQuery· Métodos de atributos en jQuery· Acceder y modificar atributos HTML

desde jQuery

Page 14: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

· Método attr() de jQuery, otros usos yremoveAttr()

· Método prop() de jQuery y diferenciascon attr()

· Métodos de CSS de jQuery· Método css() de jQuery· Funciones CSS de jQuery para conocer

el tamaño y posición de elementos· Eventos en jQuery· Manejadores de eventos en jQuery· Introducción de Objeto evento en

jQuery· Eventos de ratón en jQuery mouseen-

ter y mouseleave· Eventos de teclado en jQuery· Definir eventos con bind() y eliminarlos· Eventos definidos con live() en jQuery· Delegated events en jQuery· Efectos en jQuery· jQuery animate(): animación de pro-

piedades CSS· Animaciones de color con jQuery.· Fading en jQuery· Colas de efectos en jQuery· Método queue() para acceder a una

cola de efectos· Meter funciones en una cola de efec-

tos jQuery· Parar la ejecución de una cola de efec-

tos jQuery· Método delay() para retrasar la ejecu-

ción de efectos de la cola· Cola de efectos personal (no predeter-

minada) en jQuery· Desarrollo de plugins en jQuery· Introducción al desarrollo de plugins

en jQuery

Page 15: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

BA

CK

EN

DC

ON

PH

P7

Y M

YS

QL

MÓDULO

Page 16: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

01- DESARROLLO WEB(BACKEND)

Primeros pasos con PHP7

· Introduccion a la programación debackend

· Estructura básica de una página PHP· Las etiquetas PHP· La función echo· Separador de instrucciones· Comentarios· Mezclar PHP y HTML· Normas de denominación· Configuración de PHP· El archivo de configuración php.ini· Información sobre la configuración· Juego de caracteres· Utilizar PHP desde la línea de comandos· Las bases del lenguaje PHP· Constantes. Definición y alcance· Variables. Inicialización y asignación· Variables. Alcance y duración· Variables dinámicas (o variables varia-

bles)

Tipos de datos en PHP7

· Tipos de datos· Tipos disponibles· Tipos de datos escalares y especiales.· Arrays· Arrays. Creación, manipulación y alcance· Operadores· El operador de asignación por valor· El operador de asignación por referencia· Los operadores aritméticos· El operador de cadena· Los operadores combinados· Los operadores lógicos y de comparación· El operador ternario· El operador de unión NULL· El operador de comparación combinado· Precedencia de los operadores

Estructuras de control en PHP7

· Estructuras de control en PHP 7. Con-dicionales

· La estructura if· La estructura switch· Estructuras de control en PHP 7. Ciclos· La estructura if· La estructura while· La estructura do ... while· La estructura for· La estructura foreach· Las instrucciones continue y break

· Incluir un archivo· Funcionamiento y utilización· Interrumpir el script

Funciones en PHP7 (I)

· Utilizar las funciones PHP· Preámbulo· Manipular las constantes, las variables

y los tipos de datos· Constantes· Variables· Tipos de datos· Conversiones· Manipular variables numericas· Manipular variables strings· Manipular arrays· Utilizar expresiones regulares· Estructura de una expresión regular

Funciones en PHP7 (II)

· Manipular las fechas· Funciones para manipular los archivos

en el servidor· Manipular los encabezados HTTP· Escribir funciones y clases PHP· Declaración y llamada· Parámetros· Sintaxis· Valor predeterminado· Declaración del tipo de datos· Pase por referencia· Lista variable de parámetros· Consideraciones sobre las variables

utilizadas en las funciones· Variables locales/globales· Variables estáticas· Las constantes y las funciones

Funciones en PHP7 (III)

· Escribir funciones y clases PHP· Recursividad· Función anónima· Estructura básica de una página PHP· Función generadora· Clases· Concepto· Definir una clase· Instanciar una clase· Legado· Otras características de las clases· Clases o métodos abstractos· Información sobre la configuración· Clases o métodos finales· Interfaces· Constantes de clases

Page 17: DESARROLLO WEB, UX Y UI - CEI: Escuela de Diseño · 2020-04-28 · Una de las características principales de un bootcamp es ... 04-Desarrollo frontend: JavaScript y jQuery. Javascript

· Traits· Clases anónimas· Excepciones· Administrar los errores en un script

PHP· Información general· Mensajes de error de PHP· Las funciones de gestión de errores

Bases de datos MySQL

· Gestión de los formularios y los enlaces· Rápido recordatorio sobre los formula-

rios· Construir un formulario de forma diná-

mica· Procesar un formulario utilizando un

script PHP· Recuperar los datos de una URL o de

un formulario· Recuperar los datos pasados por la URL· Utilizar una matriz para pasar datos en

la URL· Transferir caracteres especiales· Recuperar los datos introducidos en el

formulario.· Usar un array para recuperar los datos

introducidos· Pasar información en un campo de

formulario oculto· Los diferentes tipos de campos· Controlar los datos recuperados· Limpieza de los espacios deseados· Datos obligatorio· Longitud máxima de una cadena· Caracteres permitidos para una cade-

na - Formato· Validez de una fecha - Rango de valores· Validez de un número - Rango de

valores· Validez de una dirección de correo

electrónico· Intercambiar un archivo entre el clien-

te y el servidor· Enviar un archivo desde el cliente

(upload)· Descargar un archivo desde el servidor

(download)· Trabajo con bases de batos· Acceder a las bases de datos· El concepto de fetch· Conexión y desconexión· Obtener información sobre el servidor

MySQL· Obtener información en caso de error

de conexión· Seleccionar una base de datos· Utilizar consultas no preparadas· Conocer el número de líneas del resul-

tado de una consulta de lectura· Extraer el resultado de una consulta

de lectura· Obtener información sobre el resulta-

do de una consulta de actualización· Gestionar los errores· Utilizar consultas preparadas· Preparar una consulta· Asociar variables PHP a los parámetros

de la consulta· Ejecutar la consulta preparada.· Vincular variables PHP con las colum-

nas del resultado de una consulta delectura

· Extraer el resultado de una consultade lectura

· Utilizar un resultado almacenado.· Obtener información sobre el resulta-

do de una consulta de actualización· Gestionar los errores· Llamar a un programa almacenado· Procedimiento almacenado· Función almacenada· Utilización de SQLite· Ejecutar una consulta· Vincular las variables de PHP a los pa-

rámetros de una consulta preparada· Ejecutar una consulta preparada· Ejecutar una consulta no preparada· Extraer el resultado de una consulta

de lectura· Actualizar los datos y gestionar las

transacciones· Ejemplos de integración en formularios· Crear una lista de selección en un for-

mulario· Visualización de una lista· Formulario de entrada con lista· Formulario de búsqueda y de intro-

ducción de datos

Administrar sesiones

· Administrar las sesiones· Información general· Identificación por formulario· Identificación a través de autentica-

ción HTTP· Verificar las credenciales de identifica-

ción introducidas· Utilizar cookies· Utilizar la gestión de sesiones de PHP· Implementación· Autogestión de la transmisión del

identificador de sesión· Conservar la información de una visita

a otra· Breve resumen de las variables Get/

Post/Cookie/Session