Foto del autor Dulce Ramos

17: Tendencias en diseño web 2018

Tendencias en diseño y maquetación

1) Diseño en esqueleto
El diseño en esqueleto,básicamente, esta relacionado con una web que se carga en etapas cuyo flujo de contenido va cargando conforme va avanzando con el scroll (si deseas saber más sobre este concepto puedes visitar este enlace).

Determinados sitios como Facebook o Linkedin ya hacen uso del diseño en esqueleto

Puntos fuertes:

  • Este tipo de diseño, permite involucrar al usuario haciéndole sentir parte de la web debido a la carga progresiva del contenido con efectos animados y dinámicos.
  • Permite al usuario hacerse una idea clara de la estructura que se va a encontrar en la web, lo cual a nivel de usabilidad es fundamental, ya que reduce el tiempo de carga.

2) PWA
PWA (Progressive Web App o aplicaciones web progresivas) se refiere a aplicaciones que cambian su funcionalidad según la capacidad del dispositivo en el que se estén ejecutando. Por ejemplo, si un usuario abre una web desde un celular u otro usuario la abre desde un ordenador, ambos deben poder acceder a un contenido adaptado a sus dispositivos de manera óptima.

PWA es una de las grandes tendencias del 2018

Puntos fuertes:

  • Las PWA combinan lo mejor de las webs y de las APP’S (aplicaciones para móviles), no requieren instalación.
  • Permiten almacenamiento local.
  • El usuario puede ponerse en su Smartphone un icono que le lleve a la web al igual que con las APP’S pero, con la diferencia de no ocuparle espacio en el móvil.
  • Se muestran al usuario de forma rápida en cualquier navegador.

3) Del responsive al diseño exclusivo en móviles
Actualmente hay dos opciones de ofrecer una página Web para los dispositivos móviles. La primera opción es disponer de un diseño de la página Web que sea sensible a este tipo de dispositivos, conocidos como diseños sensibles (o “Responsive Design” en inglés) que detecta el tipo de dispositivo y su tamaño de pantalla para adaptarse completamente y de forma automática.

La segunda opción es disponer de una página Web paralela con un diseño Web exclusivo para dispositivos móviles. Con ello el sistema Web detecta si el usuario accede desde un dispositivo móvil para mostrar esta Web paralela en lugar de la Web principal pensada para ordenadores.

4) Diseño con botones ghost
Este tipo de botones están caracterizados por un borde delgado de color blanco (en la mayoría de los casos) y por no tener color de fondo, van bien con diseños simples o con pocos elementos, también, se combinan muy bien con las imágenes hero.
Para ver ejemplos de botones ghost, puedes visitar este enlace

5) Diseño modular
El diseño a través de módulos es una de las últimas tendencias. Se trata de un tipo de diseño en el que cada elemento se plantea como un módulo independiente, pues está inspirado en la red social Pinterest.

Es decir, su característica principal es que el diseño se plantea a partir de elementos independientes con forma cuadrada. Además, el diseño por módulos es perfecto para una correcta adaptación a todos los dispositivos (escritorio, Tablet y móvil).
Ver ejemplos de diseño modular

Tendencias en tipografía

6) Letras curvas y redonditas
Una de las grandes tendencias son las tipografías de gran tamaño con cuerpo que se utilizarán para superponerlas sobre imágenes, también utilizadas para transmitir frases cortas e impactantes.
Puedes encontrar muchos ejemplos de tipográficas en el siguiente enlace).

Una tipografía que apunta ser la favorita en 2018, es una fuente gratuita de Google Noto(), la cual es correctamente visualizada en más de 800 idiomas y con unos 110.000 caracteres

7) Tipografías Hand made
Las tipografías hechas a mano "hand made" tendrán bastante peso en este próximo año 2018, ya que le dan un toque personalizado a la web, lo cual le hará ganar valor.
Ver 10 tipografías handmade

Como recomendación, la mejor opción para usar estas tipografías es usarlas en el diseño de logotipos y en zonas destacadas del sitio web, como cabeceras o titulares.

Tendencias en color y forma

8) Infografías e ilustraciones a medida
Este tendencia se centra en el diseño de ilustraciones e infografías (pieza visual que permite explicar a través de imágenes procesos complejos) propias.

Si deseas saber cómo realizar una infografía, puedes revisar el siguiente enlace:
https://venngage.com/blog/como-hacer-una-infografia-en-5-pasos/

9) Minimalismo y espacio negativo Con el uso del minimalismo destacan fondos blancos o muy claros, un único color para las tipografías y diseño con pocos elementos. También se instaura fuertemente al branding web y branding de marca (logotipos), donde podremos ver diseños limpios, claros, entendibles rápidamente a nivel visual.

Con el minimalismo y el aprovechamiento del espacio negativo se trata de emplear los elementos de diseño estrictamente necesarios para focalizar en el objetivo que persigue el sitio web.
Ver los mejores sitios webs diseñados en blanco y negro

10) Colores intensos
Uso de colores fuertes, vivos, con degradados y biocromatismos. ejemplos

11) Degradados con varios colores
Otro efecto que ya hemos empezado a ver es la de degradar con varios colores determinados fondos o elementos en un sitio web.
Al igual que las animaciones, no se debe sobrecargar los diseños con degradados, pero usados con inteligencia, aportan un toque muy vistoso y creativo.
Ver los 40 sitios web más coloridos

Las webs que degradados con inteligencia, son diferenciadoras y con los degradados ayudan a potenciar la identidad cromática corporativa



12) Skeumorfismo y flat design
El skeumorfismo se refiere a la utilización de formas geométricas y texturas realistas (texturas de la vida real). Es la colocación del fondo sobre la forma, superposiciones de colores simples para obtener un efecto de profundidad.

En cuanto al Flat design no es más que el diseño gráfico plano, y su aplicación se evidencia en diseños minimalistas que combinan imágenes limpias con fondos blancos o pastel.
Más información sobre Flat desing y Skeumorfismo

Tendencias en Imágenes

13) Hero
En años anteriores la tendencia era incluir slides con varias imágenes en los sitios web, poco a poco se ha ido perdiendo, debido al tiempo que necesitan para ser visualizados y la gran cantidad de recursos que consumen para ser cargados.

Por ese motivo, la tendencia para 2018 son las imágenes con ancho completo para captar la atención del usuario con un solo vistazo, también conocidos como Heros. Están pensados como portadas de un sitio web.
Ver ejemplos

Otras tendencias

14) Cinemagraphs
Una imagen animada que sale combinando fotografía y vídeo. La mayoría de la imagen es estática, pero algún elemento de la misma tiene movimiento. El fin de esta herramienta es sorprender al usuario, que se encontrará ante una imagen supuestamente normal que de repente se empieza a mover.
Puedes visitar el siguiente enlace:https://medium.com/marketing-y-viajes/todo-sobre-los-cinemagraph-qu%C3%A9-son-herramientas-y-ejemplos-1755709ba4ec y ver cómo hacer un Cinemagraphs

15) Parallax
Si accedes a una web, haces scroll y ves que el fondo se mueve a otra velocidad que el contenido puedes estar seguro de que el diseñador de esta página ha utilizado la técnica parallax.

Es un diseño que ya se vió mucho en 2017 y que utiliza distintas capas que te ayudan a crear en tu website un pequeño efecto de profundidad y cada vez que los usuarios se desplacen por la pantalla verán partes del fondo que antes no se veían.

16) Elementos pegados en el inferior del site
Esta tendencia se enfoca en el hecho de pegar los menús en la parte inferior de la pantalla. El motivo es por la Usabilidad, ya que cuando se navega con un dispositivo móvil, el gesto más común a la hora de navegar es el uso del dedo pulgar sobre la parte inferior de la pantalla del dispositivo.
A partir de ahora es recomendable pensar incluso primero en diseño para mobile y luego diseño para sobremesa.

