Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

edge-inspect-chrome-ex

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introducir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.

Anuncios

3 exelentes plugins jQuery para crear layouts responsive

Ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design de Jquery, independientemente del dispositivo en el que se encuentren.

Es la solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos (se acabo la molestosa tarea de pellizcar la pantalla para hacer zoom).

A continuación se presentan 3 muy importantes plugins especialmente seleccionados de jQuery para realizar sliders, galerías, elementos de navegación, etc. Todo ello con la vista puesta en que dichos elementos tengan un comportamiento responsive y se adapten a la resolución del dispositivo desde el que serán visualizados.

Responsive Image Gallery with Thumbnail Carousel

Crea una galería de imágenes sensible, con un carrusel miniatura con Elastislide. Inspirado en “galería de usuario” , muestra una integración de Elastislide, Implementa una galería de respuesta que se adapta al ancho de la visión del dispositivo mobil. La galería tiene un interruptor de vista que permite verlo con el carrusel en miniatura o sin ella. También añade la posibilidad de navegar con el teclado.

Responsive Image Gallery with Thumbnail Carousel

plugin jquery

PhotoSwipe

Se puede integrar fácilmente en sus sitios web para móviles. Está muy optimizado para los navegadores móviles webkit. Sin embargo, si necesita un apoyo más amplio navegador de escritorio o si está utilizando jQuery Mobile, PhotoSwipe viene empaquetado con una implementación de jQuery también.

PhotoSwipe

PhotoSwipe

jQuery Masonry

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

jQuery Masonry

jQuery Masonry

Live Tools: Herramienta de Diseño en linea

Ui Parade - Live Tools

Live Tools

Live Tools nos brinda la posibilidad de generar botones, formularios, iconos y ribbons (cintas) que luego de finalizados pueden descargarse en distintos formatos, correspondientes a cada uno de ellos para aplicar sobre el diseño que se encuentren realizando.

Generador de Botones

En el caso de los botones, pueden modificar todas las características implícitas de un botón, como tamaño, degradados, sombras y textos para luego generar el html contenedor o bien utilizar el CSS que también se realiza a través de este sistema.

Live Tools - Button Builder

Constructor de Formularios

En el caso de los formularios, creo que puede ser una excelente forma de finalmente lograr obtener un diseño atractivo de forma rápida, el único problema es que solo posee dos campos más los botones, y no permite agregar más. Por lo que solo resultará útil en el caso de necesitar formularios de ingreso, registro de newsletter o similares.

Live Tools - Form Builder

Iconos

El creador de iconos te permite cargar iconos 16x16px y editarlos, el cual puedes exportar en formato PNG o generar código Base64.

Live Tools - Icon Builder

Cintas

La opción para generar cintas nos ofrece varias opciones, de la misma forma que lo hace con los botones, podremos acceder a las características principales necesarias para lograr una buena vista modificando texto, colores, tamaños y degradados.

Live Tools - Ribbon Builder

Sitio: Live Tools

Eche un vistazo al posible nuevo diseño de Facebook

El diseñador australiano Fred Nerby ha rediseñado por cuenta propia al gigante de las redes sociales. Se trata de un nuevo aspecto que Facebook podría tener en cuenta para su próxima actualización de diseño.

Facebook_diseño17

La propuesta recuerda al también reciente diseño de Microsoft, creado para su último sistema operativo, Windows 8, con algunos toques de Apple.

Ver más

Minerales Industriales

Minerales Industriales- Responsive Web design

Sitio Web de Minerales Industriales- PC

Minerales Industriales es una empresa boliviana dedicada a la explotación y comercialización de la bentonita y la barita. Como toda empresa que se encuentra a la vanguardia, Minerales Industriales busca ampliar su mercado a diversos países en Sudamérica, para lo cual requiere una imagen institucional fresca y profesional.

Sin embargo, presentar una imagen profesional en el exterior es una tarea ardua, para ello enbolivia.com ha desarrollado para Minerales Industriales una mezcla de servicios, integrando el desarrollo del manual de imagen corporativa con el desarrollo de un sitio Web profesional y tecnologías de punta.

Como se puede ver el logo de Minerales Industriales es un diseño artístico muy acorde a las tendencias de Web 2.0 que además de ser fácilmente reconocible, transmite la idea de fuerza en la minería. Además el logo está optimizado para ser visto en dispositivos móviles.

Minerales Industriales- Responsive Web design

Minerales Industriales- Tablet

Como parte del desarrollo del sitio Web se utilizó la tecnología “Diseño Web Adaptativo” (Responsive Web Design) a través del cual el sitio Web se adapta a cualquier dispositivo que esté siendo utilizado para ver el sitio (tablet, smartphone, laptop, pc, etc.). Al ser una tecnología nueva y en crecimiento, Minerales Industriales es; orgullosamente, una de las primeras empresas en contar con un sitio Web que tiene está tecnología.

