atralice/Clase1.md

## Clase1.md

      
    Raw
  

              Clase1.md
            
          
    Repaso Clase I

HTML: Lenguaje de marcado, se utiliza para armar la estructura en donde va a estar el contenido de una página web. Un Documento HTML  está formado por conjunto de elementos llamados Tags HTML. El browser es el software encargado de leer el código HTML y generar lo que finalmente vemos en una página web.
Tags: Las tags identifican a un elemento HTML, su sintaxis en general es la siguiente:
<nombre>  </nombre>

Existen casos donde no es necesario cerrar el tag

Hay una serie de tags obligatorias para el formado de un documento HTML:
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset=utf8>
	</head>
	<body>
	</body>
</html>
Dentro de <head> va meta información (no se ve en la página).
Dentro de <body> va lo que finalmente vemos en el browser.
Existen muchas tags HTML, podemos ver una lista completa aquí, sin embargo en general vamos a usar un subset de ellas que son muy comunes.
Las tags pueden estar anidadas formando estructuras más complejas, como por ejemplo una lista:
<!DOCTYPE html>
<html>
	<head>
		<title>PESTANA</title>
		<meta charset=utf8>
	</head>
	<body>
		<h1>Título</h1>
		<div>
			<p>Paragraph</p>
			<h2>Header</h2>
		</div>
		<ol>
			<li><i>Uno</i></li>
			<li><del>Dos</del></li>
			<li><b>Tres</b></li>
		</ol>
	</body>
</html>
Atributos

Dentro de cada tag o elemento HTML, puede haber ciertos atributos que van a modificar su comportamiento. En algunos casos estos atributos son obligatorios para el correcto funcionamiento del elemento, o a veces nos serviran de meta información ( hoy veremos un caso de estos ).
Los atributos son un conjunto de nombre y valor que van dentro del tag de apertura. Por ejemplo:
<a href='http://www.google.com'>Link a Google</a>

<img src='imagenes/doge.png'>
El tag <a> es usado para crear un link. Este necesita saber cúal va a ser la dirección a donde me va a llegar el link. Ese dato lo vamos a escribir en un atributo llamado href dentro del tag de apertura de <a>.
De la misma forma, el tag <img> necesita conocer donde se encuentra la imagen que queremos que muestre. Este dato lo vamos a colocar dentro de un atributo llamado src dentro del tag <img>.

Como veremos existen muchos atributos distintos, algunos son comunes para todos los elementos y otros sólo tienen sentido en algunos tags particulares, como por ejemplo el atributo href.

Estilos

Habiamos visto que según el tag, el browser nos mostraba el contenido con un 'Estilo' distinto. Por ejemplo:

si usabamos <h1> veiamos que el texto se hacia grande y dejaba un espacio hacia arriba y abajo del mismo.
<i>: Ponia el texto que estaba adentro del tag en italica.
<b>: Ponia el texto en negrita.
<del>: Tachaba el texto.

Tambien vimos donde podemos examinar estos estilos: En el Chrome Developer Tools ( Herramientas de desarrollador del explorador), en el tab que dice 'Styles'.
Ahora veremos en detalle de donde vienen essos estilos, y cómo podemos hacer para darle nuestros propios estilos a cada elemento HTML.

  
## Clase2.md

      
    Raw
  

              Clase2.md
            
          
    Repaso clase II

Estilos por defecto

El browser asigna estilos por defecto a algunos tags, por ejemplo:

<h1> está en negrita y tiene el doble de tamaño de letra que otro texto.
<b> Tiene todo su contenido en negrito.
<i> tiene su contenido en itálica.

Podemos ver los estilos por defecto en las herramientas de desarrollador, están bajo el nombre de user agente stylesheet.


El user agent vendría a ser el browser.

CSS (Cascading Style Sheets)

