CARRERA EN DISEÑO WEB FULL STACK DEVELOPER

Información académica Temario

01 Introducción 01 Experiencia Usuario(UX)
02 Salidas Profesionales 02 Interfaces Gráficas (UI)
03 Conexión Laboral 03 HTML5 y CSS3
04 Javascript, jQuery, Angular11 y
ReactJS
05 PHP y MYSQL
06 ReactJS, Angular, NodeJS y
MongoDB

Cuesta de San Vicente, 4 | 28008 Madrid | Telf: +34 915 41 51 51 | www.trazos.net

 www.trazos.net

CARRERA EN DISEÑO WEB FULL STACK DEVELOPER

Apariencia, experiencia, usabilidad y eficiencia. Si dominas estos campos tu Horas totales
futuro en el mundo del diseño web está más que garantizado. 900 Horas
Este es el objetivo de nuestra Carrera en Diseño Web Full Stack Developer:
convertirte en un profesional del diseño web que no le tiene miedo a nada, Horarios
formado al máximo nivel en los dos grandes pilares del desarrollo web: 3 horas diarias de L-V.
Front-End y Back-End.
Módulos
Para profesionalizarte en el primero, te adentrarás en el mundo del lenguaje Experiencia Usuario (UX).
HTML5 y el CSS3, con el que darás forma a la apariencia de cualquier web. Interfaces Gráficas (UI).
Para darle vida tanto a tu trabajo en Front-End como Back-End, hemos Html5 y Css3.
preparado una formación extensiva en Javascript, jQuery y Angular, Javascript, jQuery, Angular11 y
herramientas clave para desarrollar tu trabajo en HTML. ReactJS.
Php y Mysql.
Por supuesto, no nos olvidamos de una de las disciplinas que más Angular, ReactJS, NodeJS y
importancia ha ganado en los últimos años en todo tipo de agencias, estudios MongoDB.
y clientes en general: el UX y UI, dos conceptos vitales a la hora de determinar
el éxito o el fracaso de una web perfectamente diseñada y gestionada.

Además. dominarás a la perfección los Frameworks más actuales (ReactJS y

Angular) con los que podrás desarrollar las aplicaciones más completas.
 www.trazos.net

salidas profesiOnales_
Diseñador y desarrollador web front-end Maquetador de front-end Programador Web Front-End

Programador de aplicaciones web Programador JavaScript Junior, de jQuery Junior y de Angular Junior

Programador web Back-end Junior Programador de aplicaciones servidor Junior

Programador web Front-end Junior Gestor de base de datos con MySQL Diseñador UX/UI

Consultor experto en Experiencia de Usuario Diseñador de producto digital Arquitecto de información

Diseñador de gráfica interactiva y ads Experto en usabilidad Programador Web Front End con Frameworks

Programador de aplicaciones web Mean y Fullstack Developer UX Auditor UX Manager UX Designer

conexión laboral_
La calidad se mide en confianza. Por ello nos sentimos más que orgullosos de contar con más de 1.100 empresas en nuestra
bolsa de trabajo, profesionales del más alto nivel que confían en la preparación con que nuestros alumnos comienzan sus
carreras. Más allá de la excepcional tasa de empleabilidad, el mayor logro de Trazos consiste en seguir abriendo a cada
promoción las puertas de ese puesto, esa agencia, ese proyecto de los que siempre quisieron formar parte.
 www.trazos.net

MÓDULO

EXPerIENCIA DE USUARIO (UX)

150 HORAS

Lo que hace que te decidas entre esta y aquella app o página web va más allá del apartado visual. La experiencia de usuario es un
campo que ha pasado a ser más que fundamental dentro de cualquier estudio, agencia o freelance que pretenda sacar adelante un
proyecto de desarrollo digital. Por ello, formarte como experto en UX significa adquirir las habilidades que te abrirán las puertas
a una disciplina que se ha convertido en poco menos que valor indispensable dentro del mundo del desarrollo creativo de webs,
apps, web apps, intranets o interfaces de usuario, entre otros tantos proyectos y posibilidades.

Herramientas
 www.trazos.net

01/ Introducción al UX. 08/ Inteligencia Artificial: Chatbots y VUI.