Todos los cambios y actualizaciones que realice a su sitio Web se verán reflejadas en todas las plataformas. De esta manera se tiene un diseño que funciona como si fueran varios, con esta opción ya no es necesario hacer varias verisones de su sitio Web (versión android, versión para iphone, versión para tablet, etc).

Como un beneficio adicional es más fácil posicionar un sitio con este diseño pues solo utilizará una URL lo cual evita posibles errores al momento de cargar o de compartir un enlace en las redes sociales desde un dispositivo móvil.

Con este proyecto enbolivia.com demuestra nuevamente que esta a la vanguardia en Diseño Web. Recuerde este diseño es vanguardista le permite a su usuario sin importar si usa una Pc, un celular android, Ipad o iphone ver su sitio Web y navegar por él sin problemas.

Minerales Industriales- Smartphone

Minerales Industriales- Smartphone

Ecotop Consult

Ecotop S.R.L. es una empresa de consultoría que ofrece servicios en el área de desarrollo rural, centrándose especialmente en la agricultura sostenible, basada en la dinámica natural de los ecosistemas (Sistemas Agroforestales Sucecionales).

Entre sus enfoques principales está en la mejora de los sistemas de producción de cacao en América Latina, Asia y África.

Pantalla de proyectos de EcotopPara este cliente se realizó un sitio con nuestro manejador de contenidos WSP y el diseño fue trabajado a partir de las especificaciones del diseñador de Ecotop para lo cual se trabajó de forma PSD2HTML manteniendo la relación pixel perfect.

Cuenta con funcionalidades jquery para el menú visual con un efecto frecso de cambio de imágenes, así también se implementó los tipos de letra propios de Ecotop incluidos por medio de Cufón. También se incluyó una Galería de fotos interactiva por cada proyecto realizado por Ecotop.

El cliente se encuentra satisfecho con el trabajo realizado y pronto implementaremos la versión en español del mismo sitio.

Puede visitar el sitio pinchando en el siguiente enlace ECOTOP  o en nuestra cartera de clientes.

Box-shadow, una de las nuevas y mejores características de CSS3

La propiedad CSS box-shadow permite a los diseñadores implementar fácilmente sombras difuminadas (tanto exterior o interior) en casi cualquier elemento (principalmente de caja – div), especificando los valores para el color, el tamaño, desplazamiento entre otras características.

Sintaxis

box-shadow: [ color | offset-x | offset-y | blur-radius | spread-radius | inset ]

Ejemplo:

.shadow {
box-shadow: rgba(220,220,220,.65) 3px 3px 10px 5px inset;
}

Valores


1º Valor: color de la sombra
Se puede elegir expresarlo en cualquiera de las forma permitidas (hexadecimal o rgba).  En el ejemplo, la expresada en valor rgba (rgb+canal alpha de trasnparencia)
Y en caso de no declarar un valor del color, toma el de la propiedad color.
2º Valor: Desplazamiento horizontal de la sombra (offset)
Puede ser un valor positivo o negativo y estar expresado en cualquier unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.
3º Valor: Desplazamiento vertical:
Aplica lo mismo que en el anterior, pero en sentido vertical. Valor positivo hacia abajo, negativo hacia arriba.
4º Valor: radio de desenfoque
En inglés “Blur Radius”. Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son interpretados como Cero (0).
5º Valor: Distancia de propagación (opcional).
Otro valor de la longitud, puede ser positivo o negativo, y define hasta donde se propagará la sombra (más allá de lo definido por offset). Un valor negativo hará que la sombra sea más pequeña, más comprimida.
6º Valor: Inset/outset (opcional)
Dos posibles valores, siendo outset el valor por defecto. Esta propiedad marca hacia dónde se creará la sombra. Inset: se crea en el interior del elemento, outset por fuera de él. Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Compatibilidad con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de CSS y hasta que empiece a recomendar su implementación los clientes web basados en Gecko y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de prefijos.
Para Opera podemos utilizar box-shadow en las versiones más moderas,  sin ningún inconveniente.

Atributo box-shadow para navegadores basados en motores de renderizado Gecko, como Firefox:  De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: #090 1px 1px 0px;

Atributo box-shadow para navegadores basados en moteres de renderizado WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: #fc8 3px 3px 1px;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow, así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

En el caso de Internet Explorer, de manera nativa solo es interpretado a partir de la versión 9 en adelante. Si se quiere hacer efectos de sombra en versiones inferiores del IE, se puede hacer uso de filtros específicos de Microsoft (Shadow Filter), pero no es la mejor ni la más recomendada práctica.

Ejemplo:

.shadow {
box-shadow: #111 3px 3px 4px ;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135)";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135);
}

Generadores online

Estos son solamente algunos:

http://css3gen.com/box-shadow/
http://westciv.com/tools/boxshadows/index.html

Referencia oficial W3C

http://www.w3.org/TR/css3-background/#the-box-shadow