DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map...

17
BOOTCAMP DE 6 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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map...

Page 1: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

BOOTCAMP DE

6 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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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

5.600 €

Consulta ofertas y

promociones actua-

les en

[email protected]

www.cei.es

DURACIÓN

6 MESES

Lunes a jueves

(+ algún viernes)

Page 4: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

MÓDULODIS

EÑO

UX/U

I

Page 7: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

DIS

O W

EB

CO

N H

TM

L5

MÓDULO

Page 9: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

CO

N C

SS

3

DIS

O W

EB

MÓDULO

Page 11: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

01- DESARROLLO WEB(FRONTEND)

Primeros pasos con JavaScript

· Introduccion a la programación defrontend

· JavaScript. Sintaxis general

· Incluir JavaScript en documentosHTML

· 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ónAJAX

· Métodos y propiedades del objetoXMLHttpRequest

· 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 conjQuery

· 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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

· 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 conocerel tamaño y posición de elementos

· Eventos en jQuery

· Manejadores de eventos en jQuery

· Introducción de Objeto evento enjQuery

· 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 unacola 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 pluginsen jQuery

Page 15: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

BACKEND

CON P

HP7

Y M

YSQL

MÓDULO

Page 16: DESARROLLO WEB, UX Y UI · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

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 variablesy 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 archivosen 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 variablesutilizadas 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 · 2 days ago · · Traao con AA Lector RSS · Traao con AA oogle map juery básico · Introducción a uery · ao para utiliar uery · rimer cript con uery

· 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 unscript PHP

· Recuperar los datos de una URL o deun formulario

· Recuperar los datos pasados por la URL

· Utilizar una matriz para pasar datos enla URL

· Transferir caracteres especiales

· Recuperar los datos introducidos en elformulario.

· Usar un array para recuperar los datosintroducidos

· Pasar información en un campo deformulario 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 devalores

· Validez de una dirección de correoelectró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 servidorMySQL

· Obtener información en caso de errorde 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 consultade 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ámetrosde 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 consultade lectura

· Actualizar los datos y gestionar lastransacciones

· 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 delidentificador de sesión

· Conservar la información de una visitaa otra

· Breve resumen de las variables Get/Post/Cookie/Session