Aprende a crear páginas web con HTML, CSS y Wordpress aplicando los fundamentos del diseño UX / UI.
Detalles del Curso
Este curso te ofrece una formación para crear páginas Web integrando UX (User Experience) y UI (User Interface), utilizando plantillas de WordPress que se adaptarán a todos los dispositivos, con funcionalidades y herramientas optimizadas para el SEO, el posicionamiento y la venta online entre otras muchas posibilidades.
Aprende a crear webs con WordPress, el sistema de gestión de contenido más popular del mundo y el más utilizado para crear y gestionar webs en España.
Instala y configura los plugins más utilizados como Yoast SEO, Elementor Page Builder, Contact Forms 7, Ninja Forms, Woocommerce, Google Analytics, entre otros, como plugins de idioma, integración de botón de Whatsapp, Foros, integración de Redes Sociales, etc, que nos permitirán dotar de infinitas y nuevas posibilidades las funcionalidades de nuestro sitio web.
Comprenderás los fundamentos de Chrome DevTools con los cuales podrás tener acceso a la consola, simular la visualización en dispositivos móviles e inspeccionar todos los elementos de los sitios web de Internet.
Aprenderemos los fundamentos de HTML5 y CSS3, los principales lenguajes de programación web, para editar la estructura de WordPress y entender cómo modificar las plantillas.
Tendrás un espacio propio en el servidor de Gesenco Formación para instalar WordPress y desarrollar todas tus prácticas del curso, acercándote lo más posible a la experiencia real del trabajo web, desde el concepto hasta el desarrollo y la publicación.
TEMA 1: INTRODUCCIÓN A INTERNET Y AL DESARROLLO WEB
- ¿Qué es internet?
- ¿Qué es la web?
- Hipervínculos
- Dominios
- Breve Historia de internet
TEMA 2: INTRODUCCIÓN AL DISEÑO WEB
- Introducción al diseño
- Introducción al diseño web
- Introducción al diseño UI (User Interface) o diseño de interfaces
- Introducción al diseño UX (User Experience) o de experiencia de usuario
- Colores
- Tipografía
- Composición
- Imágenes y resolución
TEMA 3: INTRODUCCIÓN AL DISEÑO RESPONSIVE
- Adaptación de elementos
- Mobile-First design
TEMA 4: MI PRIMER DISEÑO WEB
- Estructura web básica
- Práctica Diseño 1 – Estructura Web
- Secciones de una página web
- Práctica Diseño 2 – Contenido Web
TEMA 5: INTRODUCCIÓN AL HTML
- ¿Qué es HTML?
- Etiquetas HTML5: Head
- Etiquetas de HTML 5: Navegación
- Etiquetas HTML5: Insertar imágenes
- Etiquetas HTML5: Contenido
- Etiquetas HTML5: Footer
- La estructura de la página web
TEMA 6: INTRODUCCIÓN AL CSS
- ¿Qué es CSS
- Propiedades CSS
- Añadir CSS
- Ejemplo HTML y CSS
- Recursos CSS
TEMA 7: RECURSOS, HERRAMIENTAS Y PROGRAMAS.
- Recursos
- Portales de imágenes y vectores
- Webs de ejemplos de código
- CMS: WordPress
TEMA 1. HERRAMIENTAS NECESARIAS
- Introducción
- Editor de texto
- Navegadores
TEMA 2. INTRODUCCIÓN HTML
- Introducción HTML
- ¿Cómo creamos documento HTML?
- Características básicas
TEMA 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS
- Textos en HTML
- Enlaces
- Listas en HTML
- Imágenes y objetos
TEMA 4. TABLAS, FORMULARIOS Y ESTRUCTURAS
- Tablas
- Formularios
- Estructuras y layout
TEMA 5. OTRAS ETIQUETAS IMPORTANTES
- Otras etiquetas importantes
TEMA 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN
- ¿Qué es la Metainformación?
- Accesibilidad
- Validación
TEMA 7. INTRODUCCIÓN CSS
- Introducción CSS
- Soporte de CSS en navegadores
- Especificación oficial
- Funcionamiento básico de CSS
- ¿Cómo incluir CSS en la Web?
- Estilo básico
- Medios CSS
- Comentarios
- Sintaxis de la definición
TEMA 8. SELECTORES, UNIDADES DE MEDIDA Y COLORES
- Selectores CSS
- Unidades de medida
- Colores
TEMA 9. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN
- Modelo de cajas
- Propiedades de las cajas
- Margen, relleno, bordes y modelo de cajas
- Posicionamiento y visualización
- Posicionamiento
- Visualización
TEMA 10. ESTRUCTURAR UNA PÁGINA LAYOUT
- Introducción a layout
- ¿Cómo centrar una página horizontalmente?
- ¿Cómo centrar una página verticalmente?
- Estructura y layout
- Altura/anchuras máximas y mínimas
- Estilos avanzados
TEMA 11. TEXTO, ENLACES, IMÁGENES Y LISTAS
- Textos en CSS
- Enlaces
- Imágenes
- Listas
TEMA 12. TABLAS, FORMULARIOS Y SHORTHAND
- Tablas
- Formulario
TEMA 13. OTRAS UTILIDADES DE CSS
- Versión para imprimir
- Personalizar el cursor
- Hacks y filtros
- Prioridad en las declaraciones
- Validar CSS
- Recomendaciones Generales
- Recursos útiles
TEMA 14. FIREBUG
- ¿Qué es Firebug?
- ¿Cómo se instala?
- ¿Cómo usamos Firebug?
TEMA 1. INTRODUCCIÓN HTML5
- ¿Qué es HTML5?
- ¿Cuáles son las mejoras?
- Etiquetas Obsoletas
- Etiquetas modificadas
- Lista de etiquetas HTML5
- Atributos eliminados
- Otros cambios
- Estructura HTML5
- Nueva estructuración del body
- Otros elementos nuevos de estructuración
TEMA 2. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES
- Introducción a atributos globales
- Nuevos atributos
- Introducción a los nuevos eventos
TEMA 3. NUEVOS ELEMENTOS SEMÁNTICOS
- Elemento bdi
- Elemento command
- Elemento data
- Elementos details
- Elemento mark
- Elemento meter
- Elemento progress
- Elemento ruby
- Elemento time
- Elemento wbr
TEMA 4. MEJORAS EN LOS FORMULARIOS
- Nuevos elementos para los formularios
- Cambios en el atributo type (input)
- Nuevos atributos para form
- Nuevos atributos para fieldset
- Nuevos atributos para input
- Nuevos atributos para textarea
TEMA 5. OTRAS MEJORAS DE HTML5
- Introducción a los elementos multimedia
- Etiqueta source
- Etiqueta track
- Elemento video
- Elemento audio
- Elemento embed
- Elemento canvas
- Introducción a MathML
- Introducción a SVG
- Introducción a Drag and Drop
- Validador HTML5
TEMA 6. INTRODUCCIÓN A CSS3
- Introducción
- Unidades, colores y fuentes
- Nuevos Selectores y pseudo-clases
TEMA 7. ANIMACIONES, FONDOS Y BORDES
- Propiedades para la animación
- Nuevas propiedades para los fondos
- Nuevas propiedades para bordes
TEMA 8. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES
- Propiedades de las cajas
- Propiedades de las cajas flexibles
- Propiedades del color
- Propiedades para las fuentes
TEMA 9. ENLACES Y MULTI-COLUMNAS
- Propiedades para los hiperenlaces
- Propiedades de las multi-columnas
TEMA 10. TEXTO Y 2D/3D TRANSFORMACIONES
- Propiedades para texto
- Propiedad 2D/3D Transform
TEMA 11. TRANSICIONES E INTERFAZ DE USUARIO
- Propiedades para las transiciones
- Propiedades para la interfaz de usuario
- Validación CSS3
TEMA 1. INTRODUCCIÓN
- Diferencias entre navegadores
- Mejorar la compatibilidad
- Normalizar estilos
- Media Queries
TEMA 2. MEDIA QUERIES
- Objetivo y orígenes
- Sintaxis de las media Queries
- Ubicación de las media Queries en CSS
- Tamaños de pantalla
- Móvil
- Tablet
- Escritorio PC
- Pantallas de TV, HD y 4K
- Viewport
- Cuadrículas
TEMA 3. DISEÑO WEB RESPONSIVE
- Introducción
- Cuadrículas responsive
- Imágenes
- Tipografías
- Tablas
TEMA 4. FRAMEWORKS
- ¿Qué son los Frameworks?
- Bootstrap
- Foundation
- Descargar plantillas
- Librerías y ejemplos
- Más ejemplos
- Casos de uso
TEMA 5. GOOGLE DEVELOPER TOOLS
- Inspeccionar y examinar HTML y CSS
- Editar HTML/CSS
- Habilitar y deshabilitar estilos
- Mover y eliminar elementos
- Registros de la consola y otros comandos
- Símbolos especiales de la consola
- Examinar la red y los recursos
- Otros complementos
TEMA 1. INTRODUCCIÓN A WORDPRESS
- ¿Qué es un blog?
- ¿Qué es WordPress?
- Diferencias entre WordPress.com y WordPress.org
TEMA 2. PLATAFORMA WORDPRESS.COM
- Darse de Alta
- Portada y tablero
- Crear un Post
- Subir Imágenes, videos y audio en un post
- Crear páginas y enlaces
- Gestión, diseño y categorías
- Comentarios, ajustes y usuarios
TEMA 3. INSTALAR WORDPRESS.ORG
- Requisitos de la instalación
- Darse de alta en un servidor
- Crear un espacio web
- Crear una base de datos
- Descargar WordPress.org
- Configurar el FTP
- Instalar WordPress.org
TEMA 4. AJUSTES DE CONFIGURACIÓN
- Ajustes generales
- Ajustes de Escritura
- Ajustes de Lectura
- Ajustes de Comentarios
- Ajustes de Medios
- Ajustes privacidad y enlaces
TEMA 5. AÑADIR CONTENIDO I
- Añadir una nueva entrada I
- Añadir una nueva entrada II
- Multimedia en una Entrada I
- Multimedia en una entrada II
- Menú Multimedia
TEMA 6. AÑADIR CONTENIDO II
- Categorías
- Etiquetas
- Enlaces
- Comentario
- Páginas
TEMA 7. OTRAS POSIBILIDADES DE WORDPRESS
- Revisiones y Papelera
- Herramientas I
- Herramientas II
- Usuarios
- Perfil de usuario
- Crear un avatar personalizado
TEMA 8. PLANTILLAS
- Instalar Temas I
- Instalar Temas II
- Menús
- Fondo y cabeceras
- Los widgets
- El Editor y Estructura
TEMA 9. PLUGINS
- Conceptos básicos
- Instalar plugins
- Clasificación plugins
- Pluging sociable
- Pluging global flash gallery
TEMA 10. SEO
- Introducción
- Url y titulo
- Mapa web, navegación y diseño
- Contenido duplicado
- Optimizar imágenes
TEMA 1. PLUGIN YOAST SEO
- Instalación
- Asistente de instalación
- Configuración
- Webmaster Tools
- Títulos y metas
- Plantillas para metadatos
- Sitemap XML
- Apariencia en el Buscador
- Breadcrumbs
- Taxonomías
- Otras herramientas
- Optimización de contenido
- Análisis de Legibilidad
- Redes Sociales
- Google Search Console
- Metabox
- Configuraciones avanzadas
TEMA 2. PLUGIN GOOGLE ANALYTICS
- Instalación
- Configuración
- Crear cuenta de Google Analytics
- Vincular Google Analytics con WordPress
- Ver estadísticas y reportes
- Seguimiento
TEMA 3. PLUGIN W3 TOTAL CACHE
- Instalación
- Configuración General
- Purgar Caché
- Habilitar Caché
TEMA 4. PLUGIN NINJA FORMS y CONTACT FORMS 7
- Instalación
- Configuración
- Ajustes generales
- Creación de formularios con Contact Forms
- Creación de formularios con Ninja Forms Forms
TEMA 5. PLUGIN ELEMENTOR PAGE BUILDER
- Instalación
- Configuración
- Ajustes generales
- Configuración de opciones
- Establecer columnas y elementos
- Widgets básicos
- Widgets generales
- Creación de páginas
- Estructura de contenido
- Plantillas de Elementor
- Elementor PRO
TEMA 6. WOOCOMMERCE
- Plugin de tienda online Woocommerce
- Añadir y gestionar productos
- Opciones generales
- Tipos de productos
- Descargables
- Inventario
- Atributos
- Variables
- Opciones de Envío
- Opciones de Pago
- Paypal
- Transferencia
- TPVVirtual
- Configurar la tienda
- Condiciones legales de cobro, envío y devolución
- Creación de mi primera tienda online
TEMA 7. OTROS PLUGINS
- Otros plugins.
- Botón de Whatsapp
- Foros
- Idiomas
- Seguridad
- Redes sociales
- Otras
- Buscador de plugins.
- Compatibilidad entre plugins.
Carpeta de estudios con el siguiente material:
- Manual de WordPress
- Manual de Diseño Web Avanzado con HTML5 y CSS3 (Vol. 1)
- Manual de Diseño Web Avanzado con HTML5 y CSS3 (Vol. 2)
- Manual de Responsive Web Design, Diseños y Cuadriculas
- Cuaderno de ejercicios de Diseño Web Avanzado con HTML5 y CSS3
- Bloc y Bolígrafo para tomar apuntes
La METODOLOGÍA ONLINE propuesta se ajusta a las características y necesidades de cada alumno/a, combinando las metodologías de enseñanza programada y de trabajo autónomo del alumnado con el asesoramiento de un/a formador/a especializado y mediante el uso de las nuevas tecnologías de la información y comunicación, creando un entorno de aprendizaje activo, próximo y colaborativo en el Campus Virtual.
- ENSEÑANZA PROGRAMADA:
Persigue transmitir los conocimientos al alumnado sin la intervención directa de el/la formador/a, a través de la organización y estructuración de los contenidos de forma secuencial. La realización periódica de ejercicios y pruebas de autoevaluación permiten afianzar lo aprendido y corregir los posibles errores en el aprendizaje.
- TRABAJO AUTÓNOMO:
Sistema de trabajo donde el/la alumno/a asume la responsabilidad de su proceso de aprendizaje, adaptándolo a su ritmo de trabajo y a sus propias necesidades, lo que exige una mayor implicación por su parte. Las acciones formativas están diseñadas para propiciar el fomento de las habilidades, conocimientos y experiencias relevantes para el desarrollo profesional dentro del ámbito de la temática del curso. El material didáctico objeto fundamental del proceso de enseñanza, será puesto a disposición del alumno en el Campus de manera ordenada y en los formatos más idóneos para ajustarlos a las especificaciones del curso. El alumno debe trabajarlos de manera autónoma dedicando un tiempo que dependerá de las necesidades individualizadas del alumno.
- TU PROFESOR PARTICULAR:
Te ayudará siempre que lo necesites. Cuando tengas alguna duda o algo no entiendas, tu profesor estará siempre dispuesto para guiar tus pasos y ayudarte a través de una llamada de teléfono ó por email. Te devolverá los ejercicios corregidos y las notas oportunas, asegurando el mejor objetivo final de tu aprendizaje.
El tiempo de duración del curso son 650 horas, al ser dentro de la Formación a Distancia, depende del tiempo que el alumno dedique cada día al estudio, no obstante, se dispone de hasta 18 meses para utilizar los servicios del centro y atención del Profesorado sin que varíen las condiciones de pago iniciales.
- Precio a consultar.
- Subvenciones entre el 15% y el 50% para diversos colectivos:
- Desempleados: Presentando la tarjeta del paro (hoja de sellado)
- Estudiantes: Presentando la matrícula del centro ó carnet de estudiante.
- Autónomos: Presentando el último recibo de autónomo.
- Discapacitados: Presentando certificado de discapacidad.
- Antiguos alumnos: Presentando la matrícula del curso anterior.
- Familia numerosa: Presentando el carnet de familia numerosa.
- Otros colectivos: Solicitar información personalizada.
- Formación bonificada para trabajadores en activo que trabajen por cuenta ajena y coticen bajo el Régimen General de la Seguridad Social. Si estás trabajando en una empresa, puedes beneficiarte de estas ayudas, siempre tramitándolo a través de tu propia empresa.
Estos descuentos no son acumulables entre sí.
- Formas de pago.
- Ingreso o transferencia a la cuenta del centro.
- Paypal, Tarjeta bancaria (crédito o débito).
- Financiación. (Sólo para alumnos en España). 100% pago seguro. Por medio de este método podrá aplazar los importes de los cursos en cómodas mensualidades hasta en 12 meses sin intereses. Es necesario tener una tarjeta de débito, donde se cargarán las cuotas correspondientes. La 1ª cuota se cargará en el momento de la matriculación de manera automática.
Una vez terminado el plan de formación y superadas todas las pruebas de evaluación y proyectos finales, se te enviará el Diploma que reflejará los temarios realizados, las horas de formación y la nota media obtenida para enriquecer tu Currículum personal y profesional.
El centro dispone de un acuerdo de colaboración con una agencia de colocación del Servicio Público de Empleo Estatal, para la realización de prácticas en empresas por parte de los alumnos que quieran acogerse a este programa, una vez acabada su formación, con la intención de que adquieran experiencia en su área profesional aprovechando al máximo las posibilidades derivadas del período de formación (prácticas empresariales formativas).
Para consultar más información acerca del programa de prácticas, haz click aquí.
El Centro dispone de una bolsa de trabajo, donde los alumnos Diplomados pueden tener la oportunidad de presentarse a puestos de trabajo relacionados con este sector en todas aquellas Empresas que nos lo solicitan. Igualmente se dispone de una agencia de colocación y empleo donde los alumnos pueden visionar cada día las diferentes ofertas de empleo que se van publicando.
Para consultar más información acerca de la bolsa de trabajo, haz click aquí.