Para darle estilos a nuestos elementos aprendimos un nuevo 'lenguaje': CSS.
Este consiste en una serie de reglas que luego son interpretadas por el browser para darle estilos a los elementos html.
Cada regla consiste en un par nombre-valor, separados por : (dos puntos):
background-color: red;
color: #FAFAFA;
font-size:13px;
Vimos que habia muchísimas reglas CSS pero - igual que con los tags HTML - en general sólo vamos a usar un subset de ellas. Podemos ver la lista completa aquí.

Cada regla en particular va aceptar una serie de valores distintos. Por ejemplo, las que tengan que ver con un color aceptaran como valor un color, las que tengan que ver con medidas aceptaran algun valor de tamaño, etc...

Heredando estilos

También vimos que las reglas CSS se van pasando de padres a hijos del DOM (que era la representación de la página que tiene el browser en su cerebro).


De hecho, se llama Cascading porque las reglas van bajando de los padres a los hijos como una cascada.

Si una regla heredada es pisada por otra que tenga el elemento, va a ganar esta última, ya que es más específica. Las reglas heredadas las veremos en el Developers tools donde dice inherited from, y las reglas que fueron sobreescritas o pisadas las veremos tachadas tachadas:

Formas de dar Estilo

Estilos Inline

Podemos darle estilo a cada elemento HTMl, usando el atributo style, que podemos agregarla a cualquier tag:
<h1 style="font-family:verdana;color:orange;">This is a heading</h1>
Dentro de este atributo se escriben las reglas css.
Vimos que esta no es la mejor forma de dar estilos, y que además está mal visto por la comunidad de desarrolladores.
Tag Style

Para poder separar el contenido de los estilos, y ordenar las reglas CSS existe el tag <style> que va dentro del <head> del documento HTML.
<html>
  <head>
  <style>
    h1 {
      font-family: verdana;
    }
    p {
      color: green;
    }
    i {
      font-size: 300%;
    }
    #primary {
      font-size: 40px;
      text-align: center;
      font-family: 'Times New Roman';
    }
    .important {
      color: orange;
    }
  </style>
  </head>
  <body>
  	...
  </body>
 </html>
Selectores

Para poder hacer referencia a los elemento HTML del documento desde el tag <style> usamos los selectores CSS.
Existen distintos tipos de selectores, vimos tres de ellos:

Nombre del tag: podemos hacer referencia a todas los elementos que sea del tag del selector.
ID: Va a hacer referencia al elemento HTML que tenga como atributo id al nombre del selector. Para diferenciarlo de los demás selectores se le agrega un # adelante.
Clase: Hará referencia al o a los elementos que tengan como atributo class al nombre del selector. Para diferencialos anteponemos un ..

 tag {
 	reglas...;
 }

 #id {
  reglas...;

 }

 .clase {
 	reglas...;
 }

  
## Clase3.md

      
    Raw
  

              Clase3.md
            
          
    Repaso clase III

Elementos Inline y Blocks

Los elementos de tipo block ocupan todo el ancho posible, y no dejan que nadie se posicione a su lado. Algunos ejemplos de elementos block son los <p> y <h1>.
Por el contrario, los elementos de tipo inline ocupan lo mínimo indispensable, y dejan entrar a su lado a quienes quepan. Algunos ejemplos serían: <i>, <b>, <img>.
Div y span

También vimos que para poder separar mejor el contenido y tener más flexibilidad a la hora de dar estilos necesitamos de elementos que por defecto no tengan estilos definidos por el browser. Esos elementos son los <div> y los <span>:

Div: Es un elemento tipo block, nos va a servir para separar secciones o bloques de contenido de nuestra página. No tiene ningún estilo definido de antemano.
Span: Es un elemento tipo span, no tiene estilos por defecto. Nos sirve para envolver elementos sin generar nuevos saltos de lineas ni ocupar espacio, por ejemplo, para envolver texto dentro de un párrafo.

Modelo de Caja

Vimos que para CSS y el browser, todos los elementos se tratan de cajas. Podemos ver estas cajas  el developers tool seleccionando cada elemento. Para dar las dimensiones de estas cajas vimos nuevas reglas css:
;