• Siglo XX.
• Qué es el diseño UX. Introducción a IoT.
• ¿Qué es loT?.
02/ Metodologías Ágiles. • Tipos de dispositivos existentes y sus usos en los
• Qué es el Agile. diferentes sectores (retail, industria 4.0, transporte,
• Qué es el Design Thinking. ganadería, smart cities, medicina, vida cotidiana...) .
• MVP, ¿qué es?.
UX para el IoT.
03/ Definición de producto. • Tipos de interacción (controles fisicos, visuales,
• Qué es el diseño estratégico. pantallas, audio, voz, tactiles, gestos, Context-
• Los modelos de negocio digitales. Sensitive interaction y multi-modal).
• Scope Canvas. • Desafíos de UX en IoT (problemas de conectividad,
• Lean UX Canvas. seguridad, ux y multiples interfaces) .
• Value proposition Canvas. • Concepto de Slippy UX.
• Benchmarking. • Concepto de Zero UI.
• Elevator Pitch y storytelling.
Inteligencia artificial
04/ User Research. • ¿Qué es IA?
• Qué es el User Research. • Tipos de IA.
• Proceso del UX Research. • Machine learning y Big Data.
• Artefactos. • Chatbots.
• Analizar el problema. • Asistente virtual.
• VUI.
05/ Arquitectura de la información.
• Qué es la AI. 09/ Accesibilidad y diseño inclusivo.
• Tipos de necesidad de información. • El problema de la “Brecha digital”.
• Sistema de etiquetado de una Al. • Accesibilidad en el mundo online.
• Sitemap y userflows. • Principios de accesibilidad.
• Prototipos • Plugins para medir la accesibilidad.

06/ Diseño de interacción y Animación. 10/ Test de usuario y Medición UX.

• Qué es el diseño de interacción. • Qué es un test de usuario.
• Qué hace un Interaction Designer. • Qué es un test de guerrilla.
• Principios de diseño de interacción. • Plataformas para realizar user testing.
• Interacciones y formularios • Preparación de un test de usuario.
• Teoría de la animación • Qué es la medición UX.
• Microinteracciones • Herramientas para la medición UX.
• Herramientas de animación
• Onboarding del usuario. 11/ Evaluación Heurística.
• Qué es un Design System. • Qué es la EH.
• Componentes de un Design System • Reglas o principios para realizar una EH.
• Sistemas de evaluación.
07/ Narrativa UX. • Auditorias de UX
• Qué es narrativa en UX.
• Copywriting vs UX Writing. 13/ Portfolio UX y entrevistas.
• El microcopy. • Qué es un portfolio UX.
• La voz y el tono. • Qué habilidades tienes.
• CV y carta de presentación.
• Entrevistas de trabajo.

14/ Presentación final de proyecto.

• Cómo presentar el proyecto.
 www.trazos.net

MÓDULO

INTERFACES GRÁFICAS (UI)

150 HORAS

Saber diseñar interfaces gráficas supone crear mucho más que un diseño: implica conocer todos los elementos de identificación,
navegación, de contenidos y de acción. Para alcanzar ese objetivo, hemos preparado un temario que abarca todas las necesidades
y ámbitos que el mercado demanda en un diseñador profesional, desde el desarrollo de los aspectos más visuales, estéticos y
creativos a los detalles técnicos que te permitirán concebir webs únicas e inolvidables.

Herramientas
 www.trazos.net

01/ Diseño Digital / Usabilidad / Accesibilidad.

• Diferencias entre Diseñador gráfico y diseñador digital.
• Diferencias entre UX-UI.
• Usabilidad y accesibilidad.
• Reglas heurísticas Jakob Nielsen.
• Diseño de interacción de Bruce Tognazzini.
• Tendencias.
• Procesos de un proyecto digital.
• Metodologías
• Design Thinking

02/ Diseño Visual.

• Primeros pasos en Sketch, Figma y XD.
• Diseño responsive, grids y layout.
• Diseño atómico.
• Leyes del diseño de interfaces.
• Moodboards.
• Sketchs / Bocetos
• Guías de estilo / Design System
• Iconografía.
• Color
• Gestalt
• Tipografía
• Botones y estados
• Wireframes de alta fidelidad.
• Diseño para smart watchs.
• Arquitectura de la información.
• Landing pages.

03/ Animación.
• Principios de la animación en UI
• Primeros pasos en Principle
• Animación de elementos
• Navegación con scroll y paginaciones
• Microinteracciones
• Prototipo interactivo
• Invision y Marvel

04/ HTML Y CSS.

• Diferencias entre estructura y diseño visual.
• Estructuras básicas.
• Añadir estilos visuales con CSS (tipografías, colores y efectos)
• Conocer el inspector de elementos.

05/ Wordpress.
• ¿Qué es un CMS?.
• Comparativa con otros CMS / Webflow
• Uso de servidor local.
• Instalación wordpress en local.
• Explicación panel back end.
• Explicación del front end.
• Utilización de plugins y temas.
• Uso servidor real.
• Migración de local a servidor real.

06/ Vida laboral.

• Cómo afrontar el mundo laboral.
 www.trazos.net

MÓDULO

HTML5 Y CSS3
150 HORAS

El mundo de la web evoluciona de manera constante e imparable. Por ello, resulta indispensable contar con una sólida base de con-
ocimientos en sus lenguajes más elementales. El Curso de HTML5 y CSS3 ha sido pensado para ofrecerte una formación íntegra y
profesional en las posibilidades de los dos principales lenguajes de programación empleados en desarrollo web, base que te abrirá
las puertas de cualquier proyecto de diseño online.

Herramientas
 www.trazos.net

01/ Diseño Web vs Programación web. 07/ Banners.

• Lenguajes de programación web y su aplicación a proyectos. • Introducción: Qué son y uso en empresas.
• Perfiles: Frontend, Backend, Mean y Fullstack. • Tipos de banners y formatos. Introduciendo ClickTag.
• Análisis de tendencias en programación web.
• Fases del proceso web. 08/ Newsletter.
• Conceptualización gráfica. • Introducción: Qué son y uso en empresas.
• Layouts y tipos de estructura. • MJML.io: Preprocesador de newsletters.
• El color en la web.
• Principios de usabilidad (UX / UI). 09/ PHP en WordPress.
• Introducción a PHP 7: Qué es y para qué sirve.
02/ HTML5. • MAMP como servidor.
• Introducción al lenguaje HTML 5. • Introducción a CMS: Wordpress.
• Estructura: header, footer, main, section, article y aside. • Wordpress Panel de control.
• Texto: Strong, span y em. • Wordpress Páginas, Entradas y Configuración.
• Enlaces. • Wordpress Temas vs Plugins.
• Imágenes y Picture.
• Imágenes SVG: Imagen vs Código. 10/ Subida a Producción.
• Etiquetas Vídeo y Audio.
• Hosting, dominio y proveedores.
• iFrames.
• Subida de archivos por FTP.
• Listas.
• Tablas.
11/ GIT.
• Formularios.
• Atributos data-. • Introducción.
• Etiquetas Meta. • Comandos básicos: init, add, commit, push y pull.
• Meta Open Graph. • Ramas: branch y merge.
• Aplicaciones GIT: Github Desktop y Bitbucket.
03/ CSS3.
• Selectores: Básicos, Avanzados, Pseudoelementos (before/after)
• Unidades de medida: básicas, avanzadas y función calc().
• Tipografía: @font-face y Google Fonts.
• Maquetación en Flex.
• Maquetación en Grid.
• Transition.
• Animation + @keyframes.
• Custom properties: variables en CSS.
• Responsive: @media.

04/ SCSS y Task Runners.

• Introducción a preprocesadores y Task Runners.
• Usando Prepros.
• Anidación de elementos.
• Variables en SASS.
• Usando Mixins.

05/ Javascript.
• Introducción a Javascript Nativo vs Typescript.
• Estado de Javascript: Webs vs Aplicaciones.
• Variables: let,const, var.
• Funciones: parámetros e invocación.

06/ jQuery en empresas.

• Introducción y porqué se sigue usando.
• Selectores.
• Eventos.
• Efectos de Javascript junto a CSS.
 www.trazos.net

MÓDULO

JavaScript, Jquery, Angular11 y ReactJS

150 HORAS

