Share
Fueron De Verdad Suerte de estar trabajando en una industria como la industria web. Hoy en día, tenemos muchos nuevos consejos, técnicas y formas de trabajar todo el tiempo. También tenemos mucha suerte de estar en una época en la que, a medida que se introducen estas nuevas tecnologías, nuestros navegadores pueden (en su mayor parte) ser muy rápidos para ponerse al día, por lo que podemos incluir estas nuevas tecnologías en nuestros diseños ( y jadea, incluso en el trabajo del cliente!) más que nunca.
CSS3 es una de esas (grandes) nuevas tecnologías. Junto con esto, han surgido una gran cantidad de cosas que hacen nuestra vida más fácil como diseñadores y desarrolladores. A medida que nuestros navegadores están mejorando, podemos ser más aventureros con nuestras ideas y diseños que creamos..
Sin embargo, también estamos en una época en la que estamos diseñando para más usuarios, dispositivos, navegadores y tecnologías que nunca antes. Antes de la edad del teléfono inteligente, la tableta y la nevera conectada a Internet, en realidad solo había una forma de acceder a Internet; a través de una computadora normal. Y la resolución de pantalla más común durante un tiempo fue de 640px x 480px, o 800px x 600px!
Hoy en día, tenemos miles de dispositivos, tamaños de pantalla y contextos diferentes que debemos atender. Si solo nos fijamos en las pantallas y tamaños de pantalla que tenemos que atender, tenemos miles de dispositivos móviles (teléfonos móviles, teléfonos inteligentes, tabletas, netbooks, etc.), pantallas Retina, pantallas estándar, pantallas de alta definición, pantallas pequeñas y grandes, y asi que, asi que mucho más.
Si bien puede ser realmente difícil, la cantidad de cosas que tenemos que atender solo va a ser cada vez más grande, por lo que es algo que tenemos que adaptarnos y aprender de.
¿Y qué significa esto para nuestro proceso? Es una tarea imposible probar su sitio web en todos los dispositivos creados para que su sitio pueda verse. En cambio, tenemos que cambiar efectivamente nuestro proceso para mejorar. Estoy seguro de que, como desarrollador, has tenido que hacer esto tú mismo, y es lo mismo que un diseñador..
Es posible que tengamos que tomar medidas adicionales para mejorar nuestro proceso de diseño para mejorar. Un ejemplo de esto es sentirse más cómodo al iterar ideas de diseño para tipografía (por ejemplo) en el navegador, más rápido. Sea lo que sea, puedo garantizar que es posible que su proceso deba ajustarse ligeramente.
Aunque parece que CSS3 es una cosa más reciente, con la adopción de muchas de las técnicas populares de CSS3 que se están utilizando en los últimos años, los primeros borradores de CSS3 fueron en 1999; hace catorce años!
A diferencia de las especificaciones CSS anteriores (como CSS2), CSS3 se dividió en varios módulos, y a mediados de 2012 había más de cincuenta Módulos publicados. Cuatro de estos en particular se han publicado como recomendaciones, donde el módulo se ha sometido a una gran cantidad de revisiones y pruebas antes de ser recomendado para su uso completo. Los cuatro módulos CSS3 recomendados por el W3C hasta ahora son:
Otros módulos, como "Fondo y bordes", "Diseño de varias columnas", "Diseño de caja flexible" se encuentran actualmente en el nivel de "Recomendación del candidato", donde el W3C está satisfecho con las características significativas de ese módulo.
En este nivel, se piensa que las implementaciones (por ejemplo, por los navegadores) deberían eliminar los prefijos del navegador que tienen en su lugar. Otros módulos que se están analizando incluyen "Animaciones CSS", "Transformaciones CSS" y "Efectos de filtro CSS", pero todos están en estado "Borrador de trabajo" (¡como muchos otros módulos!) Y, por lo tanto, no son tan listos como aquellos con el estado CR.
Sin embargo, junto con los cuatro módulos principales recomendados del W3C, existen muchas técnicas populares de CSS3 que vemos a menudo en nuestros sitios web hoy en día. Éstos incluyen:
Veamos cada uno de estos con un poco más de detalle..
La introducción de Gradientes CSS ha significado que en lugar de usar un fondo de imagen para crear una apariencia particular en un sitio web, para los navegadores modernos puede usar CSS3 en lugar de.
Esto es excelente, ya que ahorra peso en la página y también garantiza que mantendrá el rendimiento al mínimo al no solicitar tantas imágenes..
El radio del borde significa que ahora podemos incluir esquinas redondeadas para los navegadores modernos en nuestros diseños sin tener que recurrir al uso de imágenes para cada uno. E imagínese si tuviera una imagen de fondo que tuviera un borde, una esquina redondeada, un degradado y una sombra: ese tipo de cosas eran una pesadilla en el pasado, mientras que ahora son más fáciles de implementar para los navegadores que las admiten.
Si tiene suerte, obtendrá clientes que también entienden sobre la mejora progresiva, y si no, puede explicárselo y educarlos. En el mundo actual, donde muchas personas poseen teléfonos inteligentes, tabletas y computadoras (o una combinación de eso y más), las personas deben esperar y comprender que no todos los sitios web están diseñados para funcionar de la misma forma en todos los dispositivos o pantallas en los que los ven. Hasta cierto punto, comprenderán que ciertos visuales estéticos se degradan con gracia para otros navegadores. Esquinas redondeadas siendo una de ellas.!
Con la introducción de la sombra del cuadro CSS3, ahora podemos tener sombras para nuestros elementos de cuadro. También hay una versión de texto que podemos usar (text-shadow, si no puedes adivinar) para nuestro contenido también.
También tiene la opción de tener un gradiente de conjunto estándar o de inserción, lo que significa que podemos, sí, lo adivinaron, abandonar el uso de imágenes para estos estilos una vez más.
CSS3 también nos introdujo para poder hacer referencia a varias imágenes de fondo en nuestro código. Esto es genial, ya que significa que podemos divertirnos más con los elementos de fondo de capas uno encima del otro para crear efectos extravagantes que, de lo contrario, nos hubiera costado recrear en CSS o solo con una imagen de fondo.
Finalmente, desde IE9 hacia arriba y con todos los demás navegadores modernos, ya no tenemos que crear una imagen de fondo transparente, repetible y pequeña.!
Esto solo fue suficiente para hacerme amar con CSS3, y simplemente significa que podemos ser libres de usar la transparencia en nuestros diseños donde creemos que es apropiado.
Las animaciones y transformaciones son geniales; Junto con las transiciones, nos ayudan a agregar mucha más interactividad a nuestros sitios web. Si bien estos pueden ser difíciles de mostrar en nuestros diseños, es definitivamente una forma en que podemos usar CSS3 para nuestra ventaja y dar vida a los sitios web..
La inclusión de la regla @ font-face para CSS3 fue brillante para los diseñadores, ya que significaba que podemos ser un poco más experimentales en la tipografía que utilizamos en nuestros diseños. En esencia, el uso de fuentes web ha permitido a los diseñadores mucha más libertad para expresar creatividad a través de su trabajo..
Las fuentes web son excelentes, ya que nos ofrecen una nueva forma de crear sitios web visualmente impresionantes. Existe una variedad tan amplia de opciones para las fuentes que ahora podemos usar en nuestros sitios web, si no en cientos, definitivamente en miles.
No todos serán geniales, y definitivamente hay algunos preferidos por muchos, pero hay tantas gemas que puedes encontrar para usar en tus diseños que se ven bastante bien en comparación con algunas de las fuentes más antiguas y seguras para la web..
Las fuentes web también nos ofrecen una forma más segura de trabajar de manera responsable con nuestros diseños sensibles. ¿Recuerda el día en que se crearon encabezados “sofisticados” con fuentes alternativas (que no se consideraron seguras para la web) y se colocaron como imágenes o fondos de imágenes? Las fuentes web significan que podemos abandonar esa práctica de forma segura y dejarla atrás, sabiendo que tendremos sitios web hermosos con fuentes totalmente accesibles y escalables..
Con la introducción de las fuentes web y @ font-face, surgieron algunos servicios que nos ayudan a implementar las fuentes web en nuestros sitios web. Esos servicios incluyen:
E incluso con tan pocos servicios, hay muchas formas de implementarlos en su proceso de desarrollo. Algunos usan JavaScript y otros usan CSS puro para cargar las fuentes. Pero, ¿qué pasa con el flujo de trabajo de los diseñadores? ¿Cómo puedo trabajar con web las fuentes funcionan en maquetas estáticas?
Realmente es un poco complicado, ya que no hay muchas maneras de integrar las fuentes web que usas con el software de gráficos que podrías usar. Typekit ha anunciado recientemente planes para integrar una sincronización de escritorio con Adobe Creative Cloud, y comenzó a implementarlo para seleccionar usuarios.
Debido a que Typekit fue adquirido por Adobe, ahora tienen esta forma de estar perfectamente sincronizados con Photoshop e Illustrator y todos los demás productos de Adobe, lo que es una gran noticia para los diseñadores..
Aparte de eso, no hay otra manera en que podamos integrar fácilmente las fuentes web que elegimos usar en nuestras maquetas, a menos que lo hagamos comprando la versión estándar, "de escritorio" de la fuente por separado a la fuente web. Si no está buscando la marca en busca de un sitio web, esto puede comenzar a ser un poco costoso e incómodo de administrar..
Otra opción que tienes cuando trabajas con tipografía es saltar al navegador bastante rápido; ya sea trabajando con un servicio como Typecast, como se explica en las secciones anteriores de Tipografía de esta serie, o comprando las fuentes web en su servicio preferido y observando cómo reaccionan con su contenido en una versión prototípica de su diseño.
Independientemente de que decida trabajar con fuentes web en su diseño, puede estar seguro de que tendrá un resultado final más creativo y de mejor aspecto para que sus usuarios disfruten y de lo que pueda estar orgulloso..
Los iconos son una gran cosa en este momento; Algo bueno que está sucediendo en el mundo de las “tendencias”. Creo que los íconos y las imágenes visuales que pueden incluirse, por ejemplo, un logotipo, son una excelente herramienta para ayudar a guiar a los usuarios en un sitio web. Usados junto con el texto, pueden ser una gran ayuda visual..
Sin embargo, en un mundo en el que debemos asegurarnos de que las imágenes y los diseños funcionen bien en tantos dispositivos y tamaños de pantalla, debemos asegurarnos de que nuestros íconos e imágenes funcionen bien en todos los ámbitos y estén más preparados para el futuro. Afortunadamente, hay un par de opciones disponibles para nosotros que nos pueden ayudar a asegurarnos de hacerlo..
La encantadora PNG (que nos ofreció una forma de incluir un fondo transparente en una imagen, que no era un GIF dudoso) es una forma segura de trabajar con los íconos en sus sitios web.
Pero no lo olvides; Si desea ofrecer imágenes de aspecto atractivo a un público de Retina, necesitará algún tipo de copia de seguridad de CSS o JavaScript para asegurarse de hacerlo..
Trabajar con PNG a menudo tampoco debería cambiar nada en su flujo de trabajo. Simplemente puede guardar cualquier imagen que haya creado en el tamaño requerido y guardar directamente desde Photoshop.
Los PNG también funcionan bien para escalar, siempre que se reduzca. Si tiene que escalar una imagen (lo que a veces sucede cuando pasa de una ventana de visualización más grande a una ventana de visualización más pequeña), el PNG a menudo tendrá un aspecto pixellado y borroso, algo que obviamente deseará evitar..
El último punto sobre PNG nos lleva rápidamente a la opción SVG que tenemos para nuestros iconos. Siempre que tenga una imagen basada en vectores (creada en Adobe Illustrator, por ejemplo) y no en ráster, como sería en Adobe Photoshop por ejemplo, puede guardar esta imagen como SVG.
Como desarrollador, es probable que entiendas sobre SVG y las diferentes formas en que puedes implementarlas en tu sitio web. Si no lo haces, SVG es una forma de implementar un escalable Gráfico en los diseños de su sitio web. De esa manera, no tiene que preocuparse por el giro del gráfico pixelado o borroso al cambiar el tamaño o la escala, sino que se extenderá perfectamente al tamaño requerido que necesita.
Esto funciona muy bien para logotipos, íconos, básicamente cualquier cosa que pueda necesitar una escala que ya tenga en un formato vectorial o que pueda recrear fácilmente en ese formato, si es necesario. Al diseñar y guardar sus imágenes SVG, siempre recomendaría que trabaje al tamaño óptimo que necesita la mayor parte del tiempo; de esa manera, su navegador solo tiene que hacer un trabajo para cambiar el tamaño y escalar el logotipo en circunstancias particulares y no todo el tiempo.
Como ya sabemos, las fuentes web son infinitamente escalables y pueden funcionar perfectamente en nuestros sitios web en los navegadores actuales. Algunas personas muy inteligentes han podido combinar ambas fuentes web y Iconos para hacer fuentes web de iconos o símbolos. Al igual que Wingdings, a menudo tienen más significado y contexto cuando se usan que un simple ícono.
Hay argumentos a favor y en contra de las fuentes web como iconos: algunos dicen que cargar una fuente completa para usar solo algunas de las ligaduras no es sensato, ya que agregará mucho peso a la página e influirá en el rendimiento..
Si bien esto puede ser difícil de evitar con las fuentes web de símbolos comerciales que ha comprado, hay son herramientas para crear sus propias fuentes web, donde puede evitar esto y solo crear una fuente con los iconos que necesita. Algunos también dicen que puede perder parte del contexto con las fuentes web, ya que a veces solo usan una letra para mostrar el icono. Sin embargo, algunas personas inteligentes como la gente de Symbolset usan palabras clave para las fuentes, que ayudan a agregar al menos un poco más de contexto al icono que tiene..
Y ahí tienes tres opciones para usar íconos en tus diseños; La elección es ahora tuya para hacer! La mayoría de las opciones se agregarán levemente a su flujo de trabajo de diseño de una forma u otra, pero depende de usted ver qué proceso puede encajar mejor en su flujo de trabajo.
Accentsconagua