padding: Es el espacio entre el contenido y el borde, o sea hacia adentro de la caja. Podemos setearlo de la siguiente manera: padding: 20px.
border: Es el borde de la caja, para setear esta regla tenemos que darle un tamaño, un estilo y un color: border: 2px solid red;.
margin: El margen es el espacio hacia afuera de la caja, despues del borde. Ningún otro elemento podrá ocupar ese espacio. Lo definimos así: margin: 30px.


Si escribimos sólo una medida, se interpreta que todos los costados de la caja tendrán esa medida. Podemos especificar cada lado usando una regla en particular, por ejemplo: margin-left: 20px o padding-bottom: 2px.
También podemos hacerlo en una sola linea, según la cantidad de medidas que pasemos se interpretada de distina manera:

margin: 25px 50px 75px 100px;
        top right bottom left
margin: 25px 50px 75px;
        top: 25px
        right y left: 50px 
        bottom: 75px;
margin: 25px 50px;
        top y bottom: 25px
        left y right: 50px
BorderBox vs ContentBox

Vimos que hay una propiedad muy importante, llamada box-sizing, que le va a decir al browser de qué manera medir la caja.
Content-Box le indica al browser que si le decimos la caja mide X, entonces le estamos diciendo que el contenido (lo de más adentro) mide X, por lo tanto el tamaño final de la caja será de X más el padding, border y margin (si hubiese).
Bordex-Box le indica que el tamaño Total de la caja es X. Es decir que el tamaño del contenido se va a ajustar de tal forma que el contenido más el padding, margin y border (si los hay) sume X.


En la imagen vemos dos divs que tienen definido la misma height y width y los mismos borders, margin y padding. Pero tienen distintas box-sizing.
Como se puede ver, el tamaño final de las cajas difiere ampliamente.

Selectores Complejos

Vimos nuevos tipos de selectores CSS, que nos permiten seleccionar más de un elemento a la vez, o ser más específicos en la selección:


Selector Universal: Usando el * hacemos que esas reglas se apliquen a todos los elementos del documento.


Más de un selector: Podemos aplicar las mismas reglas a varios selectores, separándolos por coma:
h1,h2, p, a{
  reglas...
  }

Esto le aplicaría las mismas reglas a todos los h1, h2, p y a que haya en el documento.


Tag más clase: Podemos seleccionar elementos que sean de una clase en particular, simplemente concatenamos el nombre del tag con el nombre de la clase. Por ejemplo, queremos seleccionar sólo los p que sean clase importante:
 p.importante {
  reglas...
 }


Selector de Hijos: Podemos especificar elementos que sean hijos directos de otros elementos. Por ejemplo, queremos seleccionar todos los elementos a que sean hijos directos de un p:
p>a{
  reglas...
}


Selector de Descendientes: Muy parecido al anterior, pero con este podemos seleccionar elementos que sean descendientes (es mas general), o sea que no necesariamente sean hijos:
div.hola p{
  reglas...
}
En el ejemplo, estamos seleccionando cualquier p que tenga como ancestro (no importa cúan arriba en el árbol), un div de clase .hola.


Css externos

Por último, vimos la necesidad de utilizar un mismo estilo en varias páginas, para que todas mantengan una uniformalidad visual. Para lograr eso, extraemos los estilos del archivo html, de manera que pueda ser independiente del mismo.
Ahora para usarlo vamos a importarlo usando un nuevo tag: link, que va dentro del <head> y le indica al browser que tiene que incluir lo que esté en el archivo al que se haga referencia en el atributo href:
<head>
    <link href="styles.css" rel="stylesheet">
</head>
De esta forma, podemos compartir los mismos estilos a varios documentos HTML.

  
## Clase4.md

      
    Raw
  

              Clase4.md
            
          
    Repaso Clase 4

Formularios

