A finales de la década de 1970, Dieter Rams estaba cada vez más preocupado por el estado del mundo que lo rodeaba: “Una confusión impenetrable de formas, colores y ruidos”. Consciente de que era un importante contribuyente a ese mundo, se hizo una pregunta importante: ¿Es mi diseño un buen diseño? Su respuesta se expresa en sus diez principios para un buen diseño.

Aunque los principios de Dieter Rams se aplicaron principalmente a productos físicos, se pueden aplicar a la creación de cualquier producto, incluso digitales. Se pueden adaptar a los procesos de diseño específicos para Web, UX, etc. La interpretación de estos principios puede tener un impacto positivo, tanto en la percepción de diseño de producto como en la visión de trabajo como diseñador.

1. Un buen diseño es innovador.

Las posibilidades de innovar no están agotadas. El desarrollo tecnológico siempre está ofreciendo nuevas oportunidades para el diseño innovador. Pero este tipo de diseño siempre se desarrolla junto con la tecnología innovadora, nunca debe ser un fin en sí mismo.

TP 1 radio/phono combination, 1959, by Dieter Rams for Braun

2. Un buen diseño hace que un producto sea útil.

Un producto se compra para ser utilizado. Debe satisfacer ciertos criterios, no solo funcionales, sino también psicológicos y estéticos. Un buen diseño enfatiza la utilidad del producto al mismo tiempo que ignora cualquier cosa que pueda restarle valor.

MPZ 21 multipress citrus juicer, 1972, by Dieter Rams and Jürgen Greubel for Braun

3. Un buen diseño es estético.

La calidad estética de un producto es integral a su utilidad, porque los productos que utilizamos todos los días afectan nuestra persona y nuestro bienestar. Pero solo los objetos bien ejecutados pueden ser hermosos.

RT 20 tischsuper radio, 1961, by Dieter Rams for Braun

4. Un buen diseño hace que un producto sea comprensible.

Aclara la estructura de un producto. Mejor aún, puede hacer hablar al producto. En el mejor de los casos, se explica por sí mismo.

T 1000 world receiver, 1963, by Dieter Rams for Braun

5. Un buen diseño es discreto.

Los productos que cumplen un propósito son como herramientas. No son objetos decorativos ni obras de arte. Por lo tanto, su diseño debe ser neutral y restringido, para dejar espacio para la autoexpresión del usuario.

Cylindric T 2 lighter, 1968, by Dieter Rams for Braun

6. Un buen diseño es honesto.

No hace que un producto sea más innovador, poderoso o valioso de lo que realmente es. No intenta manipular al consumidor con promesas que no se pueden cumplir.

L 450 flat loudspeaker, TG 60 reel-to-reel tape recorder and TS 45 control unit, 1962-64, by Dieter Rams for Braun

7. Un buen diseño es de larga duración.

Evita estar a la moda y por lo tanto nunca aparece anticuado. A diferencia del diseño de moda, dura muchos años, incluso en la sociedad de hoy que usa y tira.

620 Chair Programme, 1962, by Dieter Rams for Vitsœ

8. Un buen diseño es minucioso hasta el último detalle.

Nada debe ser arbitrario o al azar. El cuidado y la precisión en el proceso de diseño muestran respeto hacia el usuario.

ET 66 calculator, 1987, by Dietrich Lubs for Braun

9. El buen diseño es respetuoso del medio ambiente.

El diseño hace una contribución importante a la preservación del medio ambiente. Conserva los recursos y minimiza la contaminación física y visual a lo largo del ciclo de vida del producto.

606 Universal Shelving System, 1960, by Dieter Rams for Vitsœ

10. El buen diseño es sencillo.

Menos, pero mejor; porque se concentra en los aspectos esenciales, y los productos no están cargados de elementos no esenciales. De vuelta a la pureza, de vuelta a la sencillez.

L 2 speaker, 1958, by Dieter Rams for Braun

Estos principios ayudan al diseñador a resolver problemas, crear mejor productos e inspirarse.

Estos principios están basados en la entrada original de VITSOE bajo licencia Creative Commons CC-BY-NC-ND 4.0.

El 2018 comenzó con el descubrimiento de serias vulnerabilidades en seguridad en hardware, una revelación que afectó la confianza que la industria tenía en el fundamento de la computación moderna: microprocesadores. Esto fue una señal de lo que vendría en el panorama de seguridad.

Los supuestos o indicadores tradicionales sobre qué, dónde y cómo los riesgos de seguridad afectan una red nunca han sido tan poco confiables como se ha visto en desarrollos recientes:

• El método de pago rápido ransomware cambió al minado de criptomonedas, que es más lento y sutil, pero más dañino.
• Surgió el malware Fileless (sin archivo) entre otros.
• Aumentaron las pérdidas financieras por estafas aparentemente simples de Buisness Email Compromise (BEC).
• Ataque de enrutador han progresado más allá de los Distributed Denial of Service (DDoS).

Los puntos de entrada habituales de estas amenazas — correo, vulnerabilidades, sitios web maliciosos — ya son conocidos. Sin embargo se siguen usando con repercusiones directas y posteriores.

Este informe de medio año sigue la tendencia de los riesgos de seguridad que surgen de aspectos de informática que a menudo pasan desapercibidos y muestran lo costosos que pueden llegar a ser, especialmente para las empresas.