17) Lenguajes y herramientas
JavaScript es uno de los lenguajes más usados en el desarrollo web, con una amplia gama de bibliotecas y marcos que hacen que la vida de un desarrollador front-end sea mucho más fácil. La ejecución de JavaScript en el lado del cliente es la razón por la que algunos sitios pueden seguir siendo interactivos incluso después de abandonar su conexión a Internet.

Java es hoy en día, conocido como el idioma predeterminado para crear aplicaciones de Android, pero también tiene una larga historia como tecnología de servidor. Java Servlets,JSP (Java Server Pages) y Web Objects son ejemplos de soluciones del lado del servidor que usan Java.

Los sitios web de alto tráfico como Alibaba, Linkedin y Chase usan Java.


Python. El código fácil de aprender de Python le ha valido el afecto de muchos dentro de la comunidad científica, donde se puede usar para procesar grandes conjuntos de datos. En el back-end, el framework Django sobresale en prototipos rápidos y desarrollo, por lo que es un favorito entre empresas como Pinterest e Instagram.

Ruby. Ruby es un lenguaje que adopta la flexibilidad del programador: hay más de una manera de hacer lo mismo, y algunas maneras pueden ser más rápidas que otras. Sitios web como Hulu, Basecamp, Shopify y Groupon aún usan Ruby hasta el día de hoy.

C#. La respuesta de Microsoft a Java, C # es un híbrido de lenguaje de programación de C y C ++ utilizado para desarrollar software para su plataforma .NET, un marco para crear y ejecutar aplicaciones y servicios web XML. Si está creando sitios web o aplicaciones para el ecosistema de Microsoft, C # es el camino a seguir. El propio sitio web de Microsoft usa C # y ASP.NET como parte de sus compilaciones de back-end.

Otras tendencias son el uso de Angular, React, jQuery, Ruby.

El idioma y las herramientas que eliges son una cuestión de preferencia. En su lugar, seleccione los idiomas y herramientas que mejor se adapten a las características y funcionalidades que desea dominar.

Tips

  • Debes elegir una o más tendencias que vayan de la mano con lo objetivos que tengas. No puedes pretender diseñar una web para vender productos de tecnología y hacerla con un estilo vintage por muy de moda que esté.
  • El auge de los smartphones ha hecho que los diseñadores busquen crear sitios adaptados a este tipo de dispositivos, por lo que, sería bueno considerar esto al momento de diseñar.
  • Busca darle un toque diferente a tu sitio mediante el empleo de la personalización, sencillez, limpieza, armonía inter-elementos, grandiosidad, visual, colorido, interactividad
  • La tipografía debe de estar equilibrada con el mensaje de la web. Si quieres una web formal, se utiliza tipografía fina y elegante; y si el diseño que quieres es minimalista, no usaríamos más de dos tipos de caligrafía.
Foto del autor Osledy Bazo

Tu primera Progressive Web App

Las Progressive Web Apps son experiencias que combinan lo mejor de la Web y lo mejor de las apps. Están disponibles para los usuarios a partir de la primera visita en una pestaña del navegador y no requieren instalación. A medida que el usuario compila progresivamente una relación con la app con el paso del tiempo, se hace más y más poderosa. Se carga rápidamente, incluso con redes débiles, envía notificaciones push relevantes, tiene un ícono en la pantalla principal y se carga como experiencia de pantalla completa y de primer nivel.

Este codelab te guiará para crear tu propia Progressive Web App, incluidas las consideraciones de diseño, como también la implementación de detalles para garantizar que tu app cumpla los principios claves de una Progressive Web App.

Seguir leyendo: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es

Foto del autor Osledy Bazo

React Native y AirBnB Google Maps

En este post explicare como integrar Google Maps a tus aplicaciones React Native, ya que me he encontrado que la instalación por defecto genera muchos errores y react-native no termina de reconocer la librería de Google Maps.

Después de estar aproximadamente 1 semana intentando integrar la librería de AirBnB de Google Maps a una aplicación he llegado a una serie de pasos fáciles de seguir.