Vimos que los formularios son la forma de recibir datos de los usuarios. El mismo tiene un elemento HTML llamado <form> y dentro tiene varios elementos llamados inputs que son los encargados de recoletar las información que queremos recibir. Luego al submitear (enviar) el formulario, se genera un mensaje HTML que va a la dirección especificada en el atributo action y lleva adentro todos los datos que el usuario cargó. El siguiente es un ejempolo de un formulario con varios inputs:
<form action="form-responses/new" method="POST">

  <input type="text" name="firstname" value="default" size="100" autofocus>
  <input type="password" name="pswd">
  <input type="email" name="userEmail" placeholder="hello@site.com">

  <input type="radio" name="weird" value="code-blue" checked><span>pick this!</span>
  <input type="radio" name="weird" value="code-red" checked><span>or pick this</span>

  <input type="checkbox" name="optin" value="trusting" checked>You agree to everything
  <input type="checkbox" name="optout" value="skeptical" disabled>Wait, what?

  <select name="car">
    <optgroup label="Swedish Cars">
      <option value="boring">Volvo</option>
      <option value="cool">Honda</option>
    </optgroup>
  </select>

  <textarea name="user_message" rows="8" cols="40"></textarea>
  <input type="submit">
</form>
Vimos que hay muchos tipos de inputs y que los vamosa  definir a través del atributo type dentro de los mismos y que llevan un atributo name qué será el nombre con que le llegará ese dato al servidor (el que esté definido en action). Vimos que algunos necesitan de algunos atributos extras para funcionar, como por ejemplo: <radio> y <checkbox> necesitan de atributos value, ya que ellos no permiten ingresar datos sino seleccionar entre un par o varios.
Además vimos que existen varios atributos que cambian el comportamiento de los inputs, por ejemplo:

autofocus: Pone en foco al elemento que lo tenga (si lo tienen más de uno elije el último).
checked: Sirve para los checkboxs y los radio, si está seteado este atributo entonces el elemento aparecerá como activa ( o cliqueado ).
disable: Este atributo va a hacer que el usuario no pueda interactuar con el elemento, será de solo lectura.
placeholder: Dentro del input (si tiene texto) mostrará un texto en gris que se reemplazara automáticamente cuando el usuario haga foco en ese elemento.


En realidad existen muchos más, igual que siempre: sólo vamos a usar una pequeña porción de todos!

Pseudo Selectores CSS

Vamos a usar los pseudo selectores para poder seleccionar elementos HTML que además cumplan una condicion ( o estén en un estado particular ). Los pseudoselectores se agregan a los selectores normales a traves de dos puntos :. Por ejemplo: a:hover {...}.
Vimos los siguientes pseudo selectores:


:hover : La regla se va a activar en el elemento sólamente cuando el usuario tenga el mouse sobre ese elemento. Por ejemplo, si queremos que los links cambién de color cuando el usuario pose su mouse hariamos:
 a:hover{
 	color: SpringGreen;
 }


:focus: La regla se va activar cuando estemos haciendo foco en el elemento. No todos los elementos son susceptibles a este estado, en general lo son los lugares donde podamos ingresar texto. Por ejemplo, queremos que el input que esté en foco esté resaltado:
 input:focus{
 	background-color: red;
 }


:active: Se activa cuando el elemento está activo, por ejemplo un botón cuando es presionado. Hay pocos elementos susceptibles a este selector. Por ejemplo, quiero que un botón se vuelva amarillo cuando lo clickeo.
 button:active {
 	background-color: yellow;
 }


Existen otro pseudoselectores como :link, :visited. :empty, etc. Podemos ver una lista completa y sus descripciones aquí.

Layout

Por último vimos cómo posicionar las cajas ( elementos HTML ) de manera más compleja.
Para eso vimos la regla position de css. Esta puede tomar los siguientes valores:

static: Es el valor por defecto, cuando ponemos un elemento y no especificamos su position, tiene este valor. Los elementos se posicionan de la forma que conocemos, unos arribas de otro si son blocks o al lado si son inline.
relative: El elemento se va  a posicionar con respecto a donde hubiere ido si hubiese tenido position static. Vamos a usar top, left, bottom, y right, para darle el offset (cuánto queremos que se mueve y en qué direccion) al elemento.
fixed: El elemento se posiciona con respecto al viewport, o sea a la ventana del broswer. Por lo tanto para nosotros va a parecer que está pegado en un lugar de la pantalla, inclusive cuando scrolleo se mantiene en la misma posición. Estos elementos salen del flow de la página, es decir que para los demás es como si no estuviera.
absolute: Este posicionamiento depende del posicionamiento de otro elemento. Ya que toma su ancla (desde donde va a medir el offset), en el primer elemento antecesor que esté posicionado (que no tenga position static). De ahí se comporta cómo el fixed, ya que sale del flow de la página.


Acá van a encontrar el detalle de cada valor que puede tomar.

Por último vimos la regla float, que lo que hace es hacer que un elemento ocupe lo menos posible, y se mueva todo lo que pueda a la izquierda o a la derecha de su contenedor. Si ponemos varios elementos flotando  van a ocupar el espacio que puedan uno al lado del otro, cuando no entre el último, se irá para abajo.

  
## Clase5.md

      
    Raw
  

              Clase5.md
            
          
    Repaso Clase 5

Frameworks CSS

Un framework es un conjunto de código que alguien escribrió por nosotros que apunta a resolver problemas que aparecen muy frecuentemente. En este caso vimos cómo se ve un Framework css.
Básicamente es un archivo de texto donde se encuentran definidas muchas reglas css. Dentro se utilizan clases que luego serán usadas por nosotros dentro de nuestro HTML para darle el estilo visual definido por el framework.
Para incluirlos simplemente bajamos ese archivo y lo agregamos a todos los documentos HTML que necesitemos:
<link rel="stylesheet" type="text/css" href="minimal.css">

En el código de arriba incluí el framework minimal.css, lo tenía previamente bajado y estaba en la misma carpeta que mi documento HTML.

Distintos Frameworks

Como todo en el mundo de programación, vienen frameworks de varios sabores. Los hay super simples, y también muy complejos. Pero hay algunas cosas que todos tienen en común.
CSS Reset

Los Reset CSS son un conjunto de reglas CSS que busca minificar las diferencias visuales entre distintos browsers. Consisten en definiciones de cosas básicas que en general los desarrolladores no incluyen y que son diferentes entre browser y broswer. Por ejemplo: box-sizing, el margin del body, etc.
En principio se incluia una hoja de estilo de Reset en los proyectos, ahora estas vienen embebidas en los frameworks.

Uno de los resets CSS más famosos de la época, el de Meyer.

Grid System

El grid system son una serie de reglas que nos van a permitir darle el layout a nuestra página. En general los framework nos dan un elemento de clase row, que podremos separar en columnas.
En general cada row se divide en doce columnas imaginarias, y nosotros podemos armar columnas usando uno o mas de esos doce espacios. Los nombres de las clases pueden cambiar de framework en framework pero el concepto es el mismo.
<div class='row'>
	<div class='col-md-4'></div>
	<div class='col-md-2'></div>
	<div class='col-md-6'></div>
</div>
Con el código de arriba (nombre de clases de bootstrap), lograriamos tener un layout de una fila y dentro una columna que ocupa 1/3 de la fila, la segunda ocupa 1/6, y la tercera 1/2. Si sumamos lo que ocupan las tres columnas vemos que llegamos a 1.

Existen frameworks que no dividen cada row en doce columnas, como por ejemplo este.

Componentes

Algunos frameworks dan un paso más y nos ofrecen, ya no sólo reglas CSS, sino una combinación de HTML, CSS y JS de tal forma que tengamos un componente funcional de la página.
Hemos visto que bootsrap nos ofrece una barra de navegación, un jumbotron, un carrousel de imagenes, etc...
Lo bueno de esto que podemos copiar y pegar y vamos a tener un lindo componente, que tal vez nos llevaría horas armar por nosotros mismos.

Ahora que los conocen van a empezar a verlos en todos lados en internet!

Algunos Frameworks Famosos:


Bootstrap
Foundation
Semantic
Pure
Materialize
Muchos más