\n \u00a1Vamos a empezar!\n<\/p>\n
\n Principios b\u00e1sicos del dise\u00f1o de materiales\n<\/p>\n
\n Met\u00e1fora material:
\n<\/h5>\n
\n El dise\u00f1o de materiales pone un gran \u00e9nfasis en hacer que los elementos, las animaciones y las transiciones sean tan reales como parecen en la vida real. Despu\u00e9s de un estudio intensivo del papel y la tinta, el equipo de Google decidi\u00f3 utilizar una met\u00e1fora material como principio unificado de un espacio racionalizado y un sistema de movimiento. En pocas palabras, podemos decir que el dise\u00f1o de materiales no es m\u00e1s que una combinaci\u00f3n de varios conceptos cl\u00e1sicos de dise\u00f1o y propiedades f\u00edsicas b\u00e1sicas.\n<\/p>\n
\n Superficies tangibles:
\n<\/h5>\n
\n En el dise\u00f1o de materiales, las superficies y los bordes del material establecen una estructura f\u00edsica para dar a los usuarios pistas visuales que les ayuden a comprender r\u00e1pidamente lo que pueden tocar y mover. Utilizando los principios del dise\u00f1o de impresi\u00f3n, el dise\u00f1o de materiales mantiene el contenido importante frente al ojo del usuario, mientras ignora otros contenidos menos \u00fatiles. El uso de atributos familiares, intuitivos y naturales permite que el cerebro del usuario trabaje menos y comprenda r\u00e1pidamente las posibilidades.\n<\/p>\n
\n Prestaciones dimensionales:
\n<\/h5>\n
\n Si hay una pila de papeles en tu escritorio, estos ganan dimensi\u00f3n adem\u00e1s de proteger sus sombras. Del mismo modo, en el dise\u00f1o de materiales, cuando aplica esta propiedad a la interfaz de usuario, tendr\u00e1 jerarqu\u00eda y sombras para llamar la atenci\u00f3n del usuario sobre el objeto m\u00e1s importante con el que debe interactuar. Usando los conceptos b\u00e1sicos de luz, superficie y movimiento, el dise\u00f1o de materiales transmite c\u00f3mo un objeto interactuar\u00e1 con los usuarios. Adem\u00e1s, la iluminaci\u00f3n realista permite a los usuarios obtener la vista m\u00e1s realista de la interfaz que ha dise\u00f1ado.\n<\/p>\n
\n Un dise\u00f1o adaptativo:
\n<\/h5>\n
\n El dise\u00f1o de materiales utiliza un \u00fanico sistema de dise\u00f1o subyacente para organizar el espacio y las interacciones. El concepto de un dise\u00f1o adaptativo brinda coherencia a diferentes dispositivos, lo que significa que un dise\u00f1o unificado crea vistas especializadas para diferentes tipos de dispositivos. Cada vista se adapta de manera \u00fanica a la interacci\u00f3n y el tama\u00f1o adecuado para un dispositivo en particular. Por otro lado, no se realizan cambios en la jerarqu\u00eda, la iconograf\u00eda, los colores y las relaciones espaciales.\n<\/p>\n
\n Contenido en negrita e intencional:
\n<\/h5>\n
\n Otra cosa que notar\u00e1 sobre este nuevo lenguaje visual es su dise\u00f1o audaz con una combinaci\u00f3n de colores brillantes. Tomando como referencia la cinta para marcar el pavimento, la arquitectura contempor\u00e1nea, las se\u00f1ales de tr\u00e1fico y las canchas deportivas, Google ha introducido colores fant\u00e1sticos y vibrantes que nunca hab\u00edas esperado. Adem\u00e1s, han refinado en gran medida la fuente Roboto<\/a>, haci\u00e9ndola un poco m\u00e1s ancha y redonda para que la lectura sea una mejor experiencia. Adem\u00e1s, el espacio en blanco deliberado y las im\u00e1genes de borde a borde crean claridad e inmersi\u00f3n.\n<\/p>\n \n El dise\u00f1o de materiales pone mucho \u00e9nfasis en hacer que la interacci\u00f3n entre los usuarios y las superficies sea m\u00e1s digital, m\u00e1gica y receptiva. En este estilo de dise\u00f1o, cuando alguien interact\u00faa con la interfaz de usuario, todo el dise\u00f1o se transforma de manera sorprendente. La expresi\u00f3n gr\u00e1fica con color, superficie e iconograf\u00eda brinda a los usuarios una idea clara de lo que puede hacer un objeto, mientras que la interacci\u00f3n receptiva alienta al usuario a explorar profundamente la interfaz: si toco esto, \u00bfqu\u00e9 suceder\u00e1? \u00bfY qu\u00e9 pasa despu\u00e9s?\n<\/p>\n \n Cuando una persona toca la superficie del agua y forma ondas, la energ\u00eda derivada de sus acciones para realizar cambios en la interfaz le brinda una experiencia real y tangible. De la misma manera, Material Design permite a los usuarios tocar la interfaz de usuario como lo hacen en la vida real. Para esto, Google sugiere a los dise\u00f1adores que tengan en cuenta una dimensi\u00f3n adicional de la interacci\u00f3n, que es la \u00abretroalimentaci\u00f3n de movimiento\u00bb. De modo que el usuario pueda sentir que la superficie lo escucha en desplazamientos, arrastres, deslizamientos y toques.\n<\/p>\n \n En el mundo real, cada acci\u00f3n tiene un movimiento, un comienzo y un final. Por ejemplo, cuando abre una caja de cart\u00f3n en la vida real, toca en alg\u00fan lugar y muestra lo que hay dentro. Asimismo, todas las acciones del usuario en el dise\u00f1o de materiales tienen lugar en un entorno unificado. Cada objeto se presenta al usuario con una animaci\u00f3n r\u00e1pida, suave y continua que se coreograf\u00eda en un escenario compartido. A medida que todos los activos en el dise\u00f1o de materiales se mueven al ritmo, la pantalla parece m\u00e1s fascinante e interactiva que nunca.\n<\/p>\n \n Como todos sabemos, para Google la experiencia del usuario es m\u00e1s importante que cualquier otra cosa. La misma regla se aplica al \u00faltimo principio del dise\u00f1o material. Este principio dice que el movimiento debe ser apropiado, significativo y cuidadosamente coreografiado, y no debe usarse solo para impresionar a los usuarios. El movimiento en el dise\u00f1o de materiales no solo debe ser hermoso, sino tambi\u00e9n generar significado sobre la funcionalidad y las relaciones espaciales, adem\u00e1s de mantener la belleza y la simplicidad de una experiencia de usuario perfecta.\n<\/p>\n \n \u00bf A\u00fan no est\u00e1s familiarizado con Polymer<\/a>? \u00a1Bien! Polymer es un excelente conjunto de herramientas de interfaz de usuario que le permite llevar el dise\u00f1o de materiales a la web. Con la colecci\u00f3n de elementos de papel<\/a> de Polymer, tendr\u00e1 acceso a todas las capacidades del dise\u00f1o de materiales y podr\u00e1 aportar tangibilidad, gr\u00e1ficos audaces y transiciones y animaciones suaves a sus aplicaciones en la web. Puede ver patrones de dise\u00f1o de materiales y pol\u00edmeros en acci\u00f3n con Topeka<\/a>, una divertida aplicaci\u00f3n de prueba.\n<\/p>\n \n Ahora, explorar\u00e9 los elementos de papel de Polymer y le mostrar\u00e9 la forma en que puede utilizar este nuevo paradigma de dise\u00f1o en sus proyectos web.\n<\/p>\n \n La gu\u00eda<\/a> de introducci\u00f3n de Polymer incluye un breve tutorial y un proyecto inicial para ayudarlo a familiarizarse con los conceptos clave de Polymer. En primer lugar, debe descargar el proyecto inicial<\/a> que contiene todas las dependencias y bibliotecas necesarias para trabajar con Polymer. Una vez que haya descargado el proyecto inicial, descompr\u00edmalo en alg\u00fan lugar de su disco local.\n<\/p>\n \n Antes de comenzar, necesitar\u00e1 un servidor HTTP r\u00e1pido en ejecuci\u00f3n. Si ya tiene Python instalado, ejecute cualquiera de los siguientes comandos en el nivel superior del proyecto de muestra.\n<\/p>\n \n Pit\u00f3n 2.x:\n<\/p>\n \n Pit\u00f3n 3.x:\n<\/p>\n \n Ahora, cargue la versi\u00f3n final del proyecto para probar el servidor web. Por ejemplo, si el servidor local est\u00e1 escuchando en el puerto 8000:\n<\/p>\n \n http:\/\/localhost:8000\/terminado\/<\/a>\n<\/p>\n \n Despu\u00e9s de eso, debe instalar elementos de papel utilizando cualquiera de las siguientes tres formas:\n<\/p>\n \n Zip<\/strong>: descargue<\/a> el archivo Zip y descompr\u00edmalo en la ra\u00edz de su proyecto.\n <\/p>\n<\/li>\n \n Bower<\/strong>: ejecute este comando anterior desde la ra\u00edz del proyecto:\n <\/p>\n \n Para obtener m\u00e1s informaci\u00f3n, realice la instalaci\u00f3n con Bower<\/a>.\n <\/p>\n<\/li>\n \n Github<\/strong>: ejecute este comando anterior desde la ra\u00edz del proyecto:\n <\/p>\n \n Una vez que tenga los elementos de papel en la ra\u00edz de su proyecto, importe el componente incluyendo el siguiente c\u00f3digo en su archivo HTML:\n<\/p>\n\n \n \n \n Debido a su naturaleza declarativa, los elementos de papel son tan f\u00e1ciles de usar como los componentes de otros marcos front-end. A continuaci\u00f3n, muestro la implementaci\u00f3n de algunos de los elementos de dise\u00f1o de materiales de la interfaz de usuario m\u00e1s utilizados.\n<\/p>\n \n Para crear un bot\u00f3n de men\u00fa simple que abra un men\u00fa desplegable al hacer clic, debe usar el siguiente c\u00f3digo:\n<\/p>\n \n \n \n Adem\u00e1s, el bot\u00f3n de acci\u00f3n flotante se puede redimensionar m\u00e1s peque\u00f1o aplicando la clase mini.\n<\/p>\n \n Puedes crear pesta\u00f1as usando el siguiente c\u00f3digo:\n<\/p>\n \n Es un campo de texto de una o varias l\u00edneas donde los usuarios pueden ingresar los valores requeridos. Este elemento de papel puede tener opcionalmente una etiqueta.\n<\/p>\n\n Acciones de \u00e9nfasis:
\n<\/h5>\n\n Cambio iniciado por el usuario:
\n<\/h5>\n\n Coreograf\u00eda de animaci\u00f3n:
\n<\/h5>\n\n Movimiento significativo:
\n<\/h5>\n\n Implementaci\u00f3n de Material Design para la Web con Polymer
\n<\/h3>\n\n Empezando:
\n<\/h5>\npython -m SimpleHTTPServer<\/code><\/pre>\npython -m http.server<\/code><\/pre>\n\n Instalar elementos de papel:
\n<\/h5>\n\n
bower install Polymer\/paper-elements<\/code><\/pre>\ngit clone https:\/\/github.com\/Polymer\/paper-elements.git components\/paper-elements<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
Uso de componentes de interfaz de usuario de materiales:<\/code>
\n<\/h5>\nAl igual que <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a> y <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>, la colecci\u00f3n de elementos de papel de Polymer est\u00e1 repleta de cuadros de di\u00e1logo, pesta\u00f1as y controles de formulario. A continuaci\u00f3n se muestra la lista de componentes est\u00e1ndar de la interfaz de usuario contenidos en los elementos de papel:<\/code>\n<\/p>\n\n
bot\u00f3n de papel<\/code>\n <\/li>\ncasilla de papel<\/code>\n <\/li>\npapel-di\u00e1logo-transici\u00f3n<\/code>\n <\/li>\ndi\u00e1logo de papel<\/code>\n <\/li>\nmen\u00fa-desplegable-de-papel<\/code>\n <\/li>\nf\u00e1brica de papel<\/code>\n <\/li>\npaper-focusable<\/code>\n <\/li>\nbot\u00f3n-icono-de-papel<\/code>\n <\/li>\nentrada de papel<\/code>\n <\/li>\nart\u00edculo de papel<\/code>\n <\/li>\nbot\u00f3n-men\u00fa-papel<\/code>\n <\/li>\npapel-progreso<\/code>\n <\/li>\nbot\u00f3n-de-radio-de-papel<\/code>\n <\/li>\ngrupo-radio-papel<\/code>\n <\/li>\nondulaci\u00f3n de papel<\/code>\n <\/li>\npapel-sombra<\/code>\n <\/li>\ndeslizador de papel<\/code>\n <\/li>\npapel-spinner<\/code>\n <\/li>\nficha de papel<\/code>\n <\/li>\npesta\u00f1as de papel<\/code>\n <\/li>\ntostadas de papel<\/code>\n <\/li>\nbot\u00f3n de cambio de papel<\/code>\n <\/li>\n<\/ul>\nLos iconos son otra parte crucial del dise\u00f1o de materiales. El elemento Polymer proporciona una serie de iconos que puede utilizar. Puede instalar <a href=\"https:\/\/www.polymer-project.org\/components\/core-icons\/demo.html\">\u00edconos principales<\/a> de la misma manera que instal\u00f3 elementos de papel.<\/code>\n<\/p>\n\n bot\u00f3n-men\u00fa-papel:
\n<\/h5>\n\n<\/code><\/pre>\nWeb Design<\/code>\n<\/div>\n\n<\/pre>\n
WordPress<\/code>\n<\/div>\n\n<\/pre>\n
JavaScript<\/code>\n<\/div>\n\n<\/pre>\n
HTML5<\/code>\n<\/div>\n\n<\/pre>\n
Responsive<\/code>\n<\/div>\n\n<\/pre>\n
La vista previa del bot\u00f3n de men\u00fa se ver\u00e1 as\u00ed:<\/code>\n<\/p>\n<a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" data-rel=\"lightbox\"><img class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" alt=\"\" \/><\/a><\/code><\/p>\n\n
f\u00e1brica de papel:<\/code>
\n<\/h5>\nEl es un bot\u00f3n de acci\u00f3n flotante que se usa para acciones promocionadas. Para crear un bot\u00f3n de acci\u00f3n flotante, debe usar el c\u00f3digo que se proporciona a continuaci\u00f3n:<\/code>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-63844012501f5.webp\")
<\/a><\/p>\n\n pesta\u00f1as de papel:
\n<\/h5>\n\n ITEM ONE\n ITEM TWO\n ITEM THREE\n<\/code><\/pre>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440158a793.webp\")
<\/a><\/p>\n\n entrada de papel:
\n<\/h5>\n\n<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440184876c.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384401bedf34.webp\")
<\/a><\/p>\n