Creación del proyecto React Native e instalación de librería AirBnB Google Maps

Primero creamos nuestra app en React Native, nuestra app se llamará myMapApp

                    > react-native init myMapApp
                    > cd myMapApp

Ahora instalamos la librería para Google Maps de AirBnB

                    > npm install --save react-native-maps

Enlazamos la librería con React Native

                    > npm install
                    > react-native link react-native-maps

En teoría ya nuestra app debería funcionar con los mapas por defecto de cada plataforma Maps en iOS y Maps en Android. Pero si queremos usar Google Maps en ambas plataformas tendremos que hacer algunos pasos adicionales:

Antes de comenzar a trabajar en la app vamos a generar la clave de Api (Api Key) de Google Maps para que usemos en nuestro proyecto

Crear la clave API de Google Maps

Iremos a la consola de Google para desarrolladores

Crearemos un nuevo proyecto

Y agregaremos una api en nuestro caso Google Maps SDK for iOS y Google Maps SDK for Android

Ahora nos iremos al menú de la izquierda en Credenciales. Y crearemos nuestra API Key, la guardaremos para mas adelante

Enlace de AirBnB Google Maps para iOS

Instalar Cocoapods (si lo tenemos podemos saltar este paso)

                      sudo gem install cocoapods

Configurar el proyecto para iOS

                      cd ios
                      pod init

Esto genera un archivo Podfile en nuestra, lo abriremos y editaremos su contenido

                      # Uncomment the next line to define a global platform for your project
                      platform :ios, '9.0'
                
                      target 'myMapApp' do
                        # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
                        # use_frameworks!
                
                        # Pods for myMapApp
                
                        target 'myMapApp-tvOSTests' do
                          inherit! :search_paths
                          # Pods for testing
                        end
                
                        target 'myMapAppTests' do
                          inherit! :search_paths
                          # Pods for testing
                        end
                
                        react_native_path = "../node_modules/react-native"
                        pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"
                        pod "React", :path => react_native_path
                
                        pod 'GoogleMaps'
                
                      end

Recuerda reemplazar el nombre de tu aplicación donde dice target

Y no te olvides de especificar la plataforma de iOS que utilizaras

Si recibes este error:

                      [!] The name of the given podspec `yoga` doesn't match the expected one `Yoga`

Cambia la linea de este modo (yoga en minúscula):

                      pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"

Ahora en la terminal

                      pod install

Al hacer esto se generara un nuevo proyecto en nuestra carpeta de iOS, lo abriremos con XCode

                      open myMapApp.xcworkspace

Y copiamos la carpeta AirGoogleMaps que se encuentra dentro de /node_modules/react-native-maps/lib/ios al proyecto xcworkspace que tenemos abierto en el Xcode.

Quedando de esta forma

Para usar las credenciales API abrimos el archivo AppDelegate.m en Xcode

                    #import "AppDelegate.h"
                
                    #import <React/RCTBundleURLProvider.h>
                    #import <React/RCTRootView.h>
                    @import GoogleMaps;
                    @implementation AppDelegate
                
                    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
                    {
                      NSURL *jsCodeLocation;
                      [GMSServices provideAPIKey:@"YOUR_GOOGLE_API_KEY"];
                      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
                
                      RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                                          moduleName:@"myMapApp"
                                                                  initialProperties:nil
                                                                      launchOptions:launchOptions];
                      rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
                
                      self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
                      UIViewController *rootViewController = [UIViewController new];
                      rootViewController.view = rootView;
                      self.window.rootViewController = rootViewController;
                      [self.window makeKeyAndVisible];
                      return YES;
                    }
                
                    @end

Ahora iremos a Product -> Clean y luego Product -> Build para ejecutar nuestra aplicación.

Enlace de AirBnB Google Maps para Android

En nuestro proyecto debemos editar el archivo android/app/build.gradle

                    dependencies {
                      ...
                      // Paste these line
                      compile(project(':react-native-maps')){
                          exclude group: 'com.google.android.gms', module: 'play-services-base'
                          exclude group: 'com.google.android.gms', module: 'play-services-maps'
                      }
                      compile 'com.google.android.gms:play-services-base:10.0.1'
                      compile 'com.google.android.gms:play-services-maps:10.0.1'
                    }

Y también debemos agregar nuestra Api Key en Android/app/src/AndroidManifest.xml

                    <application>
                        <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
                        <meta-data
                          android:name="com.google.android.geo.API_KEY"
                          android:value="YOUR GOOGLE MAPS API KEY HERE"/>
                    </application>

Con esto ya tenemos nuestro proyecto React Native configurado en iOS y Android con Google Maps, ahora actualizamos el archivo App.js en nuestro proyecto React Native para incluir el Mapa

                  import React, { Component } from 'react';
                  import {
                    StyleSheet,
                    Text,
                    View
                  } from 'react-native';
                  import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
                
                  const styles = StyleSheet.create({
                    container: {
                      ...StyleSheet.absoluteFillObject,
                      height: 400,
                      width: 400,
                      justifyContent: 'flex-end',
                      alignItems: 'center',
                    },
                    map: {
                      ...StyleSheet.absoluteFillObject,
                    },
                  });
                
                  export default class App extends Component {
                    render() {
                      const { region } = this.props;
                      console.log(region);
                
                      return (
                        <View style ={styles.container}>
                          <MapView
                            provider={PROVIDER_GOOGLE}
                            style={styles.map}
                            region={{
                              latitude: 37.78825,
                              longitude: -122.4324,
                              latitudeDelta: 0.015,
                              longitudeDelta: 0.0121,
                            }}
                          >
                          </MapView>
                        </View>
                      );
                    }
                  }
Foto del autor Osledy Bazo

Evento Industrias Creativas 2017

Seis especialistas venezolanos + un británico te contarán cómo se iniciaron en el mundo de los videojuegos y el desarrollo de aplicaciones, cuáles son las mejores prácticas en el área y te aconsejarán sobre cómo iniciarte en esta industria en crecimiento.

Manténte alerta, que la segunda semana de noviembre enviaremos en enlace a la planilla de inscripción para que asegures tu cupo, TOTALMENTE GRATIS. Te animamos a compartir esta información con tus amigos y compañeros.

Mas información: http://industrias-creativas.com

Foto del autor Osledy Bazo

Evento X JOINCIC - Las Jornadas Interuniversitarias de Ciencias de la Computación

Las Jornadas Interuniversitarias de Ciencias de la Computación (JOINCIC), surgen en el año 2008 como resultado de la sinergia y el trabajo en conjunto de los estudiantes de la Universidad Católica Andrés Bello y la Universidad Simón Bolívar. Es un evento organizado exclusivamente por estudiantes con el propósito de reunir a destacados profesionales de todas las ramas de las ciencias de la computación, para intercambiar conocimientos e innovaciones de dicha área entre profesionales, empresarios y estudiantes.

Mas información: https://www.facebook.com/events/310123819453505/

Foto del autor Osledy Bazo

Startup Weekend Maracay 2017

Startup Weekend Maracay, en su segunda edición, forma parte del gran movimiento mundial que invita a creativos e innovadores estudiantes y profesionales a construir una idea en una startup en el área de tecnología, con el reto de presentarla en 54 horas de su creación.

Un encuentro que te permite acelerar al máximo tu ingenio y de interactuar con un grupo variado de personas en cualquier especialización. La ciudad jardín de Venezuela prepara sus espacios para recibirlos desde el viernes 27 de octubre, hasta lograr el domingo 29 por la noche, presentar el proyecto final del startup. Durante esta gran experiencia, los participantes son guiados y asesorados por mentores de reconocida experiencia, además de ser evaluados por un jurado de alto nivel. El epicentro de esta actividad será una vez más en las instalaciones de la Cámara de Industriales del estado Aragua.