Los lenguajes de programación son el ADN de internet. Saber manejarlos y aplicarlos a niveles profesionales es tener
la capacidad de construir el principal medio de comunicación y entretenimiento de nuestros días. Adéntrate en uno
de los principales con Javascript y dos de sus principales librerías: jQuery y Angular.

Herramientas
 www.trazos.net

01/ Introducción a la programación web 10/ Typescript y ECMAScript

• Introducción: Javascript, qué es y para qué sirve. • Introducción: Qué es y cómo funciona.
• Javascript vs ECMAScript vs Vanilla JS. • Task Runner: Prepros.
• Frameworks: Qué son y los más demandados en empresas. • Tipos de datos.
• Funciones.
02/ Javascript Nativo. • Interfaces.
• Reglas de sintaxis del código. • Módulos.
• Mensajes de error y consejos para depurar el código (debug).
• Herramientas de depuración de JavaScript. 11/ Introducción a Frameworks
• Qué frameworks se demandan.
03/ Variables, constantes y operadores • Angular vs React vs Vue vs Svelte.
• Variables, let y const. • Introducción a Node y NPM.
• Declaración, asignación y ámbito (scope). • CLI: Usando la terminal.
• Operadores aritméticos, comparación, • Uso con GIT.
lógicos, asociativos, concatenación. • Componente.

04/ Funciones 12/ Frameworks: Angular 11

• Declaración, uso. • Angular CLI: Instalación y uso.
• Parámetros: transmisión de datos. • Componentes.
• Parámetros SPREAD y deconstrucción. • Directivas.
• Devolviendo datos: return. • Eventos.

05/ Estructuras lógicas 13/ Frameworks: ReactJS

• Condicionales. • CLI: Usando Create-React-app.
• Bucles: for, while / do while. • JSX: Introducción.
• Switch. • Componentes.
• Props.
06/ Objetos. • State y Hooks.
• Eventos.
• Introducción a objetos y su importancia en Frameworks.
• Definición y creación mediante en ECMAScript y Typescript.
• Propiedades y Métodos.
14/ GIT
• Prototipos y Herencia. • Introducción.
• Comandos básicos: init, add, commit, push y pull.
07/ Arrays • Ramas: branch y merge.
• Aplicaciones GIT: Github Desktop y Bitbucket.
• Arrays de una dimensión.
• Arrays multidimensionales.
• Recorrer Arrays.
• Funciones de arras: map, filter, push…

08/ AJAX y JSON.

• Pidiendo datos con Fetch.
• Promesas con then().
• JSON: Qué es, stringify y parse.
• Recibiendo datos de una API REST.

09/ jQuery
• Introducción y porqué se usa en empresas.
• Selección de elementos.
• Manejo de eventos.
• Efectos con jQuery y SCSS.
 www.trazos.net

MÓDULO

php y mysql
150 HORAS

Conocer el lenguaje PHP es conocer el lenguaje de servidor más extendido en la red, el cual, junto con MySQL, uno
de los motores de bases de datos más robustos y difundidos, se ha vuelto una pieza clave para todo desarrollador
back-end. El conocimiento y manejo de ambos son altamente recomendables para aquellas personas que quieran
tener una visión global de la web.

Herramientas
 www.trazos.net

01/ Introducción al entorno 10/ Recepción de datos

• Servidores Apache vs Ngix. • Formularios y métodos de envío: GET y POST.
• MAMP: Instalando el entorno. • Recepción de datos con $_REQUEST.

02/ PHP 11/ Introducción a un CMS (CRUD)

• Constantes y variables: tipología y alcance. • Definición e importancia de un CMS.
• Reglas de nombres y palabras reservadas. • Definición de una estructura MVC.
• Operadores: aritméticos, comparación, • Sesiones de usuarios y cookies.
lógicos, asociativos, concatenación. • Autentificación de usuarios.
• Operadores especiales: nave espacial.
• Usando Namespace. 12/ PHP en Wordpress
• Wordpress: Entradas, páginas, menú widgets, y temas.
03/ Arrays • Estructura básica de una plantilla Wordpress: The Loop.
• Array clásicos. • Funciones más usadas.
• Array Asociativos. • Uso de Hooks.
• Arrays multidimensionales.
• Recorriendo arrays. 13/ Configuración básica de servidor
• Funciones con Arrays. • Archivo .htaccess.
• Archivo php.ini.
04/ Funciones
• Declaración e invocación. 14/ Frameworks: Laravel 8
• Transmisión de datos: Parámetros y argumentos. • Instalación y puesta en marcha.
• Devolviendo valores: return. • CLI: Composer y Artisan.
• Plantillas y vistas.
05/ Estructuras lógicas • Estructuras de control.
• Condicionales: If, else if. • Enrutamiento: De.
• Bucle For. • finición y uso.
• Bucle While y do-while. • Controladores: De.
• Bucle Switch. • finición y uso.
• Interrumpir y abandonar los bucles. • Conexión con Base de datos.

