NSF Mobile for Dummies
Martin Ortega Novella  Diciembre 6 2015
Martin Ortega Novella  Diciembre 6 2015
Un nuevo ejemplo para los que se quieran iniciar en esto de diseño Responsive, no tengo que decir que he usado el Template del blog (eso se da por descontado), el motivo está claro, no necesito usar el Designer para nada, además el manejo de los HTML Block Template te facilita mucho la faena, puedes tener organizadas tus páginas en diferentes formularios, el comportamiento es parecido (por no decir igual) al uso de subformularios en el diseño de toda la vida. Tener un formulario principal (los Page Templates) y todo el código en los subformularios ???(los Block Templates) bueno, así es como lo hace la plantilla original de IBM pero a mi me gusta tener el "código principal" en los formularios y usar los subformularios (voy a llamar formularios a los Page y subformularios a los Block) para otras cosas, ejemplo, header, menús, tags, etc. Este nuevo ejemplo (próximamente descargable en nuestra fábrica) va a estar limpio, nada de código sobrante, además voy a separarlo por colores, me explico: Si abres la base de datos desde un pc con una pantalla "curiosa", por ejemplo, con un iMac de 27 pulgadas, según vais bajando el tamaño de la ventana puedes ver tres cambios de diseño, bueno, estos tres cambios va a estar resaltados dentro de la hoja de estilos, por ejemplo, todo lo que está de color rojo es para resoluciones inferiores a 40em, etc, etc.

NSF Mobile for Dummies


Si os fijáis en este enlace los contenedores se van desplazando hacia abajo cuando no caben en la pantalla pero claro, el tamaño del contenedor no cambia, en mi ejemplo no es así, el contenedor tiene un tamaño en función de la medida del dispositivo que estés usando, los tamaños son relativos, eso tiene un problema, hay que afinar para que los bordes, padding o márgenes no te “desborden” la pantalla, ejemplo, supongamos que tengo dos contenedores de tamaño 50%, si le digo que los bordes son de 1px y el padding (derecho, o izquierdo) es de 10px, es igual el tamaño de la pantalla, los contenedores nunca se verán en línea. Hay que tener cuidado también con los márgenes, si los tamaños son relativos su valor va en relación con otra medida, si por ejemplo decimos que los margenes miden 1em equivale a decir que el margen será igual al tamaño de la letra del contenedor. Este tema de los márgenes me tiene un poco tocado, he llegado a soluciones caseras para obtener buenos resultados, de cualquier forma creo que estoy hablando de cosas de las que no soy experto, yo lo que conozco es la plantilla y estoy convencido que este ejemplo puede ser de gran ayuda para alguien que esté empezando.
Bueno, a ver cuando la acabo, cuando vuelva a mi pueblo la remato, ahora estoy en Sitges, me he traido mi MacBook Air, en casa de mi madre no hay ADSL, esta entrada la he creado usando la opción de compartir Internet pero si me descuido me cepillo los 2 GB que tengo de datos, o sea, cambio y corto.
Cogno ¡¡¡ el enlace con la base de datos NSF Mobile for Dummies:
Here está.

MobileResponsive

NSF Mobile for Dummies