¿Sabes qué especialidades son afines para integrar una startup? ¡TODAS! Por eso, estamos buscando emprendedores, especialistas en mercadeo, diseñadores, programadores, en definitiva, profesionales y estudiantes en distintas áreas que quieran aprender a crear startups.

Debes saber que tu participación en el evento incluye: certificado de participación, mentoría, alimentación, e hidratación durante los tres días. ¡Es tiempo de crear el futuro que imaginas!

Inscríbete al completar tus datos en el formulario que te muestra el botón "Comprar entradas".

¡Los cupos son limitados! ¡Rápido aprovecha nuestra primera pre-venta hasta el 1ro de Octubre!

Importante: Startup Weekend no es el espacio para conseguir inversión con proyectos ya desarrollados ni para promocionar tu empresa ya constituida.

Mas información e inscripción en el siguiente enlace: http://communities.techstars.com/venezuela/maracay/startup-weekend/11371

Foto del autor Osledy Bazo

Ejemplos del uso del teclado en React-Native para iPhone y Android

Según la documentación de Facebook para el componente de Teclado tenemos disponibles varios eventos para interactuar con el teclado de nuestra aplicación. https://facebook.github.io/react-native/docs/keyboard.html

Comencemos con un ejemplo de app básica donde sólo mostraremos una caja de texto para ingresar texto y un párrafo para indicar el estado del teclado, si está activo o no.

Si te has dado cuenta, al tocar el input puedes escribir cualquier texto, pero luego al tocar la pantalla fuera de la caja de texto, el teclado no se esconde.

Para solucionar esto debemos usar otro componente llamado 'TouchableWithoutFeedback'

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

Te recomiendo leas la documentación sobre este componente ya que debe usarse con cuidado.

Modificaremos nuestro código para incluir el modulo del teclado 'Keyboard' y de 'TouchableWithoutFeedback'. También agregaremos este nuevo componente alrededor de nuestro View principal y usaremos 'onPress={Keyboard.dismiss}' para esconder el teclado una vez tocado la pantalla fuera de la caja de texto.

Para acceder a los estados del teclado tenemos que usarlo en combinacion con un Event Listener que conectará con un evento nativo, puede ser identificado con alguno de estos strings:

  • keyboardWillShow (IOS)
  • keyboardWillHide (IOS)
  • keyboardDidShow (Android)
  • keyboardDidHide (Android)
  • keyboardWillChangeFrame
  • keyboardDidChangeFrame

Modificaremos nuestra app y agregaremos métodos para estar atentos al cambio del teclado.

Usare los strings 'keyboardDidShow' y 'keyboardDidHide' ya que en funcionan tanto en Android como en IOS. ('keyboardWillShow' y 'keyboardWillHide' no tienen representación nativa en Android).

Ademas de agregar los EventListener tenemos que recordar que hay que removerlos, esto para prevenir memory leaks y problemas de rendimiento en nuestra aplicación.

Ahora cambiaremos el estado de nuestro status a un string que indica si el teclado esta activo o inactivo.

En los eventos del keyboard podemos acceder a algunas de sus propiedades como son:

                { 
                  endCoordinates: { 
                  screenY: 442, 
                  screenX: 0, 
                  width: 375, 
                  height: 225 
                },
                  startCoordinates: { 
                  screenY: 451, 
                  screenX: 0, 
                  width: 375, 
                  height: 216 
                },
                  duration: 250 
                }
                

Hay un ultimo problema que es muy común a la hora de trabajar con el teclado en una aplicación y es que a veces el teclado puede tapar parte del contenido de nuestra app:

Para solucionarlo debemos usar el componente 'KeyboardAvoidingView', este componente esta diseñado para ajustar o mover lo que se ve en la pantalla automaticamente para que el teclado no estorbe.

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Hay tres formas para hacer esto automaticamente y la que uses dependerá de los resultados que quieras mostrar. Presta atención a la propiedad 'keyboardVerticalOffset' que sirve para guardar una distancia entre la vista y el teclado. Para esto tendremos que modificar un poco nuestro código así: