Frameworks responsive

En este post vamos a hablar de los frameworks responsive. Así que empezaremos por su definición y luego en el desarrollo del texto veremos todas las opciones que se nos ofrecen a día de hoy con respecto a estas herramientas que nos permiten desarrollar nuestras webs adaptables a todos los dispositivos.

¿Qué es un framework responsive?

Es una herramienta que nos permite realizar nuestros diseños de manera adaptable o responsive si lo denominamos en inglés. Estas herramienta permiten un desarrollo de nuestras webs más fácil de codificar y más rápido.

Así, dentro del espectro de frameworks responsive tenemos muchas opciones a elegir que veremos en el siguiente apartado.

Frameworks para responsive design

En este aparatado vamos a ver un listado de diferentes frameworks responsive que nos pueden ayudar a que nuestras web estén operativas para cualquier tipo de dispositivo o pantalla.

Twitter Bootstrap que desarrollaremos en un apartado especial para el mismo

Licencia: MIT

Twitter: http://getbootstrap.com

Repositorio: https://github.com/twbs/bootstrap

Documentación: http://getbootstrap.com/docs/4.0/getting-started/introduction/

 

Fundation

Licencia: MIT

Twitter: https://twitter.com/zurbfoundation

Repositorio: https://github.com/zurb/foundation-sites/stargazers

Documentación: https://foundation.zurb.com/sites.html

 

Skeleton

Licencia: MIT

Twitter: https://twitter.com/dhg

Repositorio: https://github.com/dhg/Skeleton/

Documentación: http://getskeleton.com

 

HTML5 Boilerplate

Licencia: MIT

Twitter: https://twitter.com/h5bp

Repositorio: https://github.com/h5bp/html5-boilerplate/issues

Documentación: https://github.com/h5bp/html5-boilerplate/blob/6.0.1/dist/doc/TOC.md

HTML Kickstart

Licencia: MIT

Twitter: https://twitter.com/htmlkickstart

Repositorio: https://github.com/vshvedov/htmlkickstart-rails

Documentación: http://www.99lime.com/elements/

 

Montage HMTL5 Framework

Licencia: Copyright (c) 2012, Motorola Mobility LLC. All Rights Reserved.

Twitter: https://twitter.com/montagejs

Repositorio: https://github.com/montagejs/montage

Documentación: http://montagejs.org/docs

SproutCore

Licencia: Copyright ©2008-2011 Apple Inc. All rights reserved.

Twitter: http://twitter.com/sproutcore

Repositorio: https://github.com/sproutcore/sproutcore/

Documentación: http://docs.sproutcore.com

SkelJS

Licencia: MIT

Repositorio: https://github.com/ajlkn/skel

Documentación: https://github.com/ajlkn/skel/blob/master/docs/skel.md

 

Gumby

Licencia: MIT

Twitter: https://twitter.com/gumbycss

Repositorio: https://github.com/GumbyFramework/Gumby

Documentación: https://gumbyframework.com/docs/

 

uiKIT

Licencia: Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com

Twitter: https://twitter.com/getuikit

Repositorio: https://github.com/uikit/uikit

Documentación: https://getuikit.com/docs/introduction

 

Semantic UI framework

Licencia: MIT

Twitter: https://twitter.com/semanticui

Repositorio: https://github.com/semantic-org/semantic-ui/

Documentación: https://semantic-ui.com

 

Kube framework

Licencia: MIT

Twitter: https://twitter.com/imperavi

Repositorio: https://github.com/imperavi/kube

Documentación: https://imperavi.com/kube/docs/quick-start/#h-development

 

YAML framework

Licencia: CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/)

Twitter: https://twitter.com/yamlcss

Repositorio: https://github.com/yamlcss/yaml

Documentación: https://github.com/yamlcss/yaml/tree/master/docs

Blueprint framework

Licencia: MIT

Twitter: https://twitter.com/blueprintcss

Repositorio: https://github.com/joshuaclayton/blueprint-css

Documentación: https://github.com/joshuaclayton/blueprint-css/wiki

 

52 framework

Licencia: https://creativecommons.org/licenses/by-sa/3.0/us/

Twitter: https://twitter.com/52framework

Repositorio: https://github.com/agrublev/52framework

Documentación: http://www.52framework.com/documentation/

Frameworks responsive con bootstrap

Apartado especial para Bootstrap

Responsive app frameworks

Una vez visto los frameworks centrados en los sites, en este apartado veremos los frameworks adaptables para app.

Estos frameworks nos ayudan en el desarrollo de nuestras apps, resultando un elemento muy útil para desarrolladores de aplicaciones.

Xamarin

Xamarin es una compañía California-basada San Francisco Microsoft-poseída del software fundada en mayo de 2011 que tiene puestas en práctica de la cruz-plataforma de la infraestructura del lenguaje común (CLI) y de las especificaciones del lenguaje común (a menudo llamadas Microsoft .NET).
Xamarin es el marco híbrido superior del desarrollo del app del móvil. Ahorra su tiempo con respecto la a reutilización de las capacidades, herramientas, equipos y la mejor parte significativa es código.

