Diseñador Web - Nivel 1

Del Bosquejo al Código & HTML

• Cómo interpretar un diseño
• Diseño (Photoshop vs Mockups)
• Estructura HTML
• Etiquetas Básicas:
  • Textos
  • Encabezados
  • Div y Span
• Etiquetas semánticas HTML5
• Trabajo Práctico

HTML

• Listas
• Tablas
• Formularios
• ¿Qué son los atributos de un tag?
• ¿Para qué sirven?
• Atributos más utilizados
• Enlaces
• Imágenes
• Audio y Videos
• Trabajo Práctico

CSS

• Historia
• Sintaxis, Comentarios, Carga de Archivos CSS
• Uso de ‘Normalize.css’
• Selectores
• Clases
• Valores y Unidades
• Fuentes, colores
• Recursos: Google Font, Ionicons
• Trabajo Práctico

CSS - Modelo de Cajas & Ubicación de elementos

• Definición
• Bordes
• Márgenes
• Relleno
• Fondo
• Posicionamiento
• Float
• Flexbox
• Trabajo Práctico

CSS - Ubicación de elementos & más!

• Más sobre Flexbox
• Propiedades de padres e hijos
• Gradientes en CSS
• Transiciones
• Transformación
• Animación en CSS
• Trabajo Práctico

CSS - Diseño Responsivo, Media Queries, Git.Github

• ¿Qué es un diseño responsivo?
• Pantallas en que enfocarse
• Mobile-First
• Utilización dentro de un archivo CSS
• Utilización en la llamada desde el
• Github
• Crear una cuenta
• Crear un repositorio
• Clonar un repositorio
• Subir cambios al repositorio remoto
• Trabajo Práctico

Workshop I

SASS

• Definición
• Instalación
• Variables
• Anidamiento
• Importar
• Mixins
• Extensiones a partir de un elemento
• Operadores matemáticos
• Trabajo Práctico

LESS & SEO Tips

• Instalación
• Variables
• Anidamiento
• Importar
• Mixins
• Extensiones a partir de un elemento
• Operadores matemáticos
• Comparación SASS - LESS
• SEO Tips (primera parte)
• Trabajo Práctico

Bootstrap & SEO Tips

• Qué son los frameworks CSS
• Función
• Utilización
• Instalación/CDN
• Grilla Responsive
• Clases de Bootstrap
• Componentes
• Customizar Bootstrap
• Cómo pisar clases de bootstrap
• SEO Tips (segunda parte)
• Trabajo Práctico

Bootstrap (jQuery) & SEO Tips

• Componentes jQuery de Bootstrap
• SEO Tips (tercera parte)
• Trabajo Práctico

Workshop II

Accesibilidad & SEO Tips

• Pautas de Accesibilidad al Contenido del W3C
• Elementos
  • Visión
  • Audición
  • Movilidad y Cognición
  • Leedores de pantalla
  • Maquetas de baja fidelidad
    • HTML
    • CSS
    • Formularios
  • Tablas
• SEO Tips (cuarta parte)
• Trabajo Práctico

Fundamentos Web & SEO Tips

• Validación
• Navegadores
• Dominios
• Hosting (Nacionales e Internacionales)
• Protocolo de transferencia de archivos (FTP)
• Github Pages
• SEO Tips (quinta parte)
• Trabajo Práctico

Proyecto Final