Maqueta tu página web personal o profesional en dos horas

Requisitos

• Portátil propio
• Navegador (Firefox, Chrome, Safari…)
• Editor de texto plano (tipo Notepad)
• No necesitas conocimientos previos
• Solo para mujeres

Descripción

El objetivo del taller es orientar y motivar a personas sin conocimientos sobre diseño, maquetación y desarrollo web, y a darles las herramientas necesarias sin tener que recurrir a aplicaciones específicas de terceros para desarrollar su landing personal y/o profesional. Es un curso de iniciación, el objetivo es dar una base por donde empezar, ofrecerles todas las posibilidades que surgen del ejercicio y animarlas a seguir estudiando y trabajando en ello.

Junto a las explicaciones se facilitará un documento pdf con la relación de todo lo que se explica en este taller, para que puedan estar centradas en comprender el funcionamiento y la lógica de lo explicado, y no que memoricen «en caliente» toda la información que están recibiendo, pudiendo de esta forma estudiar los detalles con mayor entretenimiento y profundidad.

En el taller se prioriza los recursos que son de licencias GPL o al menos gratis, sin regalías ni licencias restrictivas, aunque se indicará si es necesario aquellos que no cumplen estos requisitos.

Requisitos de las asistentes.

Está pensado para personas sin conocimientos en la materia, se inicia desde muy principio y se acortarían algunos conceptos para facilitar su compresión. Necesitarán eso si, conocer su sistema operativo, moverse entre carpetas y crear archivos. Además de conocer internet y el navegador que use.

Es recomendable que dispongan de portátil y la conexión a internet es opcional, ya que se trabajarán completamente en local, aunque, es posible que requiera la instalación de un editor de código, y para algunos ejercicios sería recomendable pero no imprescindible.

Temario

1. Introducción: El objetivo de esta sección es toma de contacto con el entorno de trabajo, y hacer perder el miedo y respeto que inicialmente puede provocar.
   • Presentación.
   • La web: html, css y js.
   • Inspector y herramienta de desarrollador.
   • Editor de código.
2. Estructura HTML: En esta sección muestro los elementos más básicos para construir una web, simplificando todas las instrucciones para hacerla más fácil de asimilar.
   • Qué son las etiquetas y atributos.
   • Etiquetas de textos.
   • Imágenes y enlaces.
   • Etiquetas de bloque.
   • Etiqueta de documentos.
3. Empezando con CSS: Tratamos los conceptos básicos de las hojas de estilo, asentando las bases básicas y ayudar con algunos trucos, ya que es la parte más compleja.
   • Vincular archivos css y su estructura.
   • Lectores básicos.
   • Estilos tipográficos.
   • Especificaciones y estructura.
   • Avanzados. Las pseudo clases.
4. Estructura CSS: Profundizo más en este apartado para ayudar la introducción al punto siguiente.
   • Estilo del navegador y reset del css.
   • Modelo de cajas.
   • Displays.
   • Floats.
   • Position.
5. Decoración con CSS: Aquí empiezo a tratar en poner bonito lo que ya tenemos.
   • Estilos para las listas.
   • Bordear, redondeo y sombras.
   • Fondos e imágenes.
   • WebFonts.
6. Técnicas responsive: Trato el tema de adaptar el contenido que hemos realizado a diferentes resoluciones de los dispositivos.
   • Mobile first.
   • Estructura flexible.
   • Media queries.
   • Navegación responsive.
7. Añadiendo integración: Incorporamos funcionalidad a la web, hacemos que además de mostrar la información que queremos, haga algo.
   • Enlace al email y teléfono.
   • Transiciones en css.
   • Vincular archivos de JavaScript.
   • Navegando con JavaScript.

Relator de este taller

Rafaél Fernández Rodríguez

Desarrollador Full stack

Me apasiona la programación y la tecnología, al igual que todo lo que puede hacer por nosotros. Entiendo que los programas se pueden simplificar para que resulten realmente agradables y funcionales a todo el mundo.IT GALS es una magnífica oportunidad de apoyar al movimiento feminista, promover el desarrollo de la creatividad y profesionalidad por medio de la tecnología para llegar a donde hasta ahora no se ha llegado.

Material adicional

• Material adicional