Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 8H : 47M : 45S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Introducción a Frameworks Frontend3/45

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

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.

son frameworks o librerias? cual es la diferencia?

pues empecemos :D

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

Vengo con todas las intenciones de aprender :D!


Saludos.

Que genial este curso!!

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

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

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

Yo empece con Boostrap es genial

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.

Te esplicas de maravilla Sacha

Excelente manera de explicar.

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

Yo uso bootstrap y materialize :P

:)


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

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

que buena introduccion

Genial!

Emocionado de empezar este curso. Ganas de aprender!

Excelente, más aun cuando se trata de aprender y de atualizarce en estas tecnologias recientes. 

Cuando utilizar Bootstrap o Foundation, que proyectos se aconsejan utilizar en proyectos

Excelente explicación…

Hola que me recomienda aprender primero Bootstrap o Foudation

que soporte de explorer tiene Bootstrap 4 ?

muy buena explicacion

Este curso de verdad se presenta muy emocionante y dado por un tutor que sabemos es todo un profesional y experto en las variantes de JavaScript!

Hasta ahora solo he utilizado Bootstrap, pero vamos a mejorar y a conocer Foundation.

Material UI aún está muy en pañales pero Foundation se ve muy bien, algunos críticos dicen que tiene algunas facilidades en su sistema de grillas que bootstrap no tiene, seguro tocara el tema Sacha.

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.

son frameworks o librerias? cual es la diferencia?

pues empecemos :D

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

Vengo con todas las intenciones de aprender :D!


Saludos.

Que genial este curso!!

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

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

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

Yo empece con Boostrap es genial

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.

Te esplicas de maravilla Sacha

Excelente manera de explicar.

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

Yo uso bootstrap y materialize :P

:)


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

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

que buena introduccion

Genial!

Emocionado de empezar este curso. Ganas de aprender!

Excelente, más aun cuando se trata de aprender y de atualizarce en estas tecnologias recientes. 

Cuando utilizar Bootstrap o Foundation, que proyectos se aconsejan utilizar en proyectos

Excelente explicación…

Hola que me recomienda aprender primero Bootstrap o Foudation

que soporte de explorer tiene Bootstrap 4 ?

muy buena explicacion

Este curso de verdad se presenta muy emocionante y dado por un tutor que sabemos es todo un profesional y experto en las variantes de JavaScript!

Hasta ahora solo he utilizado Bootstrap, pero vamos a mejorar y a conocer Foundation.

Material UI aún está muy en pañales pero Foundation se ve muy bien, algunos críticos dicen que tiene algunas facilidades en su sistema de grillas que bootstrap no tiene, seguro tocara el tema Sacha.