Fuente: Floridi, L. (2009). Web 2.0 vs. the Semantic Web: A Philosophical Assessment. Episteme, 6(1), 25-37.

Web 1.0

Web 2.0

Fuente: https://www.seoclerk.com/pics/272768-1bGSuq1411804399.jpg

Web 3.0

Web 4.0

Responsive

Accesible

Web 5.0

Web 6.0

Web 6.0

Fuente: Cisco Netcad

¿Porqué CSS?

• Cambios de apariencia sin alterar contenido
• Definición de estilos en las páginas web guardados en archivos externos
• Adaptación a diversos dispositivos

<link rel="stylesheet" type="text/css" href="mystyle.css">

Sintaxis

¿Cuál es la diferencia entre Margin y Padding?

Margin

vs

Padding

¿Cuál es la diferencia entre Border y Outline?

Border

vs

Outline

Font Size

Las unidades de medida para el tamaño puede ser:

• px (pixeles)
• em (tamaño estándar, mantiene el aspecto en diversos dispositivos)
• vw (relativo al tamaño de la ventana)
• % (relativo al tamaño de su contenedor)

Posiciones

Puede ser:

• static: Por defecto
• relative: Puede separase del contenido que lo rodea
• fixed: Fijo en una posición de la pantalla
• absolute: Fijo en una posición de la página
• sticky: Se fija en una posición del scroll del usuario
• float: Indica la alineación del objeto, puede ser right, left, none, inherit

Ejemplos

Transiciones, Transformaciones y Animaciones  

Ejemplos Transiciones

Ejemplos Animación

Variables

:root {
    --main-bg-color: coral;
    --main-txt-color: blue; 
    --main-padding: 15px; 
}

#div1 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);
}

#div2 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);
}

Media Queries

Ejemplo

Permite aplicar estilos particulares antes diversas características de los dispositivos, como tamaño de pantalla, profundidad de color, orientación de la pantalla y luminosidad  del ambiente

Referencia

Responsive Frameworks

Bootstrap: basado en jQuery y javascript, mejor look and feel

W3.CSS: usa CSS nativo, mejor rendimiento

Sintaxis

• Los espacios en blanco se ignoran
• Sensible a mayúsculas y minúsculas
• No se define el tipo de variable
• No es obligatorio terminar con ";", pero se recomienda

Ejemplo 1

Ejemplo 2

var mensaje = "gana la de fuera";
 
function muestraMensaje() {
    mensaje = "gana la de dentro";
    alert(mensaje);
}
 
alert(mensaje);
muestraMensaje();
alert(mensaje);

Tipos de Datos

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object
var cars = ["Saab", "Volvo", "BMW"];            //Array
//Objects + Arrays = JSON (Javascript Object Notation)

var variable1 = true;
variable1.toString();  // devuelve "true" como cadena de texto

var variable2 = "34";
parseInt(variable2);  // devuelve 34

Eventos en Javascript

Fuente: https://www.w3schools.com/js/js_events.asp

Objetos Nativos de JS

• Math
• Date
• Array
• Random

• document => DOM (Document Object Model)
• window => BOM (Browser Object Model)

Condicionales y Ciclos

Los condicionales y ciclos en JS se comportan de igual manera que en Java. (if, else, else if, switch, for, do .. while, while)

La única excepción es la sentencia for/in, que recorre las propiedades de un objeto

Ejemplo

Ejercicio (5%)

• Realizar una página web personal, usar pseudo-class y pseudo-element.
• Incluir al menos el uso de un objeto nativo de Javascript y manejo de eventos.
• Usar un formulario con validadores
• Usar al menos una transición CSS y Grid View
• No usar un template de un tercero

Bonus (+2): Averiguar sobre constructores, prototipos, modulos y classes en JS

Historia

• Creado en el año 2000
• Creado por Alex Hopmann desarrollador de Exchange 2000
• Basado en el objeto XMLHttpRequest

Y esto es apenas el comienzo ...

Funcionamiento

Fuente: Wikipedia.org

Frameworks

Fuente: Google Trends

¿Qué es?

• Librería Javascript para facilitar la programación con Javascript
• Hacer más con menos código
• Facilita especialmente el uso de AJAX y del DOM
• Librería cross-browsers

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Sintaxis

$(document).ready(function(){
//$(function(){

   // jQuery methods go here...
   //$(selector).action()

   // Examples
    
    //$(this).hide() - hides the current element.

    //$("p").hide() - hides all <p> elements.

});

Traversing

CSS pseudo-classes

Selectores jQuery

+

Reto(+2): Realizar el ejemplo mediante pseudo-classes CSS 

Eventos jQuery

Reto (+5): Descubrir como sustituir el blur de jQuery con CSS y encontrar cual es más eficiente en términos de tiempos de respuesta

Efectos jQuery

jQuey + Ajax

Las principales funciones son:

• load
• get
• post

¿Qué es?

• Framework basado en Javascript que permite la creación de aplicaciones web, móviles y desktop, con un "alto rendimiento"
• Combina el uso de templates declarativos, inyección de dependencias, herramientas de extremo a extremo y buenas prácticas

Fuente: https://angular.io/guide/architecture

Ejemplo