{"id":1553,"date":"2024-08-02T07:16:21","date_gmt":"2024-08-02T05:16:21","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1553"},"modified":"2024-08-02T07:16:21","modified_gmt":"2024-08-02T05:16:21","slug":"responsive-design-y-arquitectura-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/responsive-design-y-arquitectura-css\/","title":{"rendered":"Responsive Design y Arquitectura CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Introducci\u00f3n al Responsive Design<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En el a\u00f1o 1998 se cre\u00f3 el lenguaje llamado <strong>WML<\/strong> (<strong>Wireless Markup Language<\/strong>) y un protocolo llamado <strong>WPA<\/strong> (<strong>Wireless Application Protocol<\/strong>). Ambas tecnolog\u00edas se volvieron los est\u00e1ndares de los dispositivos m\u00f3viles de primera generaci\u00f3n. Estos protocolos fracasan, ya que en el a\u00f1o 2007 nace el <strong>iPhone<\/strong>, el cual se vuelve el est\u00e1ndar de los dispositivos m\u00f3viles. El <strong>iPhone<\/strong> ven\u00eda con su navegador integrado, <strong>Safari<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">En 2008 nace la <strong>Mobile Web Iniciative<\/strong>, y en 2010 <strong>Ethan Marcotte<\/strong> acu\u00f1e por primera vez el t\u00e9rmino de <strong>Responsive Design<\/strong> (el concepto).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>Responsive Design<\/strong> tiene 3 principios b\u00e1sicos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grid flexibles.<\/li>\n\n\n\n<li>Im\u00e1genes flexibles.<\/li>\n\n\n\n<li>Media Queries.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>Responsive Design<\/strong> no s\u00f3lo es pensar en adaptar el contenido al tama\u00f1o de la pantalla, tambi\u00e9n es considerar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Conexi\u00f3n de red<\/strong> (Wifi, 2G, 3G&#8230;)<\/li>\n\n\n\n<li><strong>Hardware<\/strong> y <strong>Software<\/strong> de los dispositivos.<\/li>\n\n\n\n<li>Interacciones (con teclado y rat\u00f3n, t\u00e1ctiles, por voz&#8230;).<\/li>\n\n\n\n<li><strong>Accesibilidad web<\/strong> (soporte a discapacidades).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s del <strong>Iphone<\/strong> pasamos s\u00f3lo de tener <strong>CPUs<\/strong> a tener todo tipo de dispositivos de distintos tama\u00f1os.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estrategias de dise\u00f1o multidispositivo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00e1s que hablar de <strong>Responsive Design<\/strong> hay que hablar de <strong>estrategias de dise\u00f1o multidispositivo<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son algunas universales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsive Design &#8211; Ethan Marcotte<\/li>\n\n\n\n<li>Adaptive Design &#8211; Aaron Gustafson (2011)<\/li>\n\n\n\n<li>Responsive + Server Side (RESS) &#8211; Luke Wroblewsky (2011)<\/li>\n\n\n\n<li>Responsible Responsive Design &#8211; Scott Jehl (2014)<\/li>\n\n\n\n<li>Fluid Design &#8211; Trys Mudford (2020): trata de hacer responsive sin utilizar demasiado las Media Queries.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Contenedores flexibles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es todo elemento en nuestra interfaz web y tienen que ser <strong>flexibles<\/strong> y <strong>responsives<\/strong>. Veamos nuestro primer ejm<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm c\u00f3digo HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;link rel=\"stylesheet\" href=\"ejm01.css\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm01&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;div class=\"box\"&gt;&lt;\/div&gt;\n&nbsp; &nbsp; &lt;div class=\"box-flexible\"&gt;&lt;\/div&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm c\u00f3digo CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[class^=\"box\"] {\n&nbsp; margin: 3remauto;\n&nbsp; background-color: orangered;\n}\n.box {\n&nbsp; width: 300px;\n&nbsp; height: 300px;\n}\n.box-flexible {\n&nbsp; width: 50%;\n&nbsp; height: 20vh;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hay otra manera, para ello vamos a utilizar 4 propiedades CSS para los m\u00e1ximos y m\u00ednimos tama\u00f1os. Son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>max-width<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>min-width<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>max-height<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>min-height<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos la sintaxis CSS para una tercera caja contenedora.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.box-flexible-2 {\n&nbsp; max-width: 960px;\n&nbsp; min-width: 280px;\n&nbsp; max-height: 480px;\n&nbsp; min-height: 280px;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">No se debe utilizar <strong><em>width<\/em> <\/strong>y <strong><em>height<\/em> <\/strong>con las propiedades de arriba ya que tienen mayor jerarqu\u00eda, por lo que se van a quedar con los valores de las propiedades de estas. Hay que utilizar unidades relativas para <strong><em>width<\/em> <\/strong>y <strong><em>height<\/em> <\/strong>junto con <strong><em>max-width<\/em><\/strong>, <strong><em>max-height<\/em><\/strong>, <strong><em>min-width<\/em><\/strong> y <strong><em>min-height<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Multimedia flexible<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se entiende todo aquello que <strong>no es texto<\/strong>, que son las siguientes etiquetas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>img<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>audio<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>video<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>iframe<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>canvas<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>svg<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>picture<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>object<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>embed<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>map<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>are<\/em><\/strong>a<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Todo lo que se puede incluir en un <strong><em>iframe<\/em> <\/strong>se puede incluir en un <strong><em>object<\/em> <\/strong>y en un <strong><em>embed<\/em><\/strong>. La sintaxis para hacer estas <strong>etiquetas flexibles<\/strong> es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">img, audio, video, iframe, canvas, svg, picture {\n max-width: 100%;\n height: auto\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed en base a la anchura calcula la altura y no se deforma el elemento. El ejm completo ser\u00eda el siguiente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; img {\n&nbsp; &nbsp; &nbsp; &nbsp; max-width: 80%;\n&nbsp; &nbsp; &nbsp; &nbsp; height: auto;\n&nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm02 - Multimedia flexible&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Multimedia Flexible&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;h2&gt;Im\u00e1genes Responsive&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;p&gt;Simplemente adaptamos la imagen al tama\u00f1o de su contenedor&lt;\/p&gt;\n&nbsp; &nbsp; &lt;img src=\"img\/Puestadesol.JPG\" alt=\"Puesta de Sol\" \/&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">No es la \u00fanica manera de hacer un <strong>multimedia responsive<\/strong>, hay dos nuevos atributos, llamados <strong><em>srcset<\/em><\/strong> y <strong><em>sizes<\/em><\/strong>, cuyo prop\u00f3sito es mejorar el rendimiento de la carga al colocar la imagen que mejor corresponde al documento que se est\u00e1 cargando.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">srcset y sizes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Estos atributos nos permiten mejorar el rendimiento de la carga colocando la imagen m\u00e1s adecuada, esto lo har\u00e1 dependiendo de lo que pongamos en el atributo <strong><em>srcset<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src=\"image.png\" srcset=\"image.png 1x, image2.png 1.5px, image3.png 2x\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm completo<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm03 - Im\u00e1genes Responsive utilizando srcset&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Im\u00e1genes Resonsive utilizando srcset&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;img\n&nbsp; &nbsp; &nbsp; src=\"img\/puestadesol.JPG\"\n&nbsp; &nbsp; &nbsp; srcset=\"\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesol.JPG &nbsp; 1x,\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesolo2.png 1.5x,\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesol3.png &nbsp;2x\n&nbsp; &nbsp; &nbsp; \"\n&nbsp; &nbsp; &nbsp; alt=\"\"\n&nbsp; &nbsp; \/&gt;\n&nbsp; &nbsp; &lt;img\n&nbsp; &nbsp; &nbsp; src=\"img\/puestadesol.JPG\"\n&nbsp; &nbsp; &nbsp; srcset=\"\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesol.JPG &nbsp; 600w,\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesol2.png &nbsp;900w,\n&nbsp; &nbsp; &nbsp; &nbsp; img\/puestadesol3.png 1200w\n&nbsp; &nbsp; &nbsp; \"\n&nbsp; &nbsp; &nbsp; alt=\"\"\n&nbsp; &nbsp; \/&gt;\n&nbsp; &nbsp; &lt;!-- PODEMOS UTILIZARLO DE ESTAS DOS MANERAS ARRIBA PUESTAS--&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El atributo <strong><em>sizes<\/em> <\/strong>es una manera de trabajar con <strong>media queries<\/strong> dentro de nuestras im\u00e1genes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src=\"img\/puestadesol.JPG\" srcset=\"img\/puestadesol.JPG 600w, img\/puestadesol2.png 900w, img\/puestadesol3.png \nsizes=\"(max-width:480px) 300px, (max-width:600px) 480px, (max-width:768px) 600px. (min-width:1200px) 1200px\" 1200w\"alt=\"\"&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">La etiqueta <em>&lt;picture&gt;<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si lo que necesitamos es un cambio de imagen utilizamos la etiqueta <strong><em>&lt;picture&gt;<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm04 - Etiqueta picture&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;La etiqueta picture&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;!-- LOS SOURCES SE CREAN DE MAYOR A MENOR SI NO SE CARGAN LOS SOURCES PONEMOS LA ETIQUETA\n&nbsp; &nbsp; img PARA ASEGURARNOS QUE SE CARGA LA IMAGEN, UTILIZAMOS EL ATRIBUTO media --&gt;\n&nbsp; &nbsp; &lt;picture&gt;\n&nbsp; &nbsp; &nbsp; &lt;source srcset=\"imggrande.jpg\" media=\"(min-width:1200px\" \/&gt;\n&nbsp; &nbsp; &nbsp; &lt;source srcset=\"imgmediana.jpg\" media=\"(min-width: 600px\" \/&gt;\n&nbsp; &nbsp; &nbsp; &lt;img src=\"imgpequena.jpg\" alt=\"\" \/&gt;\n&nbsp; &nbsp; &nbsp; &lt;!-- DEPENDIENDO DEL TIPO SE CARGA UNA IMAGEN U OTRA PARA ELLO SE UTILIZA EL ATRIBUTO type --&gt;\n&nbsp; &nbsp; &nbsp; &lt;picture&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;source srcset=\"image.wepb\" type=\"image\/webp\" \/&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;source srcset=\"image.jpg\" type=\"image\/jpg\" \/&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; &lt;img srset=\"image.png\" \/&gt;\n&nbsp; &nbsp; &nbsp; &lt;\/picture&gt;\n&nbsp; &nbsp; &lt;\/picture&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00eddeos responsives<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hay diferentes formas de hacer <strong>v\u00eddeos responsives<\/strong>. Un v\u00eddeo lo hacemos <strong>responsive<\/strong> aplicando la siguiente sintaxis CSS<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">video {\n max-width: 100%;\n height: auto;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con esta sintaxis el v\u00eddeo ya se adapta.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Vieja t\u00e9cnica<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Existe una <strong>vieja t\u00e9cnica<\/strong> para hacer un <strong>v\u00eddeo responsive<\/strong>, es la siguiente.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div class=\"responsive-media\"&gt;\n\n&lt;\/div&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La sintaxis CSS es:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.responsive-media {\n position: relative;\n max-width: 100%;\n height: 0;\n padding-bottom: 56.25%;\n&lt;-- PANTALLA WIDESCREEN: 16:9 --&gt;\n}\n\n.responsive-media &gt; * {\n position: absolute;\n width: 100%;\n height: 100%;\n&lt;-- EL padding-bottom LE VA A DAR UNA ALTURA --&gt;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Nueva t\u00e9cnica<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">La <strong>nueva forma<\/strong> que tenemos en CSS es la siguiente.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;video class=\"aspect-radio-16.9\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">y el estilo ser\u00eda<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.aspect-radio-16.9 {\n aspect-ratio: 16\/9;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos dar cualquier formato, por ejm<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.aspect-radio-16.9 {\n aspect-ratio: 16\/9;\n aspect-radio: 1 \/ 1;\n aspect-ratio: 9 \/ 16;\n &lt;-- PODEMOS DARLE EL FORMATO QUE QUERAMOS --&gt;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">iframes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se hace el mismo uso que para los v\u00eddeos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Media Queries<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son como preguntas que hacemos al navegador, y dependiendo de estas preguntas, el navegador incluye ciertos estilos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La sintaxis que se utiliza es<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@media screen and (max-width: 480px) and (orientation: portrait) {\n\/\/ CODIGO CSS QUE PONDREMOS\n}<\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Propiedad<\/th><th>Definici\u00f3n<\/th><th>max \/ min<\/th><\/tr><tr><td><strong><em>width<\/em><\/strong><\/td><td>El ancho del \u00e1rea de visualizaci\u00f3n.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>height<\/em><\/strong><\/td><td>El alto del \u00e1rea de visualizaci\u00f3n.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>device-width<\/em><\/strong><\/td><td>La anchura de la superficie de representaci\u00f3n del dispositivo.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>device-height<\/em><\/strong><\/td><td>La altura de la superficie de representaci\u00f3n del dispositivo.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>orientation<\/em><\/strong><\/td><td>Acepta los valores de&nbsp;<em>portrait<\/em>&nbsp;(vertical) y&nbsp;<em>landscape<\/em>&nbsp;(horizontal).<\/td><td>\u274c<\/td><\/tr><tr><td><strong><em>aspect-ratio<\/em><\/strong><\/td><td>Relaci\u00f3n entre la anchura de la zona de visualizaci\u00f3n de toda su altura.Por ejemplo: en una computadora de escritorio, se podr\u00eda consultar si la ventana del navegador se encuentra en una relaci\u00f3n de 16:9.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>device-aspect-ratio<\/em><\/strong><\/td><td>Proporci\u00f3n de anchura de la superficie de representaci\u00f3n del dispositivo a trav\u00e9s de su altura.Por ejemplo: en una computadora de escritorio, se podr\u00eda consultar si la pantalla est\u00e1 en una relaci\u00f3n de 16:9.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>color<\/em><\/strong><\/td><td>El n\u00famero de&nbsp;<em>bits<\/em>&nbsp;por componente de color del dispositivo.Por ejemplo, un dispositivo de color de 8&nbsp;<em>bits<\/em>&nbsp;podr\u00eda pasar con \u00e9xito una consulta de (color: 8). Dispositivos de color no deben devolver un valor de 0.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>color-index<\/em><\/strong><\/td><td>El n\u00famero de entradas en la tabla de b\u00fasqueda de color del dispositivo de salida.Por ejemplo,&nbsp;<em>@media screen and (min-color-index:256)<\/em>.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>monochrome<\/em><\/strong><\/td><td>Al igual que el color, la caracter\u00edstica monocrom\u00e1tica permite ponernos a prueba el n\u00famero de&nbsp;<em>bits<\/em>&nbsp;por pixel en un dispositivo monocrom\u00e1tico.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>resolution<\/em><\/strong><\/td><td>Pruebas de la densidad de los p\u00edxeles en el dispositivo.Por ejemplo,&nbsp;<em>screen and (resolution:72dpi) or screen and (max-resolution:300dpi)<\/em>.<\/td><td>\u2714\ufe0f<\/td><\/tr><tr><td><strong><em>scan<\/em><\/strong><\/td><td>Para la navegaci\u00f3n basada en&nbsp;<em>tv<\/em>, mide si el proceso de exploraci\u00f3n es progresiva o escaneo.<\/td><td>\u274c<\/td><\/tr><tr><td><strong><em>grid<\/em><\/strong><\/td><td>Comprueba si el dispositivo es una pantalla basada en la red, como los tel\u00e9fonos con funciones con una fuente de ancho fijo. Se puede expresar simplemente como (<em>grid<\/em>).<\/td><td>\u274c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>@media screen<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a ver el formato est\u00e1ndar que se defini\u00f3 desde la versi\u00f3n 3 de CSS. En esta ocasi\u00f3n utilizamos @media para cuando demos a imprimir nos imprima con el CSS que le hayamos creado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; @mediaprint {\n&nbsp; &nbsp; &nbsp; &nbsp; @page {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: A5 landscape;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; &nbsp; body {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 10pt;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: sans-serif;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: black;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: greenyellow;\n&nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm 06 - Media Queries&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Ejm 06 - Media Queries&lt;\/h2&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para trabajar con la pantalla se utilizar <strong><em>@media screen<\/em><\/strong>, veamos un ejm con un m\u00ednimo al que empieza a aplicarse CSS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@media screen and (min-width: 480px) {\n\/\/ SE APLICA EL CSS A PARTIR DE 480px\nhtml {\ncolor: black;\n}\n}\nEN MOBILE FIRST SE USA min-width\n\n@media screen and (max-width: 1200px) {\n\n}\nEN DESKTOP FIRST SE UTILIZA max-width que es lo m\u00e1ximo, estas son dos t\u00e9cnicas utilizadas para crear CSS.<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando comencemos un sitio web con la t\u00e9cnico <strong>desktop first<\/strong>, seguir trabajando con dicha t\u00e9cnica, no mezclar <strong>mobil first<\/strong> y <strong>desktop first.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cuando cambiar los media queries, breakpoints<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los <strong>breakpoints<\/strong> tienen mucha relaci\u00f3n con las <strong>media queries<\/strong>, es la medida en la cual decido cuando aplicar distintos CSS a mi interfaz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los <strong>breakpoints<\/strong> que podemos encontrar son los siguientes:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong><em>320px<\/em><\/strong><\/td><td>Para dispositivos con pantallas peque\u00f1as, como los tel\u00e9fonos en modo vertical.<\/td><\/tr><tr><td><strong><em>480px<\/em><\/strong><\/td><td>Para dispositivos con pantallas peque\u00f1as, como los tel\u00e9fonos, en modo horizontal.<\/td><\/tr><tr><td><strong><em>600px<\/em><\/strong><\/td><td>Tabletas peque\u00f1as, como el&nbsp;<em>Amazon Kindle<\/em>&nbsp;(600\u00d7800) y&nbsp;<em>Barnes &amp; Noble Nook<\/em>&nbsp;(600\u00d71024), en modo vertical.<\/td><\/tr><tr><td><strong><em>768px<\/em><\/strong><\/td><td>Tabletas de diez pulgadas como el&nbsp;<em>iPad<\/em>&nbsp;(768\u00d71024), en modo vertical.<\/td><\/tr><tr><td><strong><em>1024px<\/em><\/strong><\/td><td>Tabletas como el&nbsp;<em>iPad<\/em>&nbsp;(1024\u00d7768), en modo horizontal, as\u00ed como algunas pantallas de ordenador port\u00e1til,&nbsp;<em>netbook<\/em>, y de escritorio.<\/td><\/tr><tr><td><strong><em>1200px<\/em><\/strong><\/td><td>Para pantallas panor\u00e1micas, principalmente port\u00e1tiles y de escritorio.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Hay veces que se utiliza el ancho de pantalla completo como en los <strong>Hero Image<\/strong>. Hay que convertir los <strong>breakpoints<\/strong> a <strong>Ems<\/strong>, es decir, los <strong>pixeles<\/strong> a <strong>EMs<\/strong>. Corres el riesgo de que computadoras no se visualicen correctamente.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>320px \/ 16px = 20em<\/li>\n\n\n\n<li>480px \/ 16px = 30em<\/li>\n\n\n\n<li>600px \/ 16px = 37em<\/li>\n\n\n\n<li>768px \/ 16px = 48em<\/li>\n\n\n\n<li>1042px \/ 16px = 64em<\/li>\n\n\n\n<li>1200px \/ 16px = 75em<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">La metaetiqueta viewport<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El <em><strong>viewport<\/strong> <\/em>es una etiqueta que se incluy\u00f3 en <strong>Safari<\/strong> por <strong>Apple<\/strong>. Cuando abrimos un documento HTML. Hay varias propiedades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>width<\/li>\n\n\n\n<li>height<\/li>\n\n\n\n<li>initial-scale<\/li>\n\n\n\n<li>minimum-scale (no se llega a utilizar)<\/li>\n\n\n\n<li>maximum-scale (no se llega a utilizar)<\/li>\n\n\n\n<li>user-scalable: Yes \/ No (el valor por defecto es Yes), si pones No, bloqueas al usuario para que que haga zoom.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Gris Responsive<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En este tema vamos a aprender a hacer una <strong>Grid Responsive<\/strong>. Para ello es importante conocer los conceptos de <strong>Flexbox CSS<\/strong>. Vamos a dividir nuestra pantalla en 12 elementos de tal manera que tengamos mucho por lo que jugar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>12 = 6 + 6<\/li>\n\n\n\n<li>12 = 4 + 4 + 4<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La sumatoria siempre tiene que ser 12. Para saber el porcentaje tan s\u00f3lo se hace una regla de 3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>12 -> 100%<\/li>\n\n\n\n<li>Numero columnas -> x<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a proponer los siguientes tama\u00f1os de columna<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>xs: extrasmall &#8211; de 0px a 479px &#8211; 480res<\/li>\n\n\n\n<li>sm: small &#8211; de 480px (30em) a 767px &#8211; 800res<\/li>\n\n\n\n<li>md: medium &#8211; de 768px (48em) a 991px &#8211; 1024res<\/li>\n\n\n\n<li>lg: large &#8211; de 992px (62em) a 1199px &#8211; 1280res<\/li>\n\n\n\n<li>xl: extralarge &#8211; +1200px (75em) &#8211; 1281res<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a tratar de ponerlos en <strong>ems<\/strong> (se dividen los pixeles entre 16, el tama\u00f1o est\u00e1ndar de la letra si es de 16px.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Features queries<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son consultas de las caracter\u00edsticas que le preguntan al navegador si soportan ciertas caracter\u00edsticas. Un ejm es ver si el navegador soporta Grid, se hace la siguiente consulta CSS<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">EL NAVEGADOR SOPORTA display: grid\n@supports (display: grid) {\n\/* C\u00d3DIGO CSS AQU\u00cd *\/\n}\n\nEL NAVEGADOR NO SOPORTA display: grid\n@supports not (display: grid) { \n\/* C\u00d3DIGO CSS AQU\u00cd *\/ \n}\n\nSE LE PASAN 2 CONDICIONES QUE SE HAN DE CUMPLIR AMBAS\n@supports (display: grid) and (grid-template-columns: subgrid) {\nhtml {\nbackground-color: #333;\ncolor: #fff;\n}\n}\n\nSE LE PASAN 2 CONDICIONES QUE SE HA DE CUMPLIR UNA DE AMBAS\n@supports (display: grid) or (grid-template-columns: subgrid) \n{ \nhtml { \nbackground-color: #333; \ncolor: #fff; \n} \n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se utiliza <strong><em>@supports<\/em><\/strong> y entre par\u00e9ntesis la consulta.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: Existe una p\u00e1gina que se llama <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Can I Use<\/strong><\/a> para saber si todo funciona ok.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Container queries<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las <strong>Container queries<\/strong> permiten redimensionar un contenido en particular. Por ejm una tarjeta que necesite estar en vertical hasta que el tama\u00f1o de la imagen tenga cierto valor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La sintaxis que necesitamos es la siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.card {\n contain: layout inline-size style;\n}\n\n@container (min-width: 600px) {\n .card-container {\n  display: flex;\n }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Desktop First VS Mobile First<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El Responsive Design se basa en 3 normas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Grid Flexible<\/li>\n\n\n\n<li>Im\u00e1genes flexibles<\/li>\n\n\n\n<li>Media Queries<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Desktop First<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando tienes creada una p\u00e1gina web para ordenadores, utilizas esta t\u00e9cnica para ir adaptando dicha p\u00e1gina a dispositivos m\u00e1s peque\u00f1os. Totalmente recomendable utilizar la t\u00e9cnica <strong>Mobile First<\/strong>. Si utilizamos <strong>Desktop First<\/strong> se utiliza como <strong>breakpoint<\/strong> la propiedad <strong>max-width<\/strong>, mientras que con <strong>Mobile First<\/strong> se utiliza min-width. Los <strong>frameworks<\/strong>&nbsp;(<strong>Bootstrap<\/strong>, <strong>Fundation<\/strong>) actuales tienen una tecnolog\u00eda <strong>Mobile First<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adaptive Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>Adaptive Design<\/strong> nos dice que hay que crear <strong>Interfaces<\/strong> que se adapten tanto a las caracter\u00edsticas de tama\u00f1o de pantalla como a las caracter\u00edsticas generales (conexiones de red, hardware, interacciones&#8230;). El Adaptive Design lo usa Facebook. El Adaptive Design conviene en <strong>aplicaciones interactivas<\/strong>, como son las <strong>redes sociales<\/strong>, no en sitios web informativos. Se hace desde el <strong>frontend<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Design + Server Side Components (RESS)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que indica es que se hagan los cambios desde el <strong>backend<\/strong> con <strong>Javascript<\/strong>, no desde el <strong>frontend<\/strong> como propone la alternativa anterior (<strong>Adaptive Design<\/strong>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsible Responsive Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es hacer un dise\u00f1o web responsable. Es como si fuera la evoluci\u00f3n del <strong>Responsive Design<\/strong>. Lo \u00fanico que dice es que se agregue Javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fluid Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es la \u00faltima estrategia de dise\u00f1o multidispositivo. Se empieza a hablar a partir del 2020. Lo que trata es de no usar <strong>media queries<\/strong>. Veamos un ejm.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;link rel=\"stylesheet\" href=\"ejm12fluiddesign.css\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm012 - Fluid Design&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Grid fluid&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;section class=\"fluid-grid\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 1&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 2&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 3&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 4&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 5&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 6&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 7&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 8&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 9&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 10&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 11&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 12&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 13&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 14&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 15&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 16&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 17&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 18&lt;\/article&gt;\n&nbsp; &nbsp; &nbsp; &lt;article class=\"fluid-item\"&gt;Elemento 19&lt;\/article&gt;\n&nbsp; &nbsp; &lt;\/section&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y el CSS a aplicar<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.fluid-grid {\n&nbsp; display: grid;\n&nbsp; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}\n.fluid-item {\n&nbsp; background-color: black;\n&nbsp; color: wheat;\n&nbsp; margin: 0.2rem;\n&nbsp; padding: 1rem;\n&nbsp; display: flex;\n&nbsp; justify-content: center;\n&nbsp; align-items: center;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Textos flu\u00eddos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En esta secci\u00f3n creamos textos fluidos. Veamos la sintaxis. Hay <strong>dos t\u00e9cnicas<\/strong>, la primera teniendo varios tama\u00f1os de texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a utilizar una web denominada <strong>Utop\u00eda<\/strong> de la que dejo el link.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/utopia.fyi\/type\/calculator?c=320,21,1.2,1140,24,1.25,5,2,&amp;s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/utopia.fyi\/type\/calculator?c=320,21,1.2,1140,24,1.25,5,2,&amp;s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Primera t\u00e9cnica<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos la sintaxis HTML<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;link rel=\"stylesheet\" href=\"ejm13textosfluidos.css\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Ejm 13 - Textos fluidos&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Ejm 13 - Textos fluidos&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;p class=\"step--2\"&gt;Step -2&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step--1\"&gt;Step -1&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-0\"&gt;Step 0&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-1\"&gt;Step 1&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-2\"&gt;Step 2&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-3\"&gt;Step 3&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-4\"&gt;Step 4&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p class=\"step-5\"&gt;Step 5&lt;\/p&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y la sintaxis CSS que utilizamos<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/* @link https:\/\/utopia.fyi\/type\/calculator?c=320,21,1.2,1140,24,1.25,5,2,&amp;s=0.75|0.5|0.25,1.5|2|3|4|6,s-l *\/\n:root {\n&nbsp; --step--2: clamp(0.91rem, calc(0.89rem + 0.1vw), 0.96rem);\n&nbsp; --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.2rem);\n&nbsp; --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);\n&nbsp; --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem);\n&nbsp; --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem);\n&nbsp; --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem);\n&nbsp; --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem);\n&nbsp; --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem);\n}\n.step--2 {\n&nbsp; font-size: var(--step--2);\n}\n.step--1 {\n&nbsp; font-size: var(--step--1);\n}\n.step-0 {\n&nbsp; font-size: var(--step-0);\n}\n.step-1 {\n&nbsp; font-size: var(--step-1);\n}\n.step-2 {\n&nbsp; font-size: var(--step-2);\n}\n.step-3 {\n&nbsp; font-size: var(--step-3);\n}\n.step-4 {\n&nbsp; font-size: var(--step-4);\n}\n.step-5 {\n&nbsp; font-size: var(--step-5);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Secunda t\u00e9cnica<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hay una segunda manera mucho m\u00e1s r\u00e1pida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplicamos la siguiente sintaxis CSS<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">body {\nfont-size: calc(14px + (18 - 14) * ((100vw -300px)\/(1400-300)));\n\n14 = tama\u00f1o de letra m\u00ednimo para tu sitio\n18 = tama\u00f1o de letra m\u00e1s grande que t\u00fa quieras\n1400 = tama\u00f1o de viewport m\u00e1s grande\n300 = tama\u00f1o de viewport m\u00e1s peque\u00f1o\n\nElegimos un tama\u00f1o de letra m\u00ednimo, un tama\u00f1o m\u00e1ximo de letra, un tama\u00f1o m\u00ednimo de pantalla y un tama\u00f1o m\u00e1ximo.\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo tanto la sintaxis completa es<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; body {\n&nbsp; &nbsp; &nbsp; &nbsp; font-size: calc(14px + (18 - 14) * ((100vw-300px) \/ (1400-300)));\n&nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&nbsp; &nbsp; &lt;title&gt;Document&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Ejm de texto Responsive&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;p&gt;Texto Responsive 1&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p&gt;Texto Responsive 2&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p&gt;Texto Responsive 3&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p&gt;Texto Responsive 4&lt;\/p&gt;\n&nbsp; &nbsp; &lt;p&gt;Texto Responsive 5&lt;\/p&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contenedores flu\u00eddos con fluid design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; .box-fluid {\n&nbsp; &nbsp; &nbsp; &nbsp; width: clamp(400px, 60vw, 600px);\n&nbsp; &nbsp; &nbsp; &nbsp; height: clamp(200px, 30vh, 300px);\n&nbsp; &nbsp; &nbsp; &nbsp; background-color: orange;\n&nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&nbsp; &nbsp; &lt;title&gt;Box Fluid&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h2&gt;Box Fluid&lt;\/h2&gt;\n&nbsp; &nbsp; &lt;div class=\"box-fluid\"&gt;&lt;\/div&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con estos tres principios b\u00e1sicos podemos hacer todo lo que necesitemos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arquitectura CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a aprender que herramientas podemos utilizar. Estas son las cosas que vamos a ver. Para mantener nuestro c\u00f3digo organizado necesitamos un plan, ese plan es la <strong>Arquitectura CSS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Arquitectura es el arte y la t\u00e9cnica de dise\u00f1ar, proyectar y construir edificios y espacios p\u00fablicos, seg\u00fan el diccionario. la Arquitectura CSS es un arte y una t\u00e9cnica de dise\u00f1ar, proyectar y construir. Aplic\u00e1ndolo a CSS, se puede decir que son&nbsp;<strong>t\u00e9cnicas que nos ayudan a organizar y mantener nuestro c\u00f3digo ordenado, \u00f3ptimo y escalable.&nbsp;<\/strong>Si desde un inicio trabajamos con buenas pr\u00e1cticas aplicando CSS el c\u00f3digo siempre ser\u00e1 bueno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El c\u00f3digo debe contar con estas 4 caracter\u00edsticas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Predecible<\/strong>: las reglas se van a comportar como esperamos que lo hagan. Si a\u00f1adimos una nueva caracter\u00edstica, esa no tiene que afectar al resto de secciones. Frameworks como Bootstrap (utility frames) nos ofrecen muchas clases utilitarias que solo afectan a las partes que queremos.<\/li>\n\n\n\n<li><strong>Reutilizable<\/strong>: que se pueda utilizar en ciertas secciones o elementos sin que afecte a otros elementos.<\/li>\n\n\n\n<li><strong>Estable<\/strong>: deber\u00edamos poder actualizar sin que afecte al resto<\/li>\n\n\n\n<li><strong>Escalable<\/strong>:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Debemos dise\u00f1ar sistemas, no p\u00e1ginas en particular. No pensar en un proyecto en particular, sino dise\u00f1ar Sistemas. Todos los proyectos tienen los mismos elementos (cabecera, men\u00fa, contenido lateral, contenido principal, columnas&#8230;).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tecnolog\u00eda D.R.Y. (Dont repeat yourself \/ no te repitas a t\u00ed mismo)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Esta tecnolog\u00eda nos dice que los componentes que creemos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cumplen una sola funci\u00f3n<\/li>\n\n\n\n<li>Son independientes<\/li>\n\n\n\n<li>Son autocontenidos<\/li>\n\n\n\n<li>Son reutilizables<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Herramientas CSS para crear sistemas<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Metodolog\u00edas<\/strong><\/li>\n\n\n\n<li><strong>Frameworks<\/strong><\/li>\n\n\n\n<li><strong>Procesadores<\/strong>: tenemos preprocesadores y postprocesadores<\/li>\n\n\n\n<li><strong>Gu\u00edas de estilos<\/strong>: tiene que ver un poco como ordenamos, o como escribir una peque\u00f1a documentaci\u00f3n para los nuevos desarrolladores que se puedan ir incorporando.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Metodolog\u00edas CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son unas pr\u00e1cticas que nos permiten <strong>organizar<\/strong> y darle nombre a <strong>nuestros selectores<\/strong>, de tal manera que si nuestro proyecto escala, vamos a poder controlarlo sin que se nos escape de las manos. Algunas de las metodolog\u00edas m\u00e1s populares son las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>BEM<\/strong>: es la m\u00e1s utilizada en el mundo, aunque seg\u00fan Jon, no es c\u00f3moda. <a href=\"https:\/\/em.bem.info\">https:\/\/em.bem.info<\/a><\/li>\n\n\n\n<li><strong>SMACSS<\/strong>: <a href=\"https:\/\/smacss.com\">https:\/\/smacss.com<\/a><\/li>\n\n\n\n<li><strong>OOCSS<\/strong>: Object Oriented CSS. <a href=\"https:\/\/oocss.org\">https:\/\/oocss.org<\/a><\/li>\n\n\n\n<li><strong>ITCSS<\/strong>:<\/li>\n\n\n\n<li><strong>AMCSS<\/strong><\/li>\n\n\n\n<li><strong>SUITCSS<\/strong><\/li>\n\n\n\n<li><strong>Atomic Design<\/strong>: es la que utiliza Jon. Le gusta la metodolog\u00eda que defiende Atomic Design.\n<ul class=\"wp-block-list\">\n<li>Pattern Lab (<a href=\"https:\/\/patternlab.io\">https:\/\/patternlab.io<\/a>)<\/li>\n\n\n\n<li>Demos<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Atomic Design tiene el siguiente paradigma:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Atomo (las etiquetas HTML) &#8211; Moleculas &#8211; Organismos &#8211; Templates &#8211; P\u00e1ginas<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">No hay porque utilizar una sola metodolog\u00eda. Trata de conocerlas e implementarlas, y qu\u00e9date con la que mas te guste o parezca m\u00e1s c\u00f3moda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frameworks CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son marcos de trabajo que nos ofrecen componentes y utilidades de UI.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>960 Grid System<\/strong>: es el padre de todos los Frameworks. Comenz\u00f3 por 2009. Es el abuelo de Bootstrap, el cual es mantenido por gente que trabaja en Twitter.<\/li>\n\n\n\n<li><strong>Skeleton<\/strong>: es un boilerplate.<\/li>\n\n\n\n<li><strong>Pure CSS<\/strong>: <a href=\"https:\/\/purecss.io\">https:\/\/purecss.io<\/a>. Es una herramienta muy minimalista.<\/li>\n\n\n\n<li><strong>Ink<\/strong>: es un framework no muy popular pero ha aguantado el paso de los a\u00f1os. <a href=\"https:\/\/ink.sapo.pt\">https:\/\/ink.sapo.pt<\/a>. Trabaja con preprocesadores.<\/li>\n\n\n\n<li><strong>MUI<\/strong>: no es muy conocido. <a href=\"https:\/\/muicss.com\">https:\/\/muicss.com<\/a>. Se puede utilizar con Angular o con React.<\/li>\n\n\n\n<li><strong>Semantic UI<\/strong>: no ha despegado del todo. <a href=\"https:\/\/semantic-ui.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/semantic-ui.com<\/a>.<\/li>\n\n\n\n<li><strong>Bootstrap:\u00a0<\/strong>es el rey de los Frameworks. Muchas plantillas de WordPress, Drupal, utilizan Bootstrap. A d\u00eda de hoy va por la versi\u00f3n 5, que no utiliza JQuery. La 5 trae su librer\u00eda de iconos. La documentaci\u00f3n es muy sencilla. <a href=\"https:\/\/getbootstrap.com\">https:\/\/getbootstrap.com<\/a><\/li>\n\n\n\n<li><strong>Tailwind CSS:\u00a0<\/strong>es un Framework relativamente joven, muy f\u00e1cil de implementar. <a href=\"https:\/\/tailwindcss.com\">https:\/\/tailwindcss.com<\/a>. Los nombres de las clases son muy sem\u00e1nticos, muy f\u00e1ciles e intuitivos.<\/li>\n\n\n\n<li><strong>Foundation:\u00a0<\/strong><a href=\"https:\/\/get.foundation\">https:\/\/get.foundation<\/a>. Tienen muy buenas pr\u00e1cticas a nivel de sintaxis CSS. Tienen su versi\u00f3n para sitios web y para email marketing. Cualquiera de las secciones tiene videotutoriales. A nivel de componentes est\u00e1 m\u00e1s limitado que <strong>Bootstrap<\/strong>.<\/li>\n\n\n\n<li><strong>Materialize:\u00a0<\/strong><a href=\"https:\/\/materializecss.com\">https:\/\/materializecss.com<\/a>. Es el primer Framework que dej\u00f3 de utilizar JQuery.<\/li>\n\n\n\n<li><strong>UI Kit:\u00a0<\/strong>es muy parecido a Mui, es f\u00e1cil implementarlo a <strong>React<\/strong>. Tiene una gran cantidad de componentes.<\/li>\n\n\n\n<li><strong>Bulma:\u00a0<\/strong>es un Framework CSS moderno. <a href=\"https:\/\/bulma.io\">https:\/\/bulma.io<\/a>. Puedes o no utilizar Javascript. Es opcional.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Los m\u00e1s importantes son los marcados en Negrita. Los m\u00e1s importantes frameworks a d\u00eda de hoy son <strong>Bootstrap<\/strong> y <strong>Tailwind CSS,&nbsp;<\/strong>incluso <strong>Fundation<\/strong> que tambi\u00e9n es muy potente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A mi sitio personal es mejor no meter <strong>Frameworks<\/strong>, ya que es m\u00edo, pero para agilizar es interesante utilizar <strong>Frameworks<\/strong>. Dependiendo de las necesidades y caracter\u00edsticas podemos utilizar o no <strong>Frameworks<\/strong>, y cual de ellos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hay que s\u00ed o s\u00ed dominar los fundamenteos de CSS y los modelos de maquetaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando nos vamos a decidir a utilizar Framewoks o no depende de las necesidades del proyecto. En nuestro propio sitio web est\u00e1 bien maquetar nosotros mismos nuestro proyecto. Interfaz f\u00e1cil de usar, minimalista, utilizar en la menor cantidad posible librer\u00edas y Frameworks profesionales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los elementos de formulario de Material Design son muy vistosos, por lo que se pueden utilizar para proyectos r\u00e1pidos. NO CASARSE CON UN S\u00d3LO FRAMEWORK.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Procesadores CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pueden ser <strong>preprocesadores<\/strong> o <strong>postprocesadores<\/strong> CSS. No son lo mismo. Los primeros son herramientas que nos van a permitir tomar un lenguaje. Son metalenguajes. Nos permiten tener como mejor organizado el c\u00f3digo CSS de nuestro proyecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El mas popular es Sass.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Preprocesadores CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pueden ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sass<\/strong>: <a href=\"https:\/\/sasslang.com\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/sasslang.com<\/a><\/li>\n\n\n\n<li><strong>Less<\/strong>: <a href=\"https:\/\/lesscss.org\">https:\/\/lesscss.org<\/a><\/li>\n\n\n\n<li><strong>Stylus<\/strong>: <a href=\"https:\/\/stylus.lang.com\">https:\/\/stylus.lang.com<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El est\u00e1ndar actual es <strong>Sass<\/strong> con la sintaxis <strong>scss<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Postprocesadores CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Son herramientas que procesan el CSS y lo optimizan. Pueden ser<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Post CSS: <a href=\"https:\/\/postcss.org\">https:\/\/postcss.org<\/a><\/li>\n\n\n\n<li>CSS Next<\/li>\n\n\n\n<li>CSS in JS<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Jon no es muy fan ni de pre ni de post procesadores CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primero aprender HTML, CSS y Javascript antes de aprender a manejar estas herramientas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Herramientas de automatizaci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Algunas herramientas que vamos a tener que conocer con el tiempo son<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Build Tools<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js<\/strong>: es un entorno de programaci\u00f3n Javascript que nos permite trabajar en el modo de servidor. <a href=\"https:\/\/nodejs.org\">https:\/\/nodejs.org<\/a>.<\/li>\n\n\n\n<li><strong>Grunt<\/strong>: fue uno de los primeros gestores de tareas Javascript. Fue la primera herramienta pero han salido otras que la han ido sustituyendo.<\/li>\n\n\n\n<li><strong>Gulp<\/strong><\/li>\n\n\n\n<li><strong>Webpack<\/strong>: es un bundler que nos permite empaquetar o configurar un entorno de programaci\u00f3n en <strong>React<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Online Tools<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code pen: <a href=\"https:\/\/codepen.io\">https:\/\/codepen.io<\/a>. Puedes crear un proyecto web.<\/li>\n\n\n\n<li>JS Bin: <a href=\"https:\/\/jsbin.com\">https:\/\/jsbin.com<\/a>. Es parecida a Code pen.<\/li>\n\n\n\n<li>Autoprefixer CSS.<\/li>\n\n\n\n<li>CSS Minifier.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Para todas estas herramientas necesitas el uso de la terminal, por lo que lo mejor es aprender bien HTML, CSS y Javascript. Las librer\u00edas, los frameworks&#8230; van y vienen, las bases son fijas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si queremos minimizar nuestra hoja de estilo, copiamos el c\u00f3digo creado y lo llevamos a Autoprefixer, nos crea el c\u00f3digo nuevo, y lo llevamos a CSS Minifier para minimizar dicho c\u00f3digo, y con esto es suficiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Gu\u00edas de estilo que podemos seguir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es una colecci\u00f3n de elementos y reglas preestablecidas que aseguran la <strong>consistencia<\/strong> y <strong>coherencia<\/strong> de nuestro c\u00f3digo. Algunas de ellas son:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Realmente las gu\u00edas de estilo se aplican a todos los lenguajes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Code Guide<\/strong>: es la favorita de Jon. <a href=\"https:\/\/codeguide.co\">https:\/\/codeguide.co<\/a>. Est\u00e1 creada por la gente de GitHub.<\/li>\n\n\n\n<li><strong>W3C Design System<\/strong><\/li>\n\n\n\n<li><strong>Website Style Guide<\/strong>: es un sitio que recopila gu\u00edas de estilo de otros sitios. Es como un repositorio..<\/li>\n\n\n\n<li><strong>Airbnb CSS \/ Sass Styleguide<\/strong>: se ha vuelto muy popular.<\/li>\n\n\n\n<li><strong>Idiomatic CSS<\/strong>: es una gu\u00eda de estilos muy minimalista que puede servir.<\/li>\n\n\n\n<li><strong>CSS Guidelines<\/strong>: <a href=\"https:\/\/cssguidelin.es\">https:\/\/cssguidelin.es<\/a>. Es una de las gu\u00edas de estilo m\u00e1s populares.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 elijo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si estamos empezando que elegimos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que tenemos que preocuparnos es en dominar los conceptos de <strong>HTML<\/strong>, <strong>CSS<\/strong> y <strong>Javascript<\/strong>. Una vez dominemos estos conceptos. Un buen comienzo es aprender bien el <strong>frontend<\/strong> (<strong>HTML<\/strong>, <strong>CSS<\/strong> y <strong>Javascript<\/strong>). Si ya queremos ser profesionales del <strong>Frontend<\/strong> entonces avanzar en <strong>tecnolog\u00edas Frontend.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n al Responsive Design En el a\u00f1o 1998 se cre\u00f3 el lenguaje llamado WML (Wireless Markup Language) y un protocolo llamado WPA&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":556,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1553","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n al Responsive Design En el a\u00f1o 1998 se cre\u00f3 el lenguaje llamado WML (Wireless Markup Language) y un protocolo llamado WPA...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1553"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1553\/revisions"}],"predecessor-version":[{"id":1555,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1553\/revisions\/1555"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/556"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}