Entradas

Mostrando las entradas con la etiqueta Material Design

Analizando Adaptative Design #Pocket app

Imagen
Una de las buenas prácticas es siempre observar las apps premiadas por el equipo de #MaterialDesign. Muy interesante el modelo presentado por #Pocket para #adaptative-design. Hoy quería dejarles este material si les interesa llevar su app #Android al siguiente nivel en este importante segmento del desarrollo y diseño de la app. En la Fig.1 se muestra el comportamiento esencial para la orientación vertical. Fig.1 Pocket para las opciones verticales Y en la Fig.2 se puede ver el comportamiento para la distribución horizontal. Fig. 2 Pocket para las opciones horizontales Dado que la implementación de cada diseño variará en cierta medida, probablemente una de las primeras cosas que tendrás que hacer será determinar el diseño que el usuario puede ver en cada momento, Disfrutando #DesignSprint junto a la comunidad de #Chile. Analizando Adaptative Design #Pocket app por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0...

Material Design Lite, Simple Card

Imagen
Les quiero dejar la primera experiencia utilizando #MaterialDesignLite, para este ejemplo utilicé un componente simple de #card. 1. Configurar un simple #html con lo esencial para que los estilos respeten #MaterialDesign. (utilicé los vínculos a los archivos en el CDN de referencia, luego hay varias opciones para dejarlo local) Dentro del #head:     <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/ material.css ">     <script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/ material.js "></script>     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 2. Una simple configuración de estilos para darle un toque personal a la #card: <style>     .demostracion-mdl-card {     width: 450px;   }     .demostracion-mdl-card > .mdl-card__title {     color: #fff;     height: 150px;   ...