Si quieres consumir este contenido en formato vídeo, puedes hacerlo aquí.
Si estás estudiando 1º de Desarrollo De Aplicaciones Web (DAW) o de Desarrollo de Aplicaciones Multiplataforma (DAM) es muy probable que estés cursando la asignatura de Lenguaje de Marcas. También es posible que quieras estudiar Desarrollo de Aplicaciones Web (DAW) y no sepas dónde estudiarlo, en ese caso te dejo esta completa guía de dónde estudiar DAW. En cualquier caso, vayas a estudiar DAW o DAM o ya lo estés estudiando, una de las cosas que te conté cuando te hablaba de lo que no te contarán sobre estudiar programación en España este año era que DAW/DAM estaba muy obsoleto, ya que el plan de estudios es aproximadamente de 2008-2010. Por tanto, en este artículo te voy a dar una hoja de ruta para que a la vez que estudias Lenguaje de Marcas versión obsoleta en DAW/DAM, puedas por tu cuenta estudiar la versión actualizada de esta asignatura. ¿Tienes curiosidad por saber qué podrías estudiar en Lenguaje de Marcas (1º DAW/DAM) actualizado? ¡Sigue leyendo y te lo cuento!
¿Qué encontrarás aquí?
Objetivos de Lenguaje de Marcas
Con esta asignatura aprobada, deberías de ser capaz de crear de forma adecuada interfaces web, que tengan un diseño responsive y que tengan un mínimo de calidad. Lamentablemente, como puedes ver en estos apuntes de un alumno de DAW/DAM, en la FP se hace demasiado énfasis en XML y apenas vas a ver un tema de HTML/CSS. ¿Cuál es el problema? Que en cuanto saltes al mundo laboral, XML es posible que lo toques (pero por ejemplo XSL o XPath yo no he visto nunca a nadie que lo haya usado a nivel profesional) pero lo que es prácticamente seguro que vas a usar va a ser HTML y CSS, especialmente si trabajas en frontend. Y, vas a salir de esta asignatura con 0 experiencia con HTML y CSS, porque lo vas a ver en un tema de refilón y ya.
Precisamente, por eso, te voy a dejar un plan de estudios complementario para que complementes esta asignatura con unos conocimientos de lenguaje de marcas que te sirvan para el mundo profesional y, por supuesto, diferenciarte del resto de profesionales que acaban de acabar DAW/DAM, pero tienen estos conocimientos obsoletos y les va a costar el salto al mundo profesional mucho más que a ti. ¡Vamos con el plan de estudios!
Las bases: HTML y CSS.
Lo primero y obligado es que aprendas HTML 5. ¿Qué tienes que aprender? Pues lo básico, es decir, las etiquetas básicas para crear formularios, tablas, distintos apartados de la página web etc. y, además, que comprendas qué es la accesibilidad y el SEO. Con estas nociones, ya has dado un paso de gigante respecto a lo que se aprende en DAW/DAM, dónde no se usa HTML semántico (salvo que tu profesor esté actualizado y actualice los contenidos, no fue mi caso y no suele serlo).
Ahora que ya tenemos unos conocimientos básicos de HTML 5, el siguiente paso de este plan de estudios de Lenguaje de Marcas (DAW/DAM) actualizado, sería CSS. Puede parecerte fácil, pero te aseguro que CSS es un mundo. Primero tendrás que verte los selectores (cómo seleccionar un elemento por id, por clase etc.)… No corras porque aquí tienes también pseudoclases, pseudoelementos… Tienes muchísimo contenido con el que familiarizarte. Una vez hayas practicado y lo tengas claro, te aconsejo que aprendas sobre especificidad y herencia. ¿Si un elemento tiene varios estilos apuntando hacia el mismo, cuál de ellos se aplicará?
La propiedad display de CSS.
Y, tras haber practicado enormemente con esto, ahora viene lo interesante: la propiedad display. Aquí básicamente te voy a recomendar algunos aspectos. Para empezar, sin aplicar display, quiero que vayas practicando y observando el flujo normal de los elementos en la página, y que te vayas quedando con los conceptos de elementos en línea y elementos de bloque. Son conceptos de HTML que influyen en la representación en la página de forma visual. También quiero que busques información y experimentes con el modelo de caja. Una vez familiarizado con como funciona este aspecto, lo siguiente es que hagas algún pequeño proyecto usando display: float. Tranquilo/a, sólo quiero que te frustres, que veas el infierno que es usar ese tipo de display (pero que si trabajas con proyectos legacy, es decir, antiguos, posiblemente te lo vas a encontrar a nivel profesional) y que ahora disfrutes con los displays modernos.
En un plan de estudios de Lenguaje de Marcas (DAW/DAM) actualizado, no podían faltar display: flex y display: grid. Son los displays modernos que usarás en tu día a día en el mundo laboral con mucha posibilidad. ¿Cómo puedes aprender estos displays? Te dejo algunos recursos TOP muy interesantes al respecto:
- CSS Tricks Flexbox: desde mi punto de vista, la mejor documentación sobre Flexbox existente.
- CSS Tricks Grid: desde mi punto de vista, también la mejor documentación sobre CSS Grid existente.
- Flexbox Froggy: un juego clásico de una ranita que tienes que llevar hacia su hoja usando Flexbox. Porque sí, te voy a dejar juegos para que este plan de estudios de Lenguaje de Marcas (DAW/DAM) actualizado no sea nada aburrido.
- Flexbox Adventure: otro juego para practicar Flexbox. Tendrás que ayudar al rey Arturo a atrapar a unos malvados alquimistas que le han estafado, por supuesto, usando nuestra gran arma: Flexbox.
- Grid Garden: un juego para practicar CSS Grid. ¡Tendrás que utilizar tus habilidades con Grid para cultivar tu jardín de zanahorias!
- Grid Attack: ayuda a Rey a rescatar a su hermano elfo de un secuestro por un demonio que le quiere robar sus superpoderes… ¡Y todo ello con CSS Grid!
Si quieres jugar a algún otro juego porque estos no te convenzan o ya te los hayas pasado, sólo tienes que buscar «css grid game» o «css flexbox game» en tu buscador favorito y encontrarás un montón de juegos relacionados. La lista es inmensa.
Diseño responsive
Usar los modernos displays (flexbox o grid) te ayudarán mucho a hacer diseños responsive, es decir, diseños que se vean bien en pantallas de cualquier tamaño. Ya sabes que a día de hoy usamos pantallas de ordenador de distinto tamaño, móviles de distinto tamaño, tablets de distinto tamaño etc. y tu página web ha de verse bien en cualquier dispositivo. Sea cual sea el tamaño de su pantalla. Así que quiero que aprendas todo lo que puedas sobre el uso de media-queries y todas las convenciones y buenas prácticas que hay acerca de cómo hacer un diseño responsive de forma correcta.
Algunas recomendaciones
Lo primero que quiero transmitirte, es que este plan de estudio de Lenguaje de Marcas (DAW/DAM) actualizado es complementario al contenido que veas en DAW/DAM. Por ello, algunas cosas tremendamente básicas (como, por ejemplo, distintas formas de aplicar tus estilos a una hoja HTML) las he omitido porque esas sí que las verás en la FP. Por tanto, este es un plan de estudios complementario a lo que estás estudiando. Además, me gustaría dejarte estos consejos que te ayudarán a aprobar DAW/DAM.
Por otro lado, quiero que comprendas que haciendo este plan de estudios de forma completa tienes un nivel básico de HTML y CSS, pero que cuanto más practiques más nivel tendrás. La programación no se acaba nunca. También es posible que pienses que aquí faltan por ver más cosas (animaciones, pre y post-procesadores de CSS…). El mundo de CSS es inmenso, pero esto es sólo un plan de estudios complementario al obsoleto plan de estudios de la FP. No podemos abarcar todo en un plan de estudios complementario (que puedes tomártelo, a fin de cuentas, como otra asignatura más).
Y, si no tienes ideas de qué tipo de proyectos podrías usar para practicar todos estos aspectos que te he comentado, mi sugerencia es que empieces practicando con cajas y posicionando cajas. Más adelante, ya cuando tienes más nivel, puedes dedicarte a hacer interfaces de proyectos más reales, del estilo de los que comento en este artículo.
Y, para acabar el plan de estudios de Lenguaje de Marcas (DAW/DAM) actualizado, si has completado este plan de estudios, me gustaría darte la enhorabuena. Vas a salir de la FP con un nivel mucho más alto que el resto de tus compañeros/as y el salto al mundo profesional te costará mucho menos. ¡Enhorabuena!
Te puede interesar
Siendo honesto, este tipo de tazas me molan y además me hacen gracia. Aunque no sea una taza con código de HTML o CSS (de hecho, el código de la taza es de JavaScript), pensé que quizás podía interesarte. Esta taza te sirve tanto de (auto)regalo a familiares como a amigos/as, y por un precio ajustado. El precio no está reñido con una excelente calidad (hablamos de una taza de cerámica), que se puede meter tanto en lavavajillas como microondas.
Está impresa por ambos lados, de forma que es ideal tanto para zurdos como para diestros. ¡Disfruta del café con esta taza!
Espero que este artículo sobre el plan de estudios de Lenguaje de Marcas (DAW/DAM) actualizado te haya sido de utilidad. Ya nos contarás qué tal. Recuerda que puedes contactar con nosotros por Twitter, Instagram o por nuestro formulario. También puedes seguirnos en nuestro canal de Youtube para no perderte absolutamente nada, con contenido que sólo encontrarás de forma exclusiva en el canal. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en el siguiente artículo.