Sobre mí

Hola !

Mi nombre es Filiberto, lo sé es raro pero tu llámame "Fili", tengo 18 años, vivo en México, hace un aproximadamente un año que soy parte de la comunidad platzi. Me considero una persona emprendedora, creativa, con ganas de siempre aprender más. Te doy la bienvenida a esta presentación y espero que sea de tu agrado.

Nota: Siempre mantente al tanto de la esquina inferior derecha, ya que pueden haber temas con contenido más abajo.

Sígueme y seré muy feliz

Antes de empezar

Entra al curso

Esta presentación esta pensada y hecha sólo para los estudiantes del curso de Desarrollo web desde cero de platzi, así que si no eres parte del curso ¿qué esperas?.

Dudas y Comentarios

Si tienes alguna duda, comentario, error, quieres sugerir algo, quieres algún cambio, o incluso si ves alguna falta de ortografía, manda un mensaje através de las redes sociales ó manda un tweet con el hashtag #filiweb, responderé lo más pronto que pueda.

Estructura y Etiquetas

Hay dos cosas muy importantes que aprender en esta parte.

Cómo logramos generar el contenido?

El contenido se genera gracias a un archivo HTML, el cual es muy fácil si te dejas llevar por la lógica.

El HTML lo podemos dividir en dos partes:

Header

Define la cabecera de una página o sección. Probablemente con una imagen, título de la web y alguna navegación.

nav

Esto es una sección por lo general dentro del header la cual contiene enlaces de navegación.

section

Sencillamente lo que hace es definir una sección en un documento.

article

Igual de sencillo que el section este define un artículo en nuestro documento, que podría existir independientemente del resto del contenido.

aside

Contenidos muy poco o nada relacionados con el resto del contenido de la página como publicidad, o redes sociales.

footer

Se define como el pie de la página o sección, usualmente con mensajes de derechos de autoría, información legal o información de retroalimentación.

Cuando metemos CSS empiezan a fallar las cosas, entonces ¿porqué metemos CSS?.

Es fundamental para que se vea mucho mejor la web, o el contenido, cuanto más simple sea nuestro CSS mejor la vamos a llevar, es importante organizar nuestra web primero semánticamente y después usar el contenido no semántico (CSS).

Extra (Mobile First)

Es un concepto que nace del actual cambio en la manera en que navegan las personas, consiste en diseñar para los móviles y luego adaptarlo a pantallas más grandes terminando en desktop.

Introducción a CSS

Empecemos viendo como con CSS podremos darle estilos a todo nuestro HTML, hay tres formas de integrar CSS en nuestro documento, usaremos la más común y apropiada.

Con una línea de código dentro de nuestro encabezado o head.

CSS nos permite con varios selectores trabajar para dar estilos a nuestro HTML y estos no afecten al usuario, siempre debemos intentar de que no interfiera en al acceso al contenido (HTML).

Selectores CSS

Existen varios tipos de selectores cada uno con una función, aquí tenemos los cuatro más importantes o comunes.

• Selector universal
• Selector de elemento
• Selector de clase
• Selector de ID

Selector Universal

Este funciona con todos los elementos de nuestra web, para ello tenemos que poner simplemente un asterisco y dentro de las llaves pondremos lo que se va a aplicar.

Hay que usarlos con cuidado y solo para cosas útiles, ya que afecta a todos los elementos de nutro documento.

Selector de elemento

Es tan sencillo como escribir el nombre de la etiqueta y a partir de ahí añadir lo que queremos que se aplique.

Podemos usar distintas variaciones como el tipo de letra, color, e incluso sombra del elemento.

Selector de clase

Es un selector que se va a colocar con un punto y el nombre de la clase

El nombre de dicha clase la definimos en el HTML, y todo lo que apliquemos a esa clase es lo que va a cambiar.

Selector de ID

Es un selector que se define con el signo de numeral o gato, el nombre igual se le asigna en el HTML.

Efectivamente, funcionan, pero en realidad cuando nuestro proyecto crece, tiene más selectores, y después se puede hacer un lío. La primera limitación del selector de ID es que solo podemos tener uno por página.

En cuanto a las clases, podemos tener varias.

Nota: Los selectores ID son geniales para JavaScript

Filosofía DRY