06/ POO (Programación Orientada a Objetos) 15/ Frameworks: Symfony 5

• Clases, Clases anónimas y Objetos. • Instalación y puesta en marcha.
• Propiedades y Métodos: definición y visibilidad. • CLI: Composer y Artisan.
• Parámetros y devolución de valores. • Plantillas y vistas.
• Herencia e Interfaces. • Estructuras de control.
• Enrutamiento: De.
07/ Funciones predefinidas del lenguaje • finición y uso.
• Manipulación de cadenas de caracteres. • Controladores: De.
• Gestionando fechas y horas. • finición y uso.
• Acceso a directorios. • Conexión con Base de datos.
• Acceso y manipulación de ficheros.
• Subir ficheros al servidor. 16/ Introducción a Docker
• Función mail() para enviar correos. • Introducción a images, containers y volumes.
• Ventajas de usar Docker.
08/ MySQL y PHPMyAdmin
• Introducción y estructura de una base de datos.
• Modelado de datos para base de datos relacionales.
• Creación de Base de datos, tablas y campos.
• Introducción de registros.
• Importación y exportación: Bases de datos, tablas y datos.
• Usuarios y Privilegios.
• Consultas básicas: Select, Insert, Update y Delete.
• Select con funciones SQL y subconsultas.

09/ Conectando PHP a SQL

• Conectando PHP a SQL con procedimientos (mysqli).
• Conectando PHP a SQL con objetos (PDO).
• Capturando excepciones.
 www.trazos.net

MÓDULO

ReactJS, Angular, NodeJS y MongoDB

150 HORAS

Con una formación como esta, poder crear una app a medida ahora está en tus manos. Conviértete en un programa-
dor Full Stack especializado en los Frameworks más potentes: ReactJS y Angular. Aprende todo sobre JavaScript y
crea aplicaciones desde la base de datos hasta la maquetación.

Herramientas
 www.trazos.net

01/ Introducción.
• Qué es un framework y porqué se usan.
• Tendencias en 2021.
• Frameworks más demandados.
• SQL vs NoSQL.

02/ Herramientas Básicas.

• Visual Studio Code y plugins
• Terminal: Uso para NodeJS.
• Postman: Recibiendo datos.

03/ NodeJS con ExpressJS.

• Introducción al Entorno NodeJS.
• Proceso: Qué es y Ciclo de Vida en NodeJS.
• Archivo package.json y carpeta. node_modules.
• Paquetes
• Exportación e Importación.
• Módulos (FS, HTTP, URL).
• ExpressJS Instalación y configuración.
• ExpressJS Conectando con una Base de datos.
• ExpressJS Peticiones: POST, PUT, GET y DELETE.

04/ MongoDB.
• Introducción a NoSQL.
• Instalación de MongoDB.
• JSON: Qué es y cómo funciona.
• Operaciones CRUD básicas: Insertar, buscar, actualizar y borrar.
• Operaciones CRUD avanzadas: : read, find, create.
• Operadores: comparación y evaluación.
• Schemas y tipos de datos.
• Aggregation Framework.
• Mongoose para ExpressJS.

05/ Frameworks: Angular 11.

• Angular CLI: Instalación y uso.
• Componentes.
• Directivas.
• Eventos.
• Routing.
• Servicios.
• Conexión con MongoDB.
• Producción y subida del proyecto

06/ Frameworks: ReactJS.

• CLI: Usando Create-React-app.
• JSX: Introducción.
• Componentes.
• Props.
• State y Hooks.
• Eventos.
• Bucles y Condicionales.
• Producción y subida del proyecto.