Introducción a Frameworks Frontend

Name: Introducción a Frameworks Frontend
Uploaded: 2016-09-27T20:00:00+00:00
Duration: 18 min 28 s
Description: En este curso veremos los Frameworks Frontend más populares de la industria. Recuerda: Un framework es la combinación de elementos HTML, CSS y JS

Clase 3 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

En este curso veremos los Frameworks Frontend más populares de la industria.

Recuerda:

Un framework es la combinación de elementos HTML, CSS y JS

David Camacho

student•

Existen varios framework Frontend, como Bootstrap, Foundation, Material UI, Material CSS. Basiscamente un framework frontend es la combinacion de reglas HTML, elementos de html, estilos de css, clases como media queries y un poco de JavaScript.

HTML para organizar el contenido, CSS para agregar estilos visuales a nuestro sitio web, JS para agregar comportamiento, funcionalidades como modals o cualquier cosa que agrege una animacion o algo programatico al sitio.

Estos frameworks muestran y interactuan con el usuario de manera distina.

Cuando Bootstrap empezo, su 1era version llamada "Twitter Bootstrap" ni siquiera era responsive, y se llamaba asi porque fue desarrollada por unos desarrolladores que trabajaban en Twitter.

En su 2da version agregaron algunas caracteristicas responsive y se podian crear sitios adaptables a distintos dispositivos.

En su 3era version ya dejan el soporte para IE 8 ya que esta version incluye contenido el cual no es soportado por IE8 y adoptan una version flat design.

En su 4ta version y la ultima version hasta ahora (la cual no es estable, pero esta muy cerca de salir) se agrega una nueva medida en el sistema de grillas, es decir un nuevo ancho de pantalla donde podemos agregar otra interfaz visual, esta interfaz visual es el XS (Xtra Small) y es para dispositivos menores a 544px.

XL > 1200

Large > 1024px

Medium > 768px

Small > 544px

XS < 544px

Pareciera que el nuevo ancho de pantalla agregado fuerae el XL (Xtra Large), pero no es asi ya que en la version 3 de Bootstrap se le daba soporte con el nombre de Large. En esta version 4 de Bootstrap se agrega es el XS para dispositivos menores a 544px y se le cambia el nombre a lo que antes era Large y se le asigna el nombre de XL.

Tambien Bootstrap en su version 4 agrega una nueva caracteristica llamada: Sistema de Grillas Flex, basicamente se trata de la organizacion de todo el contenido en un sitio web y de manera que lo dispongamos en filas y columnas que utilizan una caracteristica de la ultima version de CSS3 llamada Flexbox, Flexbox nos permite alinear tanto vertical como horizontalmente nuestros elementos visuales en nuestro sitio web, esto es una ventaja grandisima ya que alinear dos elementos verticalmente era algo muy tedioso cuando no existia Flexbox, a su vez Flexbox nos permite asignar un ancho automatico a las columnas, es decir que vamos a tener un sistema de grillas que admite hasta 12 columnas por cada fila, y podemos asignarle un valor de cuanto queremos que ocupe cada columna y en cada dispositivo. Ejemplo: En dispositivos moviles queremos que esa fila tenga columnas de 12 de ancho, y en los monitores mas grandes podemos decidir que esa fila tenga columnas de 3 de ancho, entonces en una misma fila si son 3 de ancho y entran 12, entrarian 4 de esas columnas.

Mientras que con el Sistema de Grillas Flex, las columnas pueden repartirse automaticamente ese ancho que tienen disponible, si colocamos 5 columnas automaticamente Bootstrap se encarga de disponer los elementos en 5 columnas, calculando automaticamente su ancho.

Bootstrap en esta version 4 deja de utilizar Less como pre-procesador y empieza a utilizar Sass.

En esta nueva version empieza a utilizar botones con borde y texto de distinto colores, pero sin color de fondo.

Uno de los desarrolladores de Bootstrap publico un Tweet en el cual indica que Bootstrap 4 va a utilizar SCSS es decir archivos sass, pero en su version 5 (v5) va a utilizar PostCSS.

Foundation: Bootstrap es el primero de estos Framework Frontend que aparece, sin embargo Foundation le sigue y adquiere mucha comunidad en la industria empresarial. Ambas sirven para lo mismo, que es construir sitios webs agilmente, rapidamente y facilmente, disponibles en cualquier dispositivo web sin importar la resolucion de pantalla, lo que cambian son clases, elementos html, funcionalidades y componentes que nos ofrece. Ofrece varios componentes mas que Bootstrap.

Foundation 6: Estas son las caracteristicas principales...

50% en reduccion de codigo: Esto hace que nuestro sitio cargue 50% mas rapido en esa libreria, esto es una ventaja muy considerable con su version anterior.

Flex Grid: Incorpora un sistema de grillas tambien flex, con las mismas caracteristicas que presenta la grilla flex de bootstrap y a demas nos permite ordenar nuestros elementos dentro de la grilla para distintas resoluciones de una manera mucho mas facil que la de bootstrap, simplemente poniendo un numero de orden.

Motion UI: Nos permite incorporar en nuestro sitio web un monton de animaciones que se ve muy bien y incorpora mejoras en la Experiencia de usuario al utilizar un sitio web.

ZURB Development Stack: Basicamente es todo un entorno de desarrollo alrededor de ZURB que nos permite crear sitios web aun mas rapidos, ir desarrollando y ver reflejado en el navegador todos esos cambios que existen, tambien nos permite un entorno en el cual podemos dividir nuestro sitio web en plantillas, basicamente es que podemos separar el contenido y unirlo en las nuevas paginas. Ejemplo: Podemos dividir el header con el logo, titulo, entre otros. Tambien dividimos el Footer con su informacion de contacto, politicas de privacidad, terminos de uso, entre otros. Y en las otras paginas solamente tenemos que agregar el header y el footer, de esta manera ahorramos mucho codigo, es como los include en php.

Luis Arturo Cardenas Bustamante

student•

Excelente aporte

Juan Barboza

student•

Excelente extracto de la info del video.

Esteban Torres

student•

son frameworks o librerias? cual es la diferencia?

Ricardo Azpeitia P.

student•

Frameworks

¿Cual es la diferencia entre framework y librería?

En términos prácticos, un framework puede usar varias librerías.

Sacha Lifszyc

teacher•

Framework es algo más conceptualDa el contexto para escribir código siguiendo ciertas reglas, en este caso de organización de elementos HTML en el DOM, clases de CSS y JS. Es como la función que cumple una librería

Y podríamos decir que la librería son todos los archivos de código que componen una funcionalidad o varias. En este caso un framework. Pero jQuery no es un framework y sí una librería.

Me expliqué bien?

Eduardo Abad Tinoco

student•

pues empecemos :D

Nehemias Lopez

student•

Solo he usado Bootstrap, veremos que onda con sus pares...

Jorge Luis Vilca Venegas222

student•

Vengo con todas las intenciones de aprender :D!

Saludos.

Sacha Lifszyc

teacher•

a darle, éxitos! 💪💪💪

Jhonatan Ferney Ospina

student•

Que genial este curso!!

Abrahamzick Orozco Zambrano

student•

Voy con toda a aprender todo lo posible y con disposición y actitud

Gersom Hernandez Ramos

student•

Lo más divertido sera usar el sistema de plantillas que ofrece foundation para las paginas estaticas

EDISON NUÑEZ

student•

Existira algun relacion de los frameworks con postcss o son totalmente aislados.

Gerardo Nava Pereda

student•

Versión 5 de Bootstrap supuestamente estará usando PostCSS. Es decir nos estamos “adelantando” a la que va a llegar …

Patricio Yumbillo

student•

Yo empece con Boostrap es genial

Edwin Alberto Equihua Ochoa

student•

si alguien me contesta seria muy amable, es mejor tomar todo este curso o tomarlos ya individuales porque según datos al inicio del curso ya se actualizo.

Sebastian Barberans

student•

Te esplicas de maravilla Sacha

carlos leon

student•

Excelente manera de explicar.

Daltron Web

student•

"A por ello" dirían del otro lado del charco

Daniel Rodrigo Lara Sanchez

student•

Yo uso bootstrap y materialize :P

Gonzalo Torres

student•

Josue Alejandro Torres Gonzalez

student•

Pase 2 años aprendiendo Gumby, y deje pasar un poco Boostrap ><!! Ahora me tengo que poner al dia en este framework

Gerardo Nava Pereda

student•

MATERIALIZE CSS
MATERIAL-UI
SUSY
BOOTSTRAP3
BOOTSTRAP4
FOUNDATION

Marco Elizalde

student•

Frameworks Frontend

Es la combinación de elementos de HTLM(para organizar el contenido), estilos de CSS (para dar estilos) y se incluye un poco de JavaScript (agrega comportamientos).

* Bootstrap V 4
* 
	* Sistema de griilla con Flex
	* Deja de utilizar 'less' como sistema de preprocesador, ahora utiliza sass
	* Agrega nuevo estilos para botones 

* Fundation 6
* 
	* Reduce su código al 50%
	* Flex Grid
	* Motion UI: Nos permite incorporar muchas animaciones
	* ZURB Development Stack: Nos permite crear sitios web rápido

Alexander Valencia

student•

que buena introduccion

Introducción a Frameworks Frontend

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman