 ¿Qué han hecho en la programación desde que hizo su primer juego para el ZX Spectrum? El Basie, el instaceno medio, estamos hablando de eso, algo traducimos eso, que publicó la revista MicroHobby y que le pagaron 5.000 pesetas. 5.000. La época, uaa. Interesas generales, pues familia, amigos, leer, navegar, esperar y contribuir porque además es el encargado de voluntarios en la work in Gran Canaria. Bien, vamos a ver, mi charla, comento, es una charla, cuando hablamos de hacer la work in, hablamos que algunas charlas tenían que ser de nivel bastante más básico que otras porque claro hay gente nueva que está entrando ¿no? Y hay que darle también ayuda, soporte y para que se vayan animando ¿vale? Entonces pues qué cosa tan básica ¿no? que el responsive web design ¿no? Entonces ¿para qué sirve el resto? Vamos a ver, al principio de la informática móvil, bueno esto es un iPhone y como ven no se ve muy bien ¿vale? pero esto es la página de New York Times, toda miniaturizada en la página de un teléfono móvil ¿vale? era cuando todavía todo ese estándar que utilizamos ahora no existía y entonces pues toda la página se condensaba y claro habría que hacer con el dedito hacer el trípico movimiento para ampliar la pantalla ¿vale? Entonces claro habría que buscar una solución ¿no? porque aparte en esa época empezaron a salir también la segunda generación del iPhone, empezaron a salir las aplicaciones móviles, las apps que ya solucionaba eso un poco aunque no con estándares sino bueno cada vez sabía qué tamaño de pantalla y ajustaba su display a ese tipo de información ¿vale? Entonces, ¿esto es lo que hay que soportar entre robantes? ¿Solo eso? bueno, entonces estamos, tenemos esto, tenemos laptop, tenemos tablets tenemos teléfonos móviles ¿vale? pero es cierto que hay que soportar todo esto en realidad no, horror, tenemos más televisiones, los fables famosos que son una mezcla entre tablets y phones ¿no? y venimos, tenemos que soportar los tamaños antiguos que todavía asisten ahora vienen los relojes que no salen aquí pero todavía ¿solo eso? no ¿quieto? Samsung tiene por ejemplo 18 tipos de pantalla distintas ¿vale? verdad que eso Apple lo controla mejor pero porque es una firma propietaria y es una marca propietaria y puede contraer todo pero por ejemplo Android soporta, si te han perdido Android y antes Windows Phone soportaba distintos era libre con el tema de los tamaños de pantalla, había ciertos estándares pero uno podía adaptar entonces Samsung todo este tipo de pantalla, claro, y en demonios soporta eso sin un estándar sin una forma hacer las cosas, coherente ¿vale? entonces bueno, pues empezó la solución responsive web design ¿de acuerdo? entonces ¿en qué consiste el repósito web design? vamos a ir abriendo un poquito ahora las claves que tiene el repósito web design pero como ven se supone que es ir adaptando pues adaptando toda la información que tú le mostras a un cliente ¿vale? pues adaptándose al modelo de pantalla o al modelo no al tamaño de pantalla que tienes ¿de acuerdo? entonces lo ideal es que yo soy freelance ¿vale? y normalmente trabajo con un diseñador que me hace las cosas y yo las paso ¿vale? a veces hago yo diseño pero en fin, eso se depende de eso entonces la cosa es que el diseñador, lo ideal sería que el diseñador ya pasase por todas estas fases ¿vale? pero que claro el tema es ¿hay solo cuatro tipos de pantalla? si no encontramos los relojes que hay un montón ¿vale? hay varias marcas pero lo importante pues los típicos Apple las de Samsung, etc. ¿no? pero hay solo cuatro tipos de pantalla en realidad no ¿vale? en realidad hay muchos tipos de pantalla como vimos antes en la diapositiva de Samsung que tiene todos eso y todos eso hay que soportarlo ¿vale? entonces todo hemos visto alguna página web que sí que se supone que se adapta pero que ¿vale? que se adaptará a lo mejor en tres pero todo se adapta ¿no? porque es complicado ¿vale? pero vamos a hablar un poco a ver cómo podemos ir solucionando ese tema de que no sean tan complicados soportar todo ese tipo de pantalla ¿vale? entonces lo ideal es que pues el diseñador te haga un boceto de cada tipo de display que hay ¿vale? pues mire por ejemplo pues aquí se eliminó como ven ¿no? y aquí eliminamos el sign para izquierdo pues aquí saltamos eliminamos el... volvemos a través del server izquierdo pero eliminamos el derecho que más ancho aquí ya no tenemos sign bar sino todo a 100% pero en scroll ¿no? bueno entonces la clave del responsive web design esto es Dios ¿vale? si no ponemos esto en una página web todo lo sabemos eso va a fallar eso no va a funcionar ¿vale? aquí le estamos diciendo al dispositivo en realidad el navegador, un dispositivo porque se adapte la pantalla ¿vale? a los... o sea que no use las unidades de ancho normales sino que use las unidades independientes del dispositivo ¿qué quiere decir eso? ¿vale? podemos tener dispositivos que de ancho tengan 1.080 que es una barbaridad ¿no? en realidad para un navegador tiene unidades independientes de dispositivo no tiene 1.080 tiene a lo mejor 480 depende ¿no? eso podemos hacer la prueba si controlamos un poquito el JavaScript podemos ver exactamente que en la página nos muestre cuál es el número de unidades independientes positivos que tiene ¿vale? entonces este trozo de código tiene que estar en el head del sitio web ¿vale? porque si no no va a funcionar nada bien ¿qué nos trae el responsive web design? ¿o qué tenemos que hacer para que el responsive web design funcione normalmente bueno, por supuesto esterrar los números fijos si ponemos números de pantalla con ancho fijo o un número mágico los números mágicos son tabú eso no deberíamos usarlo a menos que tengamos nada de esto está creando un piedra ¿vale? a menos que tengamos un motivo exacto que nos oblige los números mágicos, números fijos aproximadamente un E porque sea dicespíxeles es lo lógico ¿vale? y además no es que sea una estándar pero sí es lo que todos los navegadores usan y incluso cuando utilizamos los protocoles tactiles pues el dicespíxeles te da a veces más, a veces menos pero te da para hacer clic y que no toque en la línea arriba o en el día abajo ¿vale? para la derecha a la izquierda hay que ponerle padding si ponemos un E un E seguro que va a funcionar mejor entonces ¿para qué sirve esto? pues si un componente más adelante que antes yester creo que les habló de CSS modular y todo eso hablando de componente pues un componente la potencia es un poquito más grande y un poquito más pequeño pues utilizando fonsai si todos lo medimos en M subimos el tamaño de la fuente y el componente el componente crece o decrece y siempre va a mantener la proporción ¿de acuerdo? lo que digo tamaño es proporcionales siempre siempre como digo nada esto está aquí con piedra ¿vale? cada uno verá lo que está haciendo dependiendo de las necesidades tamaño y proporcionales siempre la multimedia, flexible el contenedor puede tener el ancho que queramos dependiendo de esta media pantalla pero siempre que se ajuste sea el contenedor y no el interior ¿por qué? porque eso no da ventaja y luego no da ventaja la hora de cambiarle el tamaño ¿vale? ¿qué más? yo no sé si notas que estoy acelerando un poquito la charla ¿vale? porque para intentar recuperar el tiempo que se perdió antes en la bien ¿qué más tenemos que juntar en la responsivo de design? bueno las media queries claro son la clave ¿vale? entonces la responsivo de design las media queries nos permiten seleccionar dependiendo de ciertas condiciones que además no sólo nos permiten ver los tamaños de la pantalla de dispositivo siempre en unidades independientes de dispositivo ¿vale? no en los píxeles ¿de acuerdo? sino en unidades dependientes del dispositivo o sea clave de la responsivo de design y además nos permiten utilizar los permiten especificar para qué tipo de salida la vamos a usar en este caso es la pantalla screen aquí podemos poner por ejemplo hay salidas print y así modificamos a ver si mandamos imprimir la página del sitio web por ejemplo es un sitio web que imprima factura pues como controlamos el layado de la factura pues así eliminando cosas que no queramos pero utilizando media en ese caso ¿vale? hay muchos condiciones por ejemplo nos permite discriminar si el teléfono está paisado si está vertical si el teléfono podemos controlar que si el teléfono se pone en una disposición que obligara el usuario o obligara al sitio web que se muestre en otra en otra disposición y bueno esto es la clave para poder seleccionar los tipos aquí que estamos diciendo osea la salida es para la pantalla y además el ancho máximo de 320 ¿vale? osea que sea menor aquí estamos dando fíjense por ejemplo tenemos un cyber a la izquierda lo mando a la izquierda 25% y el resto de 75% es el contenido el contenido principal de la página ¿vale? y aquí que lo estoy diciendo si el contenido está 320 por debajo pues ya eso no vale sino aquí lo estoy cambiando le quito la flotación osea que estará el primero encima y el segundo debajo porque son bloques entonces coger el 100% de su contenedor y el tamaño 100% exactamente si por si eres un contenedor si ponemos float no aquí podríamos haber enviado esto bueno no perdón eso no podríamos haber enviado porque bien lo estamos poniendo hablando esto de aquí bueno esta es la clave de la posibilidad y la pedia cuéres es clave y que te gane cuenta que hay muchos tipos de condiciones que se pueden cumplir y que nos permiten ir ahora vemos por ejemplo que son los prepoints los prepoints son los puntos por ejemplo aquí digo 320 píxeles ¿vale? pero aquí por ejemplo para el laptop para de esto por ejemplo pues mayor de 1.800 puntos para el laptop es decir puntos para los píxeles para los laptop por ejemplo 1.200 píxeles esos son los prepoints ¿vale? los puntos de ruptura cuando la página en este caso el punto de ruptura es 320 llega a 320 cambia deja de tener efecto este CSS y tiene efecto este que está dentro de estas llaves ¿vale? aquí por ejemplo los procesadores jugarían un buen gran papel creo que entre este le daré un poco sobre el prepositor y por el pos CSS y bueno ¿por qué? porque los prepositor permita que las pedia cuéries se puedan anidar se pueden anidar dentro de declaraciones divos de cualquier otra cosa ¿vale? entonces los prepositor como SaaS por ejemplo los prepositor como SaaS nos quitan muchas curiosidades de cabeza y nos quitan la vida de acuerdo entonces el problema de los prepoints fijos es que no siempre funcionan por ejemplo bootstrap y foundation utilizan prepoints fijos cuando utilizamos lo que traen por defecto pero a veces pasa que no se ajusta nuestro diseño a veces pasa que nosotros lo decimos pasa del acto perdón, pasa del acto y ahí hay algo de llegar al prep point hay una cosa que se monta encima de otra bueno entonces si nosotros dejamos pasar eso quiero decir eso un profesional no debería dejarlo pasar ¿vale? no hay que dejar caer el peso en los prepoints que traen estos frameworks y no uno tiene que ir viendo dónde se rompe el diseño y aplicar un prep point que sea uno o de propio o hacer algo ¿vale? pero eso que se montamos encima de otra eso de tabú ¿de acuerdo? ¿qué más? va eso ajustar los prepoints en los tu diseños pero vemos cómo se rompa diseño-diseño, bien seguimos móvil-first, entonces hay dos tendencias para el tema del reposo ipodizac móvil-first y desktop-first ¿qué significa eso? pues como su propio problema indica el móvil-first primero empieza en el diseño del móvil y luego va añadiendo cosas ¿vale? entonces, a mí me gusta más móvil-first pero hay gente que trabaja al revés sobre todo ella es la niña del señor como se dice ¿vale? ¿qué ventaja tiene móvil-first? bueno, pues mostramos cuando no pantalla es pequeña tenemos que seleccionar mucho lo que tenemos que mostrar ¿vale? entonces tenemos que centrarnos en el contenido y ser muy conciso ¿de acuerdo? al medida que la pantalla se va ampliando, podemos ir metiendo más contenido más más cosas, un sidebar que no es central no está dentro del contenido importante pero bueno, estaré en un contenido auxiliar y tal pero cuando tenemos una pantalla pequeña lo primero que ves tiene que tirar de clientes ¿vale? entonces mostramos lo más importante primero y de ahí vamos creciendo ¿de acuerdo? a mí es más sencillo trabajar así porque ya selecciono lo más importante y luego lo que hago es ir añadiendo le cosas ¿vale? también es verdad que te voy a cambiar los menús de forma, todo eso eso va implícito, loíicamente ¿vale? pero creo que es más fácil a nivel de de diseño ¿vale? empezar así para ir creciendo para ir haciendo crecer la página con añadidos que no son tan cruciales ¿de acuerdo? luego está el otro, desktop-first que es al revés, de pantalla grande va bajando entonces bueno, ahí lo que tenemos que ver es que vamos quitando pues empezamos al revés que es lo que no es tan importante y lo vamos eliminando y estiendo por abajo ¿no? que es la otra o sacándolo de la pantalla que luego lo metemos con un swipe o alguna historia o apretando un botón ¿de acuerdo? entonces los conceptos son parecidos pero contrarios ¿de acuerdo? aquí empezamos a buscar lo que no es tan importante y empezamos a ocultarlo apartarlo, ponerlo en otro lado bajarlo ¿vale? ¿cuál es, en mi opinión esto es como digo, tercera vez creo que lo digo, no has traído piedras ¿vale? entonces, en mi opinión ¿cuándo utilizaríamos desktop-first? pues si ya existen sitios para esto o una aplicación que difícilmente se va a utilizar en un móvil es complicado, porque hoy en día la gente se va a ver en internet por móviles y en un futuro eso va a seguir creciendo ¿vale? por eso que a mi móvil-first creo que es mejor ¿vale? y bueno, gracias si tiene alguna pregunta sí bien yo quería más que una pregunta de comentar por favor porque creo que una parte importantísima a parte de todo lo que has comentado de layout también creo que a veces nos olvidamos de que en móvil hay movilión de interacciones que no es posible porque estamos con el paradigma del touch de serie, muchas veces me han traído diseños que es parte importante por ejemplo, pues asociada de eventos hover cuando pasa el ragón por encima claro esa es otra parte del reponsible design todo lo que es el que cambia totalmente cuando pasamos al tocho lo que pasa es que no quise hablar de eso porque comer una charla un poco básica pero yo... hay un montón de eventos que los móviles no funcionan o que funcionan en los móviles o funcionan en el desktop a menos que sea de pantalla táctil también el reponsible design el adaptarse al medio no solo la pantalla sino que la pantalla sea todo un botón y no solo un botón que se apretas y un botón que hace cosas derecha, izquierda o levantar o bajar gracias por el amonto más preguntas? muy bien, pues gracias ah, perdón, perdón me quería acercar lo que ha hecho él también quería hacer un aporte yo me digo también a temas de diseño y una cosa que ocurre mucho es que la gente se vuelve muy loca con el tema de breakpoints si no utilizan ningún framework al final por ejemplo yo lo que hago si no utilizan ninguno me marco 3 o sea no me marco 18 porque hay que ser realistas pero cuidado yo si te marcas pero cuando se rompe el diseño hay alguien que ha tomado breakpoints aunque no entre el tro de lo normal la clave es yo creo que estaré es perfecto si tienes un framework y luego dices, ostia, esto el framework es genial pero hay un punto para romper le meto un media query en esa dimensión yo no condeno gustro ni foundation ni nada eso por dios estaría bueno, pero yo no soy bien va a condenarlo, es más a veces lo uso pero también hay que tener en cuenta eso si utilizamos punto fijo a veces se rompe el diseño y eso es que es vital para romper, parar ahí y organizar todo de otra forma pues muchas gracias Miguel gracias