(Don't Repeat Yourself)

Es muy importante esta filosofía en CSS, cuanto más reutilicemos, será mucho mejor.

Módulos CSS

Podemos tener varios elementos dentro de otros, la ventaja de esto es que si en algún momento queremos tener una estructura igual, esto se aplicara para todo, independientemente si usa un section o un article.

Atributos del selector

Son selectores que nos permiten trabajar con diferentes atributos del selector.

Por ejemplo si tenemos un botón o un checkbox, nos permiten saber si esta activo o no esta activo.

Lo definimos en el HTML.

Usamos la nomenclatura data para saber a primera vista que eso es un atributo.

En el CSS es donde añadimos las características de ese atributo.

Selectores de atributo

Gracias a los atributos podemos decir que algo esta checked o no está checked, (activo o no activo) eso es lo que hace potente a los selectores de atributo y los hace diferentes a las clases.

Existen varios y todos muy diferentes.

Focus

Este se aplica cuando un elemento ha recibido algún evento, ya sea desde la selección del usuario con el teclado o el ratón, (por ejemplo, una entrada de formulario).

Esto significa que cuando le damos click al formulario, su fondo será azul.

Valid

Este hace presencia cuando el contenido del elemento valida correctamente según el ajuste de tipo de entrada, por ejemplo un formulario que pida un email.

Nos dice que al estar el ratón en el formulario y tenga un dato correcto, este será verde.

Invalid

Este elemento es todo lo contrario y actúa cuando el tipo de entrada es diferente.

Esto nos dice que al estar el ratón en el formulario y tenga un dato incorrecto, este será rojo.

Hay varios tipos de conectores por así decir, que nos permiten realizar acciones en ciertas situaciones o estados.

Tenemos un input de tipo checkbox con una clase toggle y un div de clase cuadrado.

Este div (Cuadrado) tiene por defecto unos estilos definidos.

Entonces lo que podemos hacer es decirle al input (toggle) que cuando este checked, el div (cuadrado) va a tener un color de fondo distinto.

Esto se aplica para todos los hermanos que estén al mismo nivel.

Otro conector hace lo mismo, solo que este se le aplicara al primer hermano y no a todos los demás, independientemente si están a la misma altura.

Float vs Display

Float

Con float teníamos un montón de cajitas y a todas ellas les dábamos un float left o un float right, técnicamente podíamos poner varias cajitas o contenedores una a lado de otras.

Los problemas que podemos encontrar con float son:

• Difícultad para organizar.
• El posicionamiento visual depende del markup (HTML).
• No podemos centrar.
• No podemos controlar las altruas en sistemas de columnas.

Todo esto creando un desiquilibrio visual en el sitio web que estamos desarrollando.

Display Table

Display table nos ayuda a nosotros a tratar el CSS, como antes ocupábamos el HTML, nosotros podemos asignarles varios tipos de display a un elemento siempre y cuando este dentro de un contenedor con display table.

Display table nos permite tener todo del mismo tamaño o con diferentes tamaños, independientemente de su contenido o cuantos sean.

El problema de display table es que cuando tenemos resoluciones más pequeñas las imagenes no bajan como con float si no que quedan ensimadas unas con otras.

Flexbox

Es un módulo de CSS de modelo flexible de caja, es súper genial nos ayuda mucho a arreglar casi todos los problemas que tenemos de maquetación.

Es muy fácil de usar solo hay que asignar la propiedad display flex al la caja contenedora y con eso ya esta.

Provee un forma más eficiente de maquetar, cubriendo espacios disponibles, expandiento elementos o encogiéndolos. Esto quiere decir que cuando yo tenga un elemento flexbox, todos los hijos tomaran sus comportamientos.

Para entender un poco mejor este concepto lo vamos a dividir en dos partes.

1.- Eje Horizontal (X)

En este eje horizontal hay una serie de características con las que podemos jugar.

Básicamente son modificables o alterables, con el

justify-content

El justify-content nos dice donde y como queremos alinear los elementos dentro de esa caja de flexbox.

El pequeño código que acabamos de ver nos dice que se van a alinear al principio (flex-start es el valor por defecto).

Sin embargo si nosotros cambiamos esa propiedad a flex-end, obiamente se va la derecha.

Algo genial es que igual los podemos centrar

Pero no solo eso, aun hay más, space-between lo que hace es meter todo el espacio sobrante entre los elementos.

Aun no acabamos, hay más ...

space-around hace lo mismo que space-between pero igual toma en cuenta el borde de la caja.

Qué pasa si los items no caben?

Por defecto los items se van a quedar todos ahí apretados, la propiedad flex-wrap es la que define el comportamiento, y por defecto es no wrap.

Sin embargo nosotros podemos cambiar eso.

2.- Eje Vertical (Y)

Es muy parecida al eje horizontal, las misma teoría, pero las alineaciones cambian un poco.

En vez de utilizar justify-contents utilizamos align-items.

Esto quiere decir todos arriba, del todo.as

Pero igual nosotros podemos alinearlos abajo, gracais a flex-end.

Incluso podemos centrar los elementos.

Pero más interesante aun, es que podemos hacer que ocupe el total de altura del contenedor.

Todo esto a sido hermoso y te aseguro que tu cabeza exploto igual que la mía, pero por ahora solo hemos tocado el contendor, ¿Qué tal si jugamos con los items (hijos)?

A los hijos podemos asignarles varias propiedades flex igual que a su contenedor (padre).

Order

Este define el orden de cada elemento, un orden concreto entre el conjunto, eso quiere dicir que nosotros podemos modificar el orden independientemente de como este escrito en el HTML

Todos ellos tiene un order de 0 por defecto.

Si el order 0 de platzi lo cambiamos a 1 se ira al final.

Para moverlo a la izquierda usamos order: -1

flex-grow

El flex-grow nos dice que cada uno ocupe lo que tenga que ocupar, es decir que su ancho sera la suma del resto de elementos.

Si tenemos un flex-grow: 2; su ancho sera la suma de dos elementos.

Practicamente nuestro primer elemento pasa a tener el ancho de los otros dos elementos.

align-self

Es muy similar a align-items pero solo se lo podemos aplicar a uno de ellos, si nostros tenemos en uno de nuestros contenedores, un align-item: flex-start y queremos que uno solo de ellos baje aplicamos align-self.

align-items para el contenedor y align-self para los hijos.

flex-basis

Esta propiedad es muy útil e interesante y quiere decir que un elemento va a tener la medida que nosotros le digamos en flex-basis, con esto los demás elementos se van a comportar en base a este.

No hay que usar siempre flexbox, hay que utilizar lo apropiado a nuestras necesidades.

Nota: No hay que usar float en nuestros documentos, causan muchos problemas.

Unidades de medida

em

La unidad de medida em hereda el tamaño de fuente de su contenedor.

Esto quiere decir que el enlace (etiqueta a) va a tener un tamaño de fuente de 16px, ya que el h1 es de 32px.

En este caso la etiqueta a va a tener un tamaño de fuente de 32px.

Esta unidad de medida es muy util, pero suele fallar y no dar un tamaño exacto cuando hay más profundidad.

• h1 Tamaño de fuente 32px
• a Tamaño de fuente 16px
• span Tamaño de fuente 8px

rem

Root em

Es igual de funcional que el em pero el tamaño de fuente depende de la raíz del documento, no en su contenedor.

La raíz de nuestro documento es el html

rem es muy útil para hacer mobile first, y practico para trabajar con nuestros proyectos.

En cuanto a em es muy útil para cuando necesitamos unidades especificas al contenedor (padre).

viewport-width

viewport-height

Nosotors podemos tener el procentaje de un valor pero igual podemos tener el ancho total de nuestra pantalla.

Podemos usar la altura total basada en el dispositivo.

El alto del contenedor va a ser el alto del dispositivo.

Igual lo podemos aplicar con el ancho.

El ancho del contenedor va a se la mitad del ancho del dispositivo.

Metodología BEM

Block -> element -> modifier

Esta metodología implica crear una especie de módulo para que sea reutilizable.

La estructura de nuestro HTML:

La estructura de nuestro CSS:

Esta es una forma fácil de identificar los elementos y no perderse en el código, pero más importante es que podemo reutilizar el código.

Tanto como h4 y span van a tener las mismas propiedades.

Pseudo selectores

Los pseudo selectores los podemos dividir en dos partes.

Pseudo Elementos

El pseudo elemento, es algo que físicamente en el HTML no existe pero lógicamente con CSS lo podemos crear.

Por el momento ahora existen cinco

Cuando nosotros tenemos un elemento podemos definir ese pseudo elemento antes o déspues.

Algo importante es que siempre debe de tener la propiedad content, aunque este vacio.

Esto nos quita el trabajo y evitamos modificar el HTML.

Pseudo Classes

De estas hay muchas y nos pueden ayudar un tipo de elemento o diferentes.

Formularios

• :checked
• :disabled
• :focus
• :hover
• :in-range
• :invalid
• :out-of-range
• :required
• :target
• :valid

Links

• :focus
• :hover
• :link
• :visited

Listas

• :first-child
• :first-of-type
• :last-child
• :last-of-type
• :nth-child( )
• :nth-child( )
• :nth-last-child( )
• :nth-of-type
• :only-child
• :only-of-type

Las pseudo classes para lista son bastante interesantes, porque nos permiten seleccionar elementos sin usar HTML o una clase.

:first-child

Selecciona el primer elemento de una lista.

:last-child

Selecciona el ultimo elemento de una lista.

:nth-child( n )

Selecciona elementos en concreto.

Por ejemplo :nth-child ( 2 ).

:nth-child( n+3 )

Selecciona elementos hacia adelante a partir de un número.

:nth-child( -n+3 )

Selecciona elementos hacia atras a partir de un número.

:nth-child( 3n+1 )

Selecciona el primer elemento y continua seleccionando cada tres elementos más.

:nth-child( 3n+2 )

Selecciona el segundo elemento y continua seleccionando cada tres elementos más.

:nth-type( 2 )

Selecciona por tipo de elemento.

Todo esto lo podemmos aplicar en conjunto y hacer grandes cosas.

Podemos usar content distintas formas

Como resultado:

Progressive Enhancement

Es algo así como avance progresivo del desarrollo.

Con porgressive enhancement lo que hacemos es tener:

• Content
• Presentation
• Client-side scripting

Nos ayuda a empezar con un contenido solido, semántico, resistente, envuelto o ardonado con un CSS y luego con un JavaScript para hacer que todo sea maravilloso.

Para emepezar tenemos nuestro HTML de toda la vida, el cual va a ser entendido incluso por esos navegadores viejos.

Posteriormente ahora agregamos un CSS y un JavaScript básico, con una interacción para el usuario.

Más adelante podemos agregar cosas aun más interesantes y bonitas, algo así como la parte cool.

No solo tenemos lo cool si no que igual tenemos el awesome que son cosas brutales y expectaculares.

Esto quiere decir que nuestro conenido siempre sera mostrado para los usuarios, no importe que navegador este usando.

• Navegadores muy viejos: HTML.
• Navegadores viejos: HTML, CSS y JS.
• Navegadores actuales: HTML, CSS y JS (Cool).
• Super Navegadores: HTML, CSS y JS (Awesome).

Aveces ocurre la necesidad de cambiar un poco de código, ya que un navegador feo no acepta alguna propiedad.

Con navegador viejo me refiero a Internet Explorer.

Para esto no tenemos que mover nuestro CSS, si no que creamos una hoja de estilos que solo funcione con internet explorer.

Esto quiere decir que si IE es menor que IE8 carge una hoja de estilos llamada: lt-ie8.css.

Fuentes y tipografías web

Nos encontramos tres maneras de adjuntar fuentes es decir añadir fuentes a nuestra web.

1) Agregar fuentes seguras

Son ese tipo de fuentes que nosotros nos garantizamos que están en la mayoría de los navegadores (Sistemas Operativos), esas fuentes que vienen por defecto en nuestros ordenadores.

Simplemente para usarlas usamos la propiedad font-family.

Si llegamos a usar una fuente que no tiene el ordenador, simplemente no la va a cargar.

Para estos casos hay que buscar distintas opciones, dependiendo el Sistema Operativo.

De esta forma nos aseguramos que todo va estar bien, independientemente que Sistema Operativo este usando.

2) Cargarlas desde un servidor

Para esto usaremos un API llamada Google Fonts, de esta forma no importa si la fuente que eligamos esta o no esta en el Sistema Operativo.

Simplemente basta con buscar la fuente que más nos agrade

Importar la fuente que elegimos.

Finalmente usar la propiedad font-family.

3) Cargarlas desde nuestro servidor

Tenemos que descargar la fuente que queramos usar y a travez de CSS empezamos a trabajar con ellas.

Es algo un tanto más complicado ya que tenemos que descargar varios tipos de formatos, con el fin de que se puedan ver en cualquier Sistema Operativo.

Aveces es necesario usar este tipo de metodo, y si te interesa saber como usarlo, da click aquí.

Responsive Media Queries

Para empezar a hacer responsive design comenzamos con el meta (viewport).

Donde indicamos que el ancho sea igual al ancho del dispositivo, al igual que mantenga la escala inicial.

Este meta viewport siempre debe estar en nuestro HTML, es muy importante tenerlo en cuenta.

Pero eso no es todo, nosotros tenemos una propiedad en CSS muy bonita (Media Queries), que estan definidos por breakpoints, es decir que definen en que momento o punto de ruptura, va afectar al resto de elementos.

Es tan sensillo como poner la palabra media y tener un tipo de salida.

Salida para pantalla:

Salida para impresión:

Salida para todo:

Una ves que tenemos nuestro media hay una pared que es el and y finalmente nuestro breakpoint.

Este media querie tiene un conjunto de reglas las cuales van a afectar desde 0px hasta 400px.

Pero igual hay otras reglas o breakpoints que podemos usar.

En este caso quiere decir que cuando nuestro móvil gire, este va a tener un color de fondo olive.

En este caso se aplica para dispositivos retina.

Hay que tener en cuenta el uso de prefijos.

Imagenes Responsive y Retina

El problema de las imágenes en la web es que tienen tres variables y estas variables son muy importantes.

Esto quiere decir que para dispositivos retina, hay que hacer un foco en la imagen, y no hacerla más pequeña, porque si no no se vera bien esa imagen o no se vera l oque queremos mostrar.

Gracias a los media queries podemos lograr hacer el foco en la imagen.

Como resultado vamos a tener una imagen completa para desktop, y un foco de la imagen, para dispositivos pequeños o smartphones.

Un problema que tenemos es cuando queremos aplicar lo mismo, pero en el HTML.

(En el HTML no tenemos los breakpoints)

En solución a este problema por el momento es usar Picturefill.

Preprocesadores CSS y SASS

Los preprocesadores CSS son una de esas herramientas que te facilitan el trabajo del día a día y que te ahorran muchas tareas repetitivas que realizas a la hora de codear CSS.

SASS

En este caso veremos el preprocesador SASS.

Para empezar necesitamos un compilador, es decir un programita que nos convierta todos esos archivos a CSS.

Para empezar creamos nuestro archivo con extensión .scss e incluimos este archivo en nuestro programita (Existen muchos), para asi compilarlo .

Todo lo que hagamos en SASS va a afectar al CSS pero no de forma contraria.

Variables

Nosotros podemos crear nuestras variables con el nombre que quereamos.

Estas variables las podemos aplicar en donde las necesitemos.

Si ese valor no nos sirve o queremos cambiarlo, simplemente hay que hacerlo en la variable.

Mixins

Los mixins es como una especie de función por así decir, que nos ayudan a resumir código.

Esto quiere decir que donde nosotros queramos aplicar todos estos prefijos solo usamos una línea de código.

Bases de desarrollo web moderno

Anteriormente las aplicaciones web eran como un trozo bastante grande que estaba muy mezcldo y no había separación de conceptos, en la web moderna se esta empezando a hacer separaciones como Backend & Frontend.

Cliente - Servidor

Un cliente realiza peticiones a otro programa (servidor), quien es el que le da un respuesta.

No necesitamos un Backend en epecifico, podemos utilizar simplemente JavaScript para tomar un JSON y dependiendo de los elementos que nos lleguen, podemos cambiar nuestra web.

La otra capa seria nuestra base de datos.

En esta base de datos se guardan cosas de nuestra aplicación, como usuarios, artículos, comentarios, etc.

Para nuestro caso vamos a aprender el lado del cliente (navegador).

Definición de JSON y API Rest

API REST

No es más que una forma de comunicarnos con nuetro Backend y aislar por completo como esta escrito, es decir que no importa si el Backend esta hecho en node, python o ruby, lo importante es que cada petición que hagamos al servidor, nos devuelva un formato de mensaje, en este caso JSON.

JSON

Se llama así porque de esta forma es como se declara un objeto en JavaScript.

Esto nos sirve para nuestra web y poder tomar datos.

No importa como nos devuelve este formato, lo que importa es nos hace más fácil la comunicación entre el Frontend & Backend.

En nuestra API REST normalmente tenemos cuatro métodos o vervos de el protocolo HTTP.

Dependiendo de la respuesta del servidor a cada método, podemos saber si ha funcionado, si hay un error, o que a pasado realmente.

JSON vs CORS

Dentro de API REST hay dos formatos para comunicarnos. JavaScript tiene el problema o incombeniente de que si estamos llamando desde una url a otra, nos va a lanzar un error.

Same-Origin Policy.

Esto significa que solo se puede acceder al DOM si el script está en el mismo origen (esquema, hostname, puerto).

Para esto hay dos alternativas:

JSONP

• Muchas APIS públicas funcionan con JSONP, necesita una función de Callback en la llamada al API.
• ej: http://api.com/recursos/?callback=MiFuncionDeCallback
• Solo Permite el método GET de HTTP.

CORS

• Permite más metodos de HTTP (GET, POST, PUT, DELETE).
• Ha de configurarse en el servidor, podemos elegir a quién dar acceso.

Pero igualmente que en JSONP esto como desarrolladores de Frontend no podemos cambiarlo, si no que hay que configurarlo en el Backend

DOM, BOM, JSON, AJAX

DOM

En el HTML al igual hay APIS una de ellas es el DOM, que se creo para que con JavaScript pudiéramos acceder a los elementos.

Es una estructura como en un árbol, en donde la raíz principal es el HTML.

BOM

Digamos que el DOM es toda la parte que hay en un navegador, pero el BOM es toda esa parte que hay afuera, digamos que es la parte que nos permite acceder a location o a history, gracias a JavaScript.

AJAX

JQUERY

Es una librería escrita en JavaScript, que nos permite ahorrar tiempo en cosas repetitivas, como añadir elementos o seleccionar elementos. Hay gente que confunde JQUERY como un lenguaje o un framework, cuando la definición correcta es librería.

Petición AJAX con JavaScript

Petición AJAX con JQUERY

Petición AJAX con JQUERY y JSON

Etiqueta Template en HTML5

Template no es más que un elemento HTML que el navegador no muestra, es decir le podemos poner estilos, entre otras cosas, pero el navegador no lo va a mostrar hasta que nosotros lo activemos.

Para nostros poder acceder al template utilizamos JavaScript.

Como resulatado lo que aria es lo siguiente:

Geolocation

Tenemos una API con la que accedemos a varios elementos ajenos o externos a lo que es nuestro HTML en la web.

En este caso es navigator.

En errorFound nos devuelve un parámetro en este caso (err) donde nos indica que tipo de error a ocurrido.

La función getCoords va a ser la que nos devuelve las coordenadas, con un objeto (position).

Dentro del position tenemos otro sub-objeto con dos variables.

Introducción a Git

Git es un sistema de control de versiones, esto quiere decir que regiustra todos los cambios realizados sobre un archivo o conjunto de archivos, a lo largo de un tiempo, de modo que en un futuro puedas recuperar versiones específicas.

Git es muy potente, las grandes empresas y profesionales lo usan. Platzi ya tiene un curso, de Git & Github para ti, donde aprenderas a trabajar como los profesionales.

Igual puedes seguir mi presentación del curso.

Conectando con API Externa

Para empezar, hay que recordar que tenemos que regístrarnos en OpenWeatherMap y así obtener nuestra key.

Una vez que tengamos nuestra key, vamos a guardarla en una variable.

Hacemos lo mismo con el enlace, donde tenemos el parametro APPID que es en donde va a ir nuestra key.

Como puedes ver concatenamos, nuestra primera variable API_WEATHER_KEY

En el siguiente paso usaremos JQuery y apartir de nuestras coordenadas obtendremos una serie de datos.