• Solucionar las vulnerabilidades de hardware es un desafío para los administradores porque afectan microprocesadores de múltiples proveedores. En este sentido, mantener operativas las redes es un reto porque las correcciones se publican durante un periodo prolongado.
• Los avisos de vulnerabilidad de Supervisory Control and Data Acquisition (SCADA) aumentaron en un 30%, afectando a empresas como: plantas de energía, instalaciones de agua, bancos, hospitales, compañías de transporte, mercado en línea, servicios de computación en la nube y los motores de búsqueda.
• Se ha detectado que el minado de criptomonedas aumentó a más del doble; también un número significativo de nuevas familias de malware demuestran que los ciberdelincuentes continúan muy interesados en obtener ganancias a través de monedas digitales. Lo anterior afecta este sistema porque desacelera su rendimiento, lo desgasta gradualmente y consume energía.
• El ransomware está disminuyendo en volumen. Sin embargo sigue adaptándose a las mejoras de los métodos de prevención y mitigación.
• Mega violaciones de, al menos, un millón de datos aumentan a pesar de la penalización de una de las leyes de protección de datos más exigentes y extensas en el mundo, General Data Protection Regulation (GDPR) de EU.
• La seguridad del enrutador sigue siendo débil, aún después de la alerta Mirai (responsable por los ataques Distributed Denial of Service (DDoS) desde octubre del 2016).
• Los cibercriminales están ajustando constantemente sus métodos para evadir las defensas que tienen solo un tipo de protección, a través de malware atípicos como: Fileless (sin archivos), archivos pequeños o el que utiliza macros.
• Las pérdidas por Buisiness Email Compromise (BEC) superan lo esperado. Los intentos de estafa incrementa constantemente, porque dependen más en la inteligencia de código abierto y la ingeniería social, que en la experiencia técnica de alto nivel.

Las características que tienen en común estas amenazas de ciberseguridad es que son sigilosas y sutiles. Los daños que ocasionan obligan que los recursos de seguridad, ya limitados, se dividan y se pierde el enfoque de los administradores de TI. En resumen, más allá de la mitad de 2018, las empresas deben revisar qué ha cambiado en el panorama de seguridad y es necesario que entiendan que la forma tradicional de asegurar las redes ya no es suficiente.

Se puede descargar el reporte completo en el siguiente enlace: Resumen de Seguridad de la Primera Mitad del 2018 “Amenazas invisibles, pérdidas inminentes” de de Trend Micro Incorporated.

Ahora puedes crear documentos nuevos desde Photoshop a partir de plantillas disponibles en Adobe Stock, también puedes realizar una búsqueda a partir de una selección flotante en un documento que te lleva a imágenes similares.

Incluso si estás en Premiere y olvidaste hacer una toma de unos molinos en Dinamarca, puedes buscar desde el Media Browser y te muestra los videos disponibles.

Lo interesante es el proceso de integración que tiene Adobe Stock con todas las aplicaciones de Creative Cloud, que a diferencia de cualquier otro sitio te permite jugar con el material dentro de una composición de Photoshop, una ilustración en Illustrator o un video en Premiere, y si te gusta el resultado, licenciar (comprar) el material.

Al inicio del evento presentaron Sensei, el motor de inteligencia artificial que estará detrás de todos los productos de Adobe para aprender de los usuarios y sus flujos de trabajo, esto para ofrecer futuras mejoras a partir del análisis de información de miles de usuarios.

Otro de los anuncios relevantes fue Typekit Marketplace, que es una extensión de Typekit donde además del modelo de suscripción también se pueden adquirir fuentes de manera independiente.

Experience Design

Es una aplicación vectorial para construir aplicaciones móviles con base en la experiencia de usuario (UX).

Entre las nuevas opciones de Experience Design CC, esta la de crear símbolos, trabajo simultáneo de dos o más colaboradores en el mismo documento, integración con CC Libraries, duplicar elementos interactivos a partir de grids y lo más destacado: la previsualización directamente de tu mock-up en un dispositivo móvil independientemente de su sistema operativo, iOS o Android.

Novedades de Video

En la parte de video, Jason Levine (@Beatlejase) presentó avances dentro de las correcciones secundarias de color, además otra mejora con la integración de Cinema4D en After Effects, ahora puedes extruir vectores sin tener que salir de la aplicación y puedes tener la vista previa de tu composición de Ae en Premiere.

También puedes tener plantillas de animaciones creadas en After Effects y editar directamente el texto desde Premiere Pro, con algunas mejoras a dicha previa funcionalidad.

Para reforzar la presentación de Character Animator aplicación que permite darle vida a personajes utilizando tu propio arte, mostraron su potencial presentando a Bart (con su actriz de doblaje en escena) para la demo en vivo. Si quieren aprender sobre esta tecnología aquí hay un buen tutorial de Character Animator.

Project Felix & Project Nimbus

Adobe sigue dando pasos en el mundo del 3D y ahora presentan Project Felix, que es una aplicación que te permite hacer composiciones tridimensionales con objetos predeterminados y la posibilidad de adquirir modelos 3D en Adobe Stock. Tiene botones útiles para adaptar tu cámara 3D a la perspectiva de un fondo personalizado. Otra de las características interesantes de Project Felix, son los materiales que pueden reflejar la imagen que pongas de fondo.

En cuanto a Project Nimbus (que está en una etapa más temprana) se enfoca en la integración de aplicaciones de fotografía como Lightroom en su versión móvil con aplicaciones de escritorio y documentos en la nube.

Comentarios Finales

Más allá de todas las mejoras en las aplicaciones de Creative Cloud para 2017 y los avances en cuanto a su orientación al mercado de creación rápida de contenidos mediante el uso de las bibliotecas disponibles en Adobe Stock, también se mostraron durante el show algunos de los nuevos productos de Apple donde previamente Adobe tuvo una participación durante a presentación de las nuevas Mac Book Pro con características interesantes de Photoshop en la nueva TouchBar de los equipos portatiles.

De igual forma también Windows Surface tuvo una presencia importante durante varias demostraciones.

Además del blog de Activ, también puedes encontrar tutoriales y tips de Juan de Dios León en su sitio JDMX.

¿Qué es User Experience?

UX es básicamente la experiencia que el usuario tiene al momento de utilizar nuestro sistema, el cómo se siente al interactuar con él, ya sea que nuestro sistema sea una página web, una aplicación móvil o de escritorio. En el momento que el usuario empieza a utilizar nuestro producto, una serie de expectativas se van formando con respecto a él, por lo que debemos de responder de modo acorde a ellas, ya que si traicionamos las expectativas que se tienen, se genera una mala experiencia en el usuario, la cuál termina afectando la credibilidad de nuestros productos. Al respecto de la experiencia de usuario, Don Norman (creador del término) y Jakob Nielsen (padre de la usabilidad) nos dicen:

“El primer requerimiento para una experiencia de usuario ejemplar es cumplir las necesidades exactas del usuario, sin que haya líos ni problemas. La verdadera experiencia de usuario va más allá de darle a los usuarios lo que dicen que quieren, o hacer un checklist de funcionalidades. Para poder lograr una experiencia de usuario de alta calidad debe haber en el ofrecimiento de la compañía una mezcla de los servicios de múltiples disciplinas.”

La experiencia de usuario está muy centrada en los aspectos visuales, por lo que es muy común el que la relacionen y confundan con otras dos áreas: la usabilidad y la interfaz de usuario gráfica. Aún cuando ambas son elementos muy importantes para lograr una gran experiencia de usuario y están fuertemente relacionados, son cuestiones distintas. La usabilidad se centra en la facilidad que el usuario tiene para poder hacer uso de un sistema, mientras que la interfaz de usuario gráfica posibilita una interacción más amigable con el sistema en cuestión al hacer uso de un lenguaje visual para traducir instrucciones entre el usuario y la computadora.

La principal diferencia es que la experiencia de usuario engloba a los dos anteriores, ya que trata sobre el sentir general que tiene el usuario al utilizar un sistema, por lo que implica no sólo a estas dos disciplinas, sino otros factores más que conforman lo que Peter Morville denominó como el Panal de la Experiencia de Usuario.

Las Facetas de la Experiencia de Usuario

Usando como base el panal de la experiencia de usuario, vemos que los sistemas y aplicaciones deben de considerar las siguientes facetas:

• Debe ser Útil – Siempre debemos preguntarnos, ¿lo que estamos haciendo es algo útil? Como diseñadores, debemos usar nuestro conocimiento y creatividad para encontrar soluciones innovadoras que sean de utilidad para el usuario.
• Fácil de Usar – Una de las verdades más verdaderas de la vida es que mientras más fácil de usar sea algo, más lo vamos a usar. Ejemplos como Apple, cuya principal característica en sus productos es la facilidad de uso, donde cualquier persona puede tomar alguno de sus productos y en minutos usarlo.
• Objeto de Deseo – Comúnmente las personas siempre buscamos que las cosas que usamos tengan altos valores estéticos, ya que las cosas que consideramos bellas cautivan nuestros sentidos y hacen que tengamos una mayor apreciación hacia ellas.
• Fácil de Encontrar – Debemos buscar que cada producto que hagamos facilite al usuario encontrarse dentro del espacio digital, por lo que una navegación consistente hace que las personas no se pierdan y ubiquen fácilmente aquello que necesitan de nuestra aplicación o sistema.
• Accesible – La accesibilidad hoy día es algo esencial, cuando hablamos de accesibilidad nos referimos a la capacidad que tienen las personas de utilizar un sistema independientemente del agente de uso que manejen.
• Debe Generar Credibilidad – La credibilidad es importante porque genera confianza en el usuario, lo que ocasiona que se use con más frecuencia. Ya hay diversos estudios que nos están empezando a mostrar qué elementos de diseño son los que influyen en si los usuarios creen o no en lo que nosotros les decimos.
• Debe Generar Valor – Nuestros sistemas deben darle algo de valor tanto al usuario como a las personas que están detrás del sistema. Por ejemplo, un sitio de cines debe poder dar los horarios que el usuario necesita. Para el cine, el valor está en que le genera más negocio.

Consideraciones Finales

Anteriormente, cuando apenas se empezaban a generar los sistemas, las personas no ponían tanto énfasis en las interacciones que los usuarios tenían con los sistemas, ya que el simple hecho de que funcionaran aseguraba que el trabajo de las personas disminuye de modo considerable. Hoy en día no es el caso, ya que con el paso del tiempo los sistemas empezaron a proliferar, por lo que una parte importante de su correcto funcionamiento es que se sientan bien al usarlos, por lo que los principios expuestos anteriormente cobran gran importancia.

Es responsabilidad de las personas encargadas de diseñar el considerar no sólo el aspecto gráfico de las interfaces, sino todos los aspectos que conllevan la experiencia del usuario para así poder generar mejores experiencias para los usuarios, llenando sus expectativas creando confianza mutua, y así ayudar a unir a los usuarios con las empresas o instituciones que se encargan de realizar sistemas.

Para aprender más del tema de Experiencia de Usuario de forma práctica los invitamos a asistir al Curso de Lean UX el próximo 3 de Septiembre en Activ.

Tabla de ingredientes

Para este tutorial vamos a necesitar lo siguiente:

• Generosa pieza de HTML: Necesario para crear la estructura donde vivirá nuestro Preloader.
• Porciones abundantes de CSS: Con las cuales vamos a crear el diseño y las animaciones.
• Una pizca de JavaScript: nos ayudara a que funcione correctamente nuestro Preloader.
• IDE de tu elección: Ya sea Dreamweaver, Sublime, Notepad++, la elección es tuya.
• Una sonrisa: Porque siempre es bueno trabajar alegre y con mood positivo.

Por el momento son todos los ingredientes, pero puedes agregar de manera opcional algo de música y tu bebida favorita, el chiste es disfrutar lo que estamos haciendo, una vez listos los ingredientes, manos a la obra.

Comenzamos con la estructura del sitio:

Vamos a comenzar creando nuestro HTML, vamos a agregarle un par de imágenes y texto para tener algo de contenido, para poder mostrar la precarga, vamos a comenzar:

Vamos a crear nuestro header, y un poco de imágenes para que haya algo de contenido, nuestro HTML debe de lucir de la siguiente manera:

El código es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial Preloader</title>
</head>
<body>
    <header>
        <img src="img/logotipoActivRgb.jpg" alt="">
        <h1>Un preloader para Gobernar al mundo</h1>
    </header>

    <div>
        <div>
            <img src="img/fondoPaisaje.jpg" alt="Paisaje de fondo">
        </div>
        <div> 
            <h2>Perfecto para usarse en "One Page Sites"</h2>
            <p>Tambien cuando es abundante la carga de información que hay dentro de nuestro sitio, contamos con muchas interacciones o con abundantes imágenes</p>
        </div>
        <div>
            <img src="img/fondocielo.jpg" alt="Paisaje de fondo">
        </div>
    </div>
    <footer>
        <p></p>
    </footer>
</body>
</html>

Al crear un sitio web es importante comenzar con la estructura, por eso comenzamos creando el HTML, después nos encargaremos del diseño utilizando nuestras hojas de estilo en cascada, en este punto luce algo triste nuestro HTML, pero eso lo vamos a arreglar en un santiamén.

Primero vamos a dar estilos a nuestro header, vamos a asignarle un color de fondo con transparencia, vamos a acomodar nuestro logo y nuestro tagline:

header{
    width:                          100%;
    height:                         80px;
    background-color:                   rgba(255, 255, 255, .9);
    position:                       fixed;
    top:                            0;
    left:                           0;
}

header img{
    width:                          150px;
    float:                          left;
    margin:                         10px 20px;
}

header h1{
    padding:                        27px 0 0 0;
    color:                          #333333;
    font-size:                      1.7em;
}

Vamos a agregar un par de estilos complementarios para dar vida a nuestro diseño, también dar un color de fondo, y por último vamos a crear un contenedor para nuestras imágenes, esto lo hacemos de la siguiente manera:

h1, h2, h3, h4, h5, p{
    margin:                             0;
    padding:                            0;
    font-family:                            helvetica, arial, sans-serif;
}

h1, h2, h3, h4, h5{
    text-transform:                             uppercase;
}

img{
    max-width:                          100%
}

.body{
    margin:                             0;
    padding:                            0;
}

.centrado{
    text-align:                             center;
}

.wrapper{
    width:                              100%;
    background-color:                       #3e505b;
}

.wrapper960{
    width:                              960px;
    margin:                             0 auto;
}

.azul{
    background-color:                       #61737f;
    padding:                            40px 0;
}

.azul p, .azul h2{
    color:                              #fff;
    padding:                            10px 20px;
    width:                              920px;
    margin:                             0 auto;
}

Ahora nuestro diseño luce así, ¿mucho mejor no?

Adicional, vamos a agregar un par de contenedores para nuestro preloader, los vamos a crear justo a bajo de nuestra etiqueta <body> vamos a crear un div que nos sirva de contenedor para el preloader, y otro div que será nuestro preloader como tal, esto va a quedar de la siguiente manera:

<div id=”loader-wrapper”>
     <div id=”loader”></div>
</div>

Listo, el escenario para nuestro Preloader está terminado, buen trabajo muchachón, date una palmada en la espalda, ve por una coca o tu bebida favorita y continuemos…

Crear animación de preloader utilizando únicamente CSS

Continuemos con nuestro preloader, vamos a crearlo utilizando únicamente estilos, vamos a crear lo siguiente:

• Una pantalla que cubra la página mientras ésta se está cargando.
• Elementos gráficos del preloader.
• Animación para el preloader.

Antes de comenzar, vamos a explicar un poco como es que funciona este preloader, básicamente lo que vamos a hacer es colocar sobre nuestra página web un fondo que nos va a servir como telón, este es el que impedirá que se vea como se arma a pedazos nuestro sitio web, sobre este telón vamos a tener corriendo nuestra animación.

Si nosotros viéramos únicamente este telón, la percepción que comúnmente se tiene es que la página no está cargando, o ha dejado de funcionar, es por esto que agregamos un elemento animado, de esta manera nosotros tenemos la sensación de que algo está pasando, y ¡así es! Ya que nuestra página se está cargando. Cuando nuestra página haya terminado de cargar, por medio de un sencillo pero poderoso combo de JavaScript con CSS, nos encargaremos de desaparecer el telón junto con el Preloader, para dar paso a nuestra página web completamente cargada.

Ahora sí, comencemos…

Teniendo nuestra lista, vamos a comenzar en orden, comencemos utilizando el div con id loader-wrapper que creamos en nuestro HTML, éste nos servirá como pantalla que se encargará de cubrir nuestro HTML hasta que este esté cargado, será el telón que evitará que se vea el montaje de nuestra obra, para esto, en nuestro archivo css vamos a crear los siguientes estilos:

#loader-wrapper{
    position:                     fixed;
    top:                          0;
    left:                         0;
    width:                        100%;
    height:                       100%;
    z-index:                      100
}

Lo que hicimos fue darle un tamaño de ancho y alto de 100% y una posición fija, le damos un z-index muy alto para que este contenedor este por encima de todos nuestros elementos.

El elemento preloader

Ahora vamos a crear nuestro elemento de preloader que vivirá sobre nuestro telón, para esto vamos a utilizar el div con id loader que creamos en nuestro HTML, y vamos a utilizar los siguientes estilos.

#loader{
    display:                 block;
    position:                relative;
    left:                    50%;
    top:                     50%;
    width:                   100px;
    height:                  100px;
    margin:                  -50px 0 0 -50px;
    border:                  solid #556270 3px;
    z-index:                 150;
}

Con esto le decimos a nuestro div #loader que tenga una posición relativa y la colocamos justo a la mitad de la página (left 50%, top 50%), y lo centramos utilizando márgenes negativos, como nuestro div es un cuadrado que mide 100px , necesitamos un margen negativo de la mitad de su tamaño en top y en left, en este caso son 50px top y 50px left, creamos un borde azul oscuro solido de 3 pixeles alrededor del cuadrado y por ultimo vamos a dar un z-index mayor al de nuestro telón, para poder posicionar nuestro preloader sobre él.

Utilizando pseudo-elementos de CSS para ampliar nuestro preloader

Vamos a crear dos bordes extra además de nuestro cuadrado, dentro de nuestro borde azul, para esto vamos a utilizar nuestros siempre confiables pseudo-elementos de CSS.

Recordemos que los pseudo-elementos de CSS nos sirven para poder dar estilos a partes específicas de nuestro elemento, con ellos podemos agregar contenido antes y después de nuestro elemento, si quieres aprender a fondo css3, te recomendamos nuestro diplomado de Front-End.

En nuestro caso, vamos a agregar dos cuadrados más, para esto vamos a utilizar nuestros pseudo-elementos ::before y ::after, vamos a crear los siguientes estilos:

#loader:before {
    content:                            "";
    position:                           absolute;
    top:                            5px;
    left:                           5px;
    right:                          5px;
    bottom:                             5px;
    border:                             4px solid #4ECDC4;
}

#loader:after {
    content:                            "";
    position:                           absolute;
    top:                            15px;
    left:                           15px;
    right:                          15px;
    bottom:                             15px;
    border:                             2px solid #C7F464;
}

Con esto agregamos un cuadrado cyan y uno verde dentro de nuestro cuadrado azul, con esto terminamos de armar nuestro preloader creado únicamente con el poder de nuestras hojas de estilo, pero… prepárense… ¡aquí viene lo bueno!

Animando nuestro preloader

Para que nuestro preloader no luzca triste y decaído, vamos a animarlo utilizando una propiedad muy interesante de CSS3, la propiedad animation, ésta propiedad nos permite utilizar keyframes, dentro de animation nosotros vamos a ligar nuestros keyframes, vamos a indicar cuál es su duración, de qué tipo de animación se trata y cuantas veces queremos que se repita.

Primero vamos a crear y agregar los estilos de la animación para nuestros 3 cuadrados, esto lo hacemos de la siguiente manera:

#loader {
-webkit-animation:               giro 10s linear infinite;
animation:                       giro 10s linear infinite;
}

#loader:before {
-webkit-animation:               giro 5s reverse infinite;
animation:                       giro 5s linear infinite;
}

#loader:after {
-webkit-animation:               giro 2s linear infinite;
animation:                       giro 2s linear infinite;
}

Ahora vamos a crear los keyframes para nuestros cuadrados:

@-webkit-keyframes giro {
    0%{
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes giro {
    0%{
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

Como nuestro objetivo es presentar la animación en todos los navegadores posibles, utilizamos animation y también animation con su vendor prefix webkit, lo mismo hacemos con transform, utilizamos los vendor prefix para que se muestre correctamente en todos los navegadores.

Ahora si listo, le asignamos a cada cuadrado una duración de giro diferente, es momento de guardar y probar. Tu animación debe de estar corriendo de maravilla en estos momentos, si no estás conforme con la duración de giro de cada elemento, juega un poco con los valores y modifica la duración en segundos dentro de animate.

Sólo nos queda un sencillo paso y es…

Agregar la funcionalidad de Preloader utilizando jQuery

Este último paso es muy sencillo ya que únicamente necesitamos saber en qué momento se terminó de cargar nuestro sitio web, para indicarle a nuestro preloader que desaparezca al momento en que esto suceda con el fin de tener una increíble experiencia de uso.

Como vamos a utilizar jQuery, lo primero que tenemos que hacer es incluirlo dentro de nuestro HTML, puedes descargarlo y agregarlo a tu carpeta de archivos JavaScript, nosotros en este caso vamos a agregarlo directamente linkeandolo desde Google CDN, vamos a agregar la ruta antes de que termine la etiqueta de cierre del body de nuestro sitio web, quedaría de la siguiente manera:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>

Listo, así de fácil agregamos jQuery a nuestro proyecto, ahora vamos a utilizarlo para detectar cuando termine de cargar nuestra página y en cuanto termine vamos a utilizar un fade out para que suavemente desaparezca nuestro preloader.

Vamos a crear un archivo de javascript, lo vamos a llamar custom.js y lo vamos a agregar justo debajo de nuestro jQuery, es muy importante el orden ya que necesitamos cargar primero nuestra librería de jQuery, de lo contrario no va a funcionar, quedaría de la siguiente manera:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/custom.js"></script>
</body>

Dentro de nuestro archivo custom.js vamos a escribir el siguiente código:

$(window).load(function(){
       $("#loader").fadeOut();
       $("#loader-wrapper").delay(500).fadeOut("slow")
})

Lo que estamos haciendo es crear una función que se active cuando nuestra página haya terminado de cargar, como queremos que el código se ejecute cuando estén cargados absolutamente todos los elementos de la página, vamos a utilizar el método $(window).load

En cuanto detecte que todo está cargado, nuestra función va a desaparecer primero nuestra animación del Preloader y medio segundo después, desaparecerá poco a poco nuestro telón.

Eso es todo el código que necesitamos, como ves es muy sencillo, ahora solo resta probar nuestro sitio web en tu navegador de confianza y ¡voila! #NoMasSitiosRotos. Utilízalo sabiamente en tus proyectos y brinda a tus visitantes una increíble experiencia de usuario.

CSS3 no sólo se limita a agregar tipografías y bordes redondeados a nuestros sitios web, nos brinda un enorme abanico de posibilidades como pudimos ver en este tutorial, así es que es muy importante tenerlo dentro de nuestro set de herramientas front-end. Si quieres volverte un master, te recomendamos nuestra Especialidad Diseño Web Responsivo. El programa incluye CSS Avanzado.

Si quieren descargar el código fuente terminado para usarlo como referencia, pueden hacerlo directamente desde este link.

Una SPA, como lo dice su nombre, es una aplicación web que inicialmente carga una página (ej. un index.html) y posteriormente, mediante llamadas internas de AJAX (XMLHttpRequest), muestra diferentes pantallas de nuestra aplicación. Así, si tenemos un encabezado con nuestras ligas de navegación, no necesitamos estar cargando todo el HTML por cada pantalla, simplemente vamos actualizando la sección que requerimos. Funciona un poco similar a los llamados RIA’s (Rich Internet Applications) en los cuales sólo se cargaba un SWF de Flash o un XAP de Silverlight, y los datos eran cargados mediante llamadas a alguna API o servicio web.

Entendido el concepto de SPA, hagamos nuestro primer ejemplo de AngularJS. Para este ejemplo, necesitamos un editor de código o IDE, un navegador web y (opcionales) tener instalado bower y un cliente de git en nuestra máquina.

Podemos clonar el repositorio angularjs-first-steps de GitHub o de la misma página podemos descargar en formato zip los archivos.

Una vez ya sea clonado o descargado y descomprimido el archivo ZIP, abrimos el archivo index.html qué está dentro del directorio app en un navegador web. Se verá lo siguiente:

Nos aparece el nombre Guest alrededor de las llaves porque todavía no hemos cargado la biblioteca de AngularJS, y por ende no ha “compilado” el código que hemos ingresado a la vista.

Con un editor de código (en este caso Sublime Text) abrimos el archivo index.html. Lo primero que debemos hacer es cargar nuestra biblioteca de AngularJS. Para estos ejemplos, vamos a utilizar la versión 1.x, es decir, todavía no utilizaremos la versión 2 de AngularJS. Y para ello, tenemos dos opciones. La primera es cargar la biblioteca de un CDN (Content Delivery Network). La ventaja de cargarlo de un CDN es que es un servidor que está altamente optimizado y la carga será mucho más rápida. La desventaja es que dependemos de una conexión a internet. Habiendo encontrado un CDN que nos guste, cargamos la biblioteca de Angular. Yo elegí la de google developers. Y nuestro encabezado de nuestra página HTML quedará algo similar a:

<link href='./css/app.css' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  </head>

Sin, embargo, aún recargando nuestra página, seguirá sin “compilar” el código. Esto es porque aunque la biblioteca haya sido incluida, todavía no le hemos indicado que nuestra página es una aplicación de AngularJS. AngularJS nos permite que toda nuestra página sea una aplicación SPA o sólo una sección de nuestro HTML. Para éste ejemplo, vamos a indicarle que todo nuestra sección de body será nuestra aplicación.

</head>
  <body ng-app>
    <div class="top-bar">

Al refrescar la página finalmente se «compilará» y ejecutará  nuestro código. Y ahora aparecerá de manera correcta.

Veamos otra forma de cargar la biblioteca de angular con la ayuda de bower. Bower es un manejador de dependencias. Con él, podemos dejar nuestras dependencias de la aplicación afuera de la misma. Cambiemos entonces nuestro ejemplo para cargar AngularJS de manera local. Lo primero es (teniendo instalado bower en nuestro sistema) instalar nuestras dependencias. Si abrimos nuestro archivo bower.json, veremos un nodo de dependencias.

{
  "name": "loading-angular-activmx",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/bpineda/angularjs-first-steps",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "~1.x",
    "angular-route": "~1.x"
  }
}

Y observamos que tenemos las dependencias de angular y angular-route. Abrimos entonces una línea de comandos y desde el directorio app, ejecutamos el siguiente comando: (bower install)

Con ello, tenemos una copia local de AngularJS. Cambiamos nuestra referencia a nuestra copia local dentro de bower_components:

<link href='./css/app.css' rel='stylesheet' type='text/css'>
    <script src="bower_components/angular/angular.min.js"></script>
  </head>

Adicionalmente cambiamos el nombre de Bienvenida a Oscar:

<div class="callout">
        <h3>Welcome, {{'Oscar'}}</h3>
      </div>

Y recargamos el navegador.

Por último, vamos a crear un controlador y darle funcionalidad a nuestra vista. Para entender mejor el ejemplo explicamos el concepto Controlador y Vista en el contexto de SPA’s. La vista es simplemente una pantalla generada con HTML, perteneciente a algún paso en el flujo de nuestra aplicación. Un controlador es el pegamento entre una vista, los datos que podamos cargar dentro de ella y la funcionalidad, es decir, los eventos que se disparan dentro de la vista. En la vista colocaríamos un botón o liga, en el controlador escuchamos por dicho evento y en un servicio podríamos hacer alguna llamada a un servicio REST. Hagamos el ejemplo con simplemente la vista y el controlador.

En nuestro bloque de Javascript, después de  la línea 42, vamos a incluir código de AngularJS.

$(document).foundation();
      var app = angular.module('app', []);
      app.controller('WelcomeController', function($scope)
                                          {
                                            $scope.name = 'Benjamin';
                                          }
      );

Con ello, hemos creado un módulo llamado app, y dentro de él, le hemos adicionado un controlador llamado WelcomeController. Dentro de nuestra aplicación, le hemos pasado el $scope y al $scope le hemos agregado una variable llamada name a la que podemos tener acceso dentro de la vista. Tratando de simplificar lo anteriormente explicado, en la línea 44 creamos una nueva instancia de AngularJS; a partir de la línea 45, definimos un controlador y se lo anexamos a la aplicación actual; por último, creamos una función anónima a la cual le pasamos la variable $scope y dicha función anónima se ejecutará al momento de cargar dicho controlador. Cada atributo (en este caso name) y acción anexada a dicho scope, estará disponible en la vista de dicho controlador.

Sólo nos hace falta indicarle a AngularJS que la vista va a ir conectada con dicho controlador. Lo vamos a hacer con la directiva ngController y cambiando la directiva ngApp que habíamos utilizado al principio del ejercicio:

<div class="row column" ng-controller="WelcomeController">
      <br>
      <div class="callout">
        <h3>Welcome, {{name}}</h3>
      </div>

Hemos cambiado la línea 27 para incluir la variable que le agregamos al scope. También le indicamos a angular que el módulo que vamos a utilizar es el módulo llamado app:

</head>
  <body ng-app="app">
    <div class="top-bar">

Refrescamos en el navegador:

Por último agregamos un botón en la vista  y lo conectamos a la acción del controlador con la directiva ngClick:

</div>
      <button class="button" ng-click="greetMe()">Click me</button>
    </div>

Y dentro de nuestro controlador, creamos la misma acción (greetMe):

$(document).foundation();
      var app = angular.module('app', []);
      app.controller('WelcomeController', function($scope)
                                          {
                                            $scope.name = 'Benjamin';
                                            $scope.greetMe = function()
                                            {
                                              alert('Hello, ' + $scope.name);
                                            }
                                          }
      );

Finalmente recargamos el navegador:

Y al dar clic:

Nos muestra una alerta!

Con esto, vimos cómo conectar una acción (ngClick) a un método definido dentro de nuestro controlador. Como buena práctica, denotamos que el controlador se llamará NombreController. En este ejemplo nuestro controlador se llama WelcomeController. Adicionalmente, la norma en AngularJS es que a cada vista le corresponde un controlador.

Si quieren seguir aprendiendo de AngularJS los invitamos a nuestro próximo curso de AngularJS el 15 de Noviembre.

Calidad vs velocidad de carga

Pero, ¿realmente que ventajas ofrece este nuevo formato? Recuerden que una forma de clasificar los formatos de imagen es en: lossless ( sin pérdida) y lossy (con pérdida), de ahí el uso de PNG’s y JPEG’s o GIF’s, respectivamente. Esto siempre ha sido la decisión incómoda de diseñadores y desarrolladores web: Calidad vs velocidad de carga. Donde se sacrifica generalmente la calidad de la imagen para tener una carga más rápida o uno se resigna al ancho de banda y una carga lenta para tener una mejor calidad de imagen. Pues este chiquitín toma lo mejor de los dos bandos y nos da la opción de que sea lossless o lossy.

Las imágenes lossless WebP, son 26% más pequeñas comparadas con un PNG. Las imágenes WebP lossy, son entre 25 y 34% más pequeñas en comparación con imágenes JPEG con un índice equivalente SSIM. WebP admite transparencia a través de un canal alfa, con tan sólo un 22% de bytes adicionales. La compresión lossy también admite transparencia y generalmente ofrece archivos 3 veces más pequeños comparados con PNG’s con compresión lossy para canales rojo, verde y azul.

Como funciona

La compresión Lossy WebP, usa código predictivo para codificar una imagen, que es la misma metodología que usa el codec VP8 para keyframes de video. El código predictivo usa valores de bloques vecinos de pixeles para predecir los valores en un bloque, después codifica sólo la diferencia residual entre los valores actuales de la predicción.

Los residuales típicamente contienen valores cero, los cuales se comprimen mejor. WebP, incluso utiliza bloques de tamaños variables.

La compresión Lossless WebP, utiliza fragmentos previamente analizados para reconstruir nuevos pixeles. Puede utilizar una paleta local si se encuentra una equivalente. Esta paleta se actualiza continuamente para reutilizar colores recientes. Este modo de compresión se llama “VP8L” y comparte algunas características con el algoritmo de compresión LZ77.

Una archivo WebP consiste en información de imagen VP8 o VP8L y un contenedor basado en RIFF. La biblioteca standalone libwebp funciona como referencia de implementación para la especificación WebP, y esta disponible en el git respository y como tarball.

¿Cómo lo implemento?

Ahora vienen las maromas para poder usar este formato. Si son del grupo selecto de desarrolladores que tiran líneas de código en Xcode y están acostumbrados a usar la terminal de su ordenador, al tener Xcode instalado lo único que necesitan es descargar Mac Ports, que es un sistema para compilar, instalar y gestionar software open source. Después deben descargar las utilidades precompiladas cwebp para convertir formatos JPEG, PNG y TIFF a WepP, y dwepp si quieren convertir de WebP a PNG.

Aquí todos requisitos y pasos necesarios

Si son desarrolladores más apegados a la parte gráfica que al código. Pueden descargar la aplicación XnConvert, que es una aplicación multiplataforma que permite automatizar varias tareas relacionadas con imágenes, entre ellas convertir de un formato a otro, entre ellos a WebP.

Aquí una guía rápida:

1. Descarga XnConvert aquí.
2. Agrega la imagen o imágenes.
3. En la etiqueta Output, selecciona un folder en tu ordenador y WepP en formato.
   
4. En las opciones del formato, es donde puedes decidir si quieres que tu imagen tenga pérdida o no. Al igual que JPEG, el cuadro de diálogo tiene un slider para determinar la calidad de la imagen.
   
5. Convierte y compara resultados.

Conslusiones

Independientemente de que este formato se haga un estándar recomendado por la W3C, recuerden que al final, es el número de desarrolladores que implementan una recomendación, lo que hace de un nuevo formato un éxito o que se pierda en la gran lista de recomendaciones de la W3C. Aunque en este caso Google, apostará fuerte por WebP y tal vez estemos usándolo antes de lo esperado como parte de nuestro flujo de trabajo para el desarrollo de sitios y aplicaciones web. Por cierto les recomendamos para aprender a desarrollar las mejores aplicaciones web nuestro Diplomado Web Developer próximo a empezar el 14 de mayo.

Échale un vistazo:

Revisaremos cuatro tomas distintas, viendo el antes y el después de usar el Lumetri Color para corregir el color donde se explica el porqué de la corrección y su proceso. Es justo lo que necesitamos los editores, un conjunto de herramientas sencillas pero poderosas.

Esperamos que te sea de utilidad. Aprende todo acerca de Adobe Premiere Pro CC en nuestro próximo curso que inicia el 2 de Noviembre 2016, los lunes y miércoles de 19 a 22 horas. ¡Inscríbete!

El primer release esta disponible para Mac OS con una versión para Windows que estará disponible más adelante en el año. Durante esta fase se invita a la comunidad a utilizar Adobe XD sin costo! Se puede descargar de adobe.com o a través de la aplicación de escritorio de Creative Cloud.

Adobe XD se vuelve una tecnología indispensable para creación de wire frames, diseño visual, diseño interactivo, prototyping y previsualización, mediante diferentes herramientas necesarias para el diseño de experiencia de usuario en una simple solución. Se esta comenzando con un conjunto de herramientas en cada una de esas áreas con la retroalimentación recibida por parte de los usuarios para incoporar las características que se necesitan en este campo miéntras se ha hecho un gran trabajo en el tema de comodidad de la herramienta y desempeño.

¿Qué esta incluído en este preview?

En esta primera edición de Adobe XD encontrarán:

• Herramientas de Diseño – Creación de Wireframes, Layouts de Pantalla y Elementos Creativos listos para Producción.
• Herramientas de Prototyping – Definición de Flujos, Triggers y Trancisiones como parte del diseño.
• Compartir – Creación de Grabaciones de Video del prototipo o Compartir un prototipo interactivo disponible desde Creative Cloud.
• Soporte de Importación de elementos desde Photoshop, Illustrator y Sketch
• Rápido Desempeño – Creación de proyectos que involucran diseños complejos para la web, móviles, tablets, smartwatches y más sin pérdida de rendimiento.

Existen varios ejemplos disponibles desde la pantalla de inicio así como tutoriales y documentación. También los invitamos a revisar el siguiente video por parte del equipo de prouecto:

En este momento lo que el equipo esta solicitando por parte de la comunidad es su retroalimentación de Adobe Experience Design CC (preview) en Twitter @AdobeXD así como compartir ideas en los foros para ayudar a moldear el futuro de Adobe XD con ideas en el sitio de retroalimentación oficial.

En @ActivMX estamos muy emocionados por la noticia sobre esta herramienta que sin duda nos dará material para compartir conocimiento con todos ustedes en nuestros cursos.

Ahora más que nunca, tenemos en el mercado una gran variedad de dispositivos móviles, y a diferencia de hace 4 años, ahora tenemos pantallas que van desde los 272 x 350 ppi hasta pantallas de 5,120 x 2880 ppi y todos los tamaños y variantes en medio. Aunado a esto, la resolución o densidad de pixel de 72 ppi, dejó de ser el único estándar desde que Apple, introdujo sus pantallas de alta resolución que alcanzan resoluciones hasta de 401 ppi en un iPhone 6+.   El diseño web está tomando una nueva dimensión, ahora el contexto del usuario y el dispositivo con el que accede a la red, son otras variantes a tomar en cuenta para desarrollar un proyecto y ofrecer una mejor experiencia en la interacción con la información.

Según AMIPCI(Asociación Mexicana de Internet), hay 53.9 millones de usuarios conectados a la red, de los cuales el crecimiento de usuarios conectados a través de smartphones ya ha dejado atrás a los usuarios que se conectan desde computadoras de escritorio. También The Internet of Things, es una tendencia que incorpora nuevos dispositivos, desde relojes, computadoras de autos hasta lavadoras, pero, no hay que agobiarnos ya que es imposible tomar en cuenta todos los dispositivos y/o pantallas para diseñar un sitio.

Una metodología dentro del proceso de diseño, para afrontar esta gran diversidad de dispositivos es:

• Diseñar layouts flexibles o líquidos.
• Incorporar Media Queries en nuestro código.
• Tratar imágenes en diferentes resoluciones y dimensiones.

Ahora vamos por partes, una vez que tenemos definido las secciones y la funcionalidad de nuestro sitio, podemos utilizar herramientas gráficas como Illustrator y Photoshop. Dentro de estas aplicaciones definimos mínimo tres pantallas: desktop, tablet y smartphone. Aquí entra todo el «feeling y expertice» del diseñador web.

El diseñador es el que debe pensar en un layout flexible, es decir, un layout que se adapte a diferentes resoluciones sin perder consistencia, por ejemplo, para computadoras de escritorio, puede definir cuál será la resolución mayor para su diseño y como se comporta el layout hasta la menor resolución de escritorio, hasta hacer el siguiente cambio de dispositivo. Así hasta llegar al layout para smartphones donde se define cual es el tamaño mínimo de nuestro layout.

Una vez que tenemos definida una interfaz gráfica, debemos traducir todo a código, esto es la parte de maquetación, y aquí se divide nuevamente el proceso de diseño: por una parte debemos tener una estructura sólida en nuestro HTML, utilizando semántica adecuada para cada una de las secciones de una página o cada uno de los módulos; por otra, agregamos todo el diseño a través de CSS. En esta parte es donde incorporamos los Media Queries, que son instrucciones para indicar a nuestro sitio que diseño (CSS) debe desplegar dependiendo la resolución de pantalla del dispositivo.

Por último, el tratamiento de imágenes sigue siendo tierra de nadie, ya que aún no hay estándares adoptados por los usuarios, y aunque hay propuestas por parte de la W3C, como el <picture element>, los fabricantes de dispositivos cambian constantemente la densidad de pixeles en sus dispositivos, por ejemplo, el iPhone 3G tenía una densidad de 162 ppi, esto en el 2008 y el iPhone 6+ tiene una densidad de 401 ppi, en 8 años ha crecido más de la mitad la densidad de pixeles. Por esto es dificil implementar una solución al tratamiento de imágenes en diferentes dispositivos. El desarrollo tecnológico no va a la par del desarrollo de sitios web y aplicaciones. Además el tratamiento de imágenes no sólo tiene que ver con resoluciones de pantalla, también con la velocidad de ancho de banda de cada dispositivo, así como la latencia y el motor de render de cada navegador.  

Para la parte gráfica hay algunos tips que podemos utilizar, por ejemplo Adobe Muse, tiene la opción de tratar gráficos para pantallas de alta resolución, utilizando una técnica relativamente simple a partir de la resolución de una imagen. Por ejemplo si tenemos una imagen que debe abarcar 300px de ancho en un layout, Muse pide que pongas una imagen del doble de tamaño (600px) para usarla en dispositivos retina display.

En la parte de código, vamos a tomar el mismo ejemplo, una imagen de 600px de ancho y al poner el ancho ya sea en HTML o en CSS poner la mitad o incluso usar porcentajes.

<img src=”foto.jpg width=”300px”>

<img src=”foto.jpg width=”100%”>  

Esto no es la mejor solución, ya que, si el usuario tiene poco ancho de banda, está cargando datos innecesarios. Para eso podemos utilizar JavaScript, para cargar la imagen adecuada dependiendo del tipo de dispositivo.

En nuestro siguiente diplomado que inicia el próximo 16 de marzo, se ve como abordar este problema desde la parte gráfica hasta la parte de código. Por el momento estoy preparando un tutorial para tratar imágenes para web desde Adobe Photoshop y Adobe Illustrator, estén atentos