Recursos de Lenguajes de Marcas
Bienvenido a la sección de recursos para el módulo de Lenguaje de Marcas del ciclo formativo DAM/DAW.
📚 Introducción
Este módulo introduce el uso de lenguajes de marcas como HTML y hojas de estilo CSS, esenciales para la estructuración y presentación de información en entornos web y otros sistemas.
📖 Temario
- 📄 Unidad 1: Instalaciones
- 📄 Unidad 2: HTML5
- 📄 Unidad 3: XML, DTD y Schemas
- 📄 Unidad 4: CSS3
- 📄 Unidad 5: Flex
- 📄 Unidad 6: Grid
- 📄 Unidad 7: Variables CSS
- 📄 Unidad 8: Animaciones
- 📄 Unidad 9: JavaScript
Distribución contenidos en unidades didácticas
| SEMESTRE | HORAS | NOMBRE DE LA UNIDAD DE TRABAJO |
|---|---|---|
| 1º | 18 | UT1. Introducción y reconocimiento de las características de los lenguajes de marcas |
| 1º | 13 | UT2. Lenguaje HTML v5.0 |
| 1º | 10 | UT3. Hojas de estilo CSS v3.0 |
| 1º | 10 | UT4. Formularios en HTML |
| 2º | 10 | UT5. Javascript |
| 2º | 12 | UT6. Bootstrap |
| 2º | 14 | UT7. XML y DTD |
| 2º | 12 | UT8. Schemas |
| TOTAL HORAS | 99 h |
🔹 Materiales del profesorado
- GitHub - ralbiolsalguero/lmdamdawbcn – Repositorio con los ejercicios vistos en clase.
- GitHub - albiolsalguero/lenguajedemarcas – Repositorio para los ejercicios.
- Drive Febrero/Marzo
- Drive Abril/Diciembre - Pendiente
📖 Bibliografía y referencias
🔹 HTML
- WHATWG HTML Living Standard – Especificación viva y actualizada de HTML.
- W3C HTML – Documentación normativa del W3C.
- MDN: HTML – Guía de uso, etiquetas, elementos, buenas prácticas.
🔹 CSS
- W3C CSS Specifications – Lista oficial de módulos CSS del W3C.
- MDN: CSS – Propiedades, selectores, layout, animaciones, etc.
🔹 JavaScript y APIs Web
- MDN: JavaScript – Lenguaje JS, objetos, estructuras, etc.
- Web APIs – MDN – APIs del navegador documentadas por Mozilla.
- Web.dev – Buenas prácticas modernas, rendimiento, accesibilidad y más.
- Can I use – Compatibilidad por navegador para propiedades HTML, CSS, JS y APIs.
🔗 Enlaces útiles
🎓 Plataformas de aprendizaje
- FreeCodeCamp – Cursos interactivos de HTML, CSS, JS y más.
- Codedex – Aprendizaje gamificado de desarrollo web.
- JS Challenger – Práctica con desafíos de JavaScript.
🛠️ Herramientas para desarrollo
- Emmet Documentation – Atajos para HTML y CSS que aceleran tu flujo de trabajo.
- Visual Studio Code – Editor recomendado para desarrollo web.
- VS Code Tips & Tricks – Consejos para sacarle el máximo partido.
- CodePen – Entorno online para pruebas rápidas de HTML/CSS/JS.
- JSFiddle – Alternativa a CodePen para crear prototipos web.
🎨 Diseño y estilo
- CSS Gradient – Creador visual de degradados CSS.
- Google Fonts – Tipografías gratuitas listas para usar.
- Figma – Diseño UI colaborativo.
- SVG Repo – Iconos SVG gratis y modificables.
- CSS Code Generator – Generador visual de código CSS.
- UI Colors Generator – Paletas de colores listas para usar.
- Layout Generator (Bradwoods) – Herramienta para crear estructuras CSS rápidamente.
- Stitch with Google – Creador de diseños web con IA.
📐 CSS Grid y Flexbox
- CSS Grid Garden – Juego para aprender CSS Grid divirtiéndote.
- Flexbox Playground (Yoav) – Visualiza propiedades de Flexbox en tiempo real.
- Flexbox Labs – Experimenta con layouts y alineaciones.
- CSS Cheat Sheet - Animaciones – Resumen visual de animaciones y efectos.
✔️ Validadores y soporte
- W3C Markup Validator – Verifica que tu HTML sea válido.
- W3C CSS Validator – Para revisar errores de sintaxis en CSS.
- Can I use – Consulta compatibilidades entre navegadores.