Se puede crear a través del repertorio de Xamarin y las APIs de Android así como diseñar una experiencia asombrosa gracias al SDK y el GDK de Android.

PhoneGap

Éste es el marco más popular para el desarrollo híbrido en móvil. Del equipo de Apache Cordova, el marco de PhoneGap de Adobe es una distribución open-source del entorno de Cordova. Con Phonegap, se puede reutilizar habilidades existentes del desarrollo de la tela para hacer rápidamente los usos híbridos construidos con el HTML, el CSS, y el Javascript para las plataformas múltiples con un solo código de base.

Cuestión de código

• Apache Cordova utiliza CSS3 y HTML5 para su representación y Javascript para su lógica.
• HTML5 proporciona el acceso al hardware subyacente tal como el acelerómetro, la cámara fotográfica, y el GPS.

Browsers

Sin embargo, la ayuda de los browsers para el acceso del dispositivo de HTML5-based no es constante a través de los navegadores móviles, particularmente para versiones mas viejas de Android.

Para superar estas limitaciones, Apache Cordova encaja el código HTML5 dentro de un WebView nativo en el dispositivo, usando un interfaz extranjero de la función para tener acceso a los recursos nativos de él.
Apache Cordova se puede extender con los plug-ins nativos, permitiendo que los reveladores agreguen más funcionalidades que se puedan llamar de Javascript, haciéndolo que se comunique directamente entre la capa nativa y la página HTML5.

Estos plugins permiten el acceso al acelerómetro del dispositivo, a la cámara fotográfica, al compás, al sistema de ficheros, al micrófono, y más.

Intel XDK

La Intel XDK no le prohibe los apps de la cross-platform de la estructura para cada almacén. Incluye servicios de la tela y los plugins para los apps contenido-ricos, interactivos, los apps responsivos funcionan en cualquier dispositivo. Este marco que es una gama completa de las herramientas que apoyan el desarrollo, la emulación, la prueba, eliminar errores y publicar.

HTML5

Recientemente, se han realizado algunos cambios apoyando todas las capacidades que usted ama de desarrollar los apps móviles HTML5 (Apache incluyendo Cordova) para Android, IOS, y Windows 10 UAP. Ahora han incluido las capacidades para Node.JS-based, apps de desarrollo de software de IoT.

Intel XDK nos permite realizar una inspección previa en el dispositivo que hayamos conectado, convirtiendo a esta herramienta muy útil para su propósito.

Ionic Framework

El Framework iónic es una fuente completa SDK open-source para el desarrollo híbrido de app para móviles.

IOnic Framework esta creado encima de Angular.js y de Apache Cordova, iónic proporciona las herramientas y los servicios para desarrollar apps móviles híbridos usando tecnologías Web como CSS, HTML5, y Sass.

El marco iónico es un 100% libre y es un proyecto open-source, con licencia MIT.

La lincencia MIT es una licencia que nos permite usar cualquier producto en cualquier situación. En el caso de Ionic tiene unas 120 características nativas para el dispositivo como Bluetooth, HealthKit, la huella digital Auth, y más con los plugins de Cordova/PhoneGap y las extensiones del mecanografiado.

CLI

Se puede utilizar su CLI para crear, para construir, para probar, y para desplegar sus apps iónics sobre cualquier plataforma. Gracias a Ioniocons nos permite tener centenares de iconos muy usados para este tipo de desarrollos.

Jscrambler tiene una clase particular comprensiva en cómo proteger su híbrido móvil iónico app. ¡Si usted está interesado en seguridad, usted puede desear hechar una ojeada él aquí!

Framework7

Framework7 es un marco móvil del HTML de la fuente libre y abierta desarrollar apps móviles híbridos o apps de la tela con el IOS y la mirada nativa androide y sentirse.

Se trata de una herramienta prototyping imprescindible de los apps para demostrar el prototipo de trabajo del app cuanto antes en caso de que se necesite.

Principal Objetivo

El principal objetivo del Framework7 es dar la una oportunidad de crear el IOS y apps androides con el HTML, el CSS, y el Javascript fácilmente y claramente. Este marco se centra solamente en el IOS y el diseño material de Google para traer la mejores experiencia y simplicidad.

Características

• movimiento en sentido vertical nativo,
• biblioteca agnóstica,
• animación de la transición de las páginas,
• ayuda múltiple de las opiniónes, animaciones aceleradas hardware vía CSS3,
• páginas de la ruta usando la combinación de XHR, el depositar, historia del browser
• el preloading.

Conclusión

Todos estos Frameworks son herramientas que usan los desarrolladores con el fin de optimizar su trabajo de cara a todos los dispositivos que se utilizan en el mercado. Cada desarrollador se habitúa a trabajar con una gama de estas herramientas y basa su trabajo en ella.