No es sólo texto y enlaces

la web no tiene límites

Patricia Juárez Muñoz

Ingeniera Software Senior

Licenciada en Ingeniería Informática en la Universidad de Granada (España).
Experta en el desarrollo de aplicaciones web y móviles.
Apasionada por el Front-end y la Experiencia de Usuario.

2007-2016 Freelance en empresas como 3DVista y Axesor.
2016-Actualidad Senior Software Engineer en Badger Maps.

¿Qué es la web?

Navegadores

Que son los Navegadores

Navegadores en el mercado

Chrome

56.6%

Safari

14.1%

Firefox

10.4%

Internet Explorer & Edge

8.7%

Opera

4.0%

Web Browser Market Share (December 2016)
Global Stats Counter (December 2016)

HTML

HyperText Markup Language

HTML

Code

Preview

									

No es solo texto y enlaces
La web no tiene límites

No es solo texto y enlaces La web no tiene límites

-Compuesto de elementos, aplicados a piezas de texto que permiten dar significado en un documento (como un título y subtítulo o párrafos...), lo estructura en secciones lógicas (cabecera...) y permiten incrustar contenido como imágenes o vídeos en una página. - Escrito en forma de etiquetas. - Elemento compuesto de contenido y atributos, etiqueta de apertura y cierre.


								
									No es solo texto y enlaces
									La web no tiene límites

HTML

Propiedades

CSS

Cascading Style Sheets

CSS

Code

Preview

									


	No es solo texto y enlaces
	La web no tiene límites

No es solo texto y enlaces

La web no tiene límites

- Modifiquemos nuestro ejemplo con css: - Los estilos de pueden aplicar en línea en los elementos que modifican, se pueden añadir en la cabecera mediante reglas o se puede referencias a un documento que las contenga. - El documento que contiene un conjunto de estas reglas dentro de un archivo con extensión .css se llama hoja de estilos. También se pueden poner en el mismo documento .html pero no es recomendable mezclar contenido con estilos. - Porque además de mejorar el matenimiento del código, provee más flexibilidad y control en la presentación. Por ejemplo, permite que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, o poder cambiar la presentación modificando solo la referencia a la hoja de estilos.





	No es solo texto y enlaces
	La web no tiene límites

CSS

Selectores

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with class="intro"	1
#id	#firstname	Selects the element with id="firstname"	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div, p	Selects all <div> elements and all <p> elements	1
element element	div p	Selects all <p> elements inside <div> elements	1
element>element	div > p	Selects all <p> elements where the parent is a <div> element	2
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements	2
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"	2
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"	3
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"	3
[attribute=value*]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"	3
:active	a:active	Selects the active link	1
::after	p::after	Insert something after the content of each <p> element	2
::before	p::before	Insert something before the content of each <p> element	2
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
::first-letter	p::first-letter	Selects the first letter of every <p> element	1
::first-line	p::first-line	Selects the first line of every <p> element	1
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:focus	input:focus	Selects the input element which has focus	2
:hover	a:hover	Selects links on mouse over	1
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elements with an invalid value	3
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)	2
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:link	a:link	Selects all unvisited links	1
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no "required" attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified	3
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified	3
:required	input:required	Selects input elements with the "required" attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3
:visited	a:visited	Selects all visited links	1

CSS

Prioridades

Prioridad	Tipo de origen de CSS	Descripción
1	Importancia	La anotación ‘`!important`’ sobreescribe la prioridad anterior
2	Inline	Un estilo aplicado a un elemento HTML por medio del atributo 'style'
3	Media Type	Una propiedad aplica a todas las media types, a menos que un media type específico CSS esté definido
4	Definido por el usuario	La mayoría de los navegadores tienen esta característica de accesibilidad: un estilo CSS definido por el usuario
5	Especificidad del selector	Un selector contextual específico (`#heading p`) sobreescribe una definicón general (`p`)
6	Orden de las reglas	La última regla especificada tiene una mayor prioridad
7	Herencia	Si una propiedad no está especificada, es heredada del elemento padre
8	Definición de propiedad CSS en el documento HTML	Una regla CSS común sobreescribe el valor del navegador
9	Por defecto del navegador	La prioridad más baja: estos valores son determinados por las especificaciones iniciales de la W3C

CSS

Propiedades

DOM

Document Object Model

DOM

Usado para visualizar las páginas web por el navegador

DOM

Javascript

ECMAScript

Javascript

Declaración de variable y tipos de datos primitivos:

var variable; //undefined
variable = "Hola Mundo!";
variable = 0;
variable = false;
variable = null;

Declaración de función:

var nombre = "Mundo";
var saludarMundo = function() {
	saludar(nombre); //Muestra alerta "Hola Mundo"
};
function saludarPersona(nombre) {
	saludar(nombre); //Muestra alerta "Hola <nombre>"
}
function saludar(nombre) {
	alert("Hola " + nombre + "!");
}

Javascript

En javascript todo es un objeto:

var Contador = function(i) {
    i = i || 0;
    return function () {
        return ++i;
    };
}

var contar = Contador();
contar(); // 1
contar = Contador(10);

contar(); // 11
contar(); // 12

Es dinámico y basado en prototipos:

var Contador = function(i) {
    this.i = i || 0;
}
Contador.prototype = {
    constructor: Contador,
    sumar: function () {
        return ++this.i;
    }
};

var contador = Contador();
contador.sumar(); // 1

contador = Contador(10);
contar.sumar(); // 11
contar.sumar(); // 12

Javascript

Code

Preview

                                    


<link rel="stylesheet" href="css/ejemplo2.css">
<header>
    <h1 style="color:#cc0099;">No es solo texto y enlaces</h1>
    <h2 class="blue">La web no tiene límites</h2>
</header>
<figure>
    <a href="https://twitter.com/geekandtechgirl" target="_blank">
        <img src="img/portada.jpg">
    </a>
</figure>

No es solo texto y enlaces

La web no tiene límites




    No es solo texto y enlaces
    La web no tiene límites

Novedades

HTML5, Javascript y CSS3

HTML5

Dispositivos HTML5 icon — Acceso a Dispositivos

HTML5

HTML5

CSS3

Animaciones

CSS3

Efectos en imágenes

Responsive Web Design

RWD

Responsive Web Design

Página flexible con min-width y unidades relativas (%)

Responsive Web Design

Página responsive con max-width y media-queries

Responsive Web Design

Responsive Web Design

¿Cómo se hace?

Ajustar ancho de la página al ancho del dispositivo

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Añadir media queries para añadir estilos condicionales.
```
@media only screen and (max-width : 768px) {
```

EJEMPLOS

Páginas Web
Aplicaciones Web
Aplicaciones Escritorio
Aplicaciones Móviles
Juegos
Realidad Virtual
Internet of Things (IoT)

- Este slide es una página web. Es estática porque sólo se compone de la parte de cliente descargada por el navegador. Otra página web es Wikipedia pero esa sí almacena los datos de forma permanente en un servidor, los usuarios colaboran y se define como estática.
- También se pueden hacer aplicaciones web, que permiten al usuario trabajar con aplicaciones pero desde el navegador. El usuario no tiene que navegar entre distintos documentos, todo es 1. Ejemplo: Gmal, Facebook.
- También con Javascript podemos programar aplicaciones de escritorio. Como el editor de texto Atom.
- Y seguro que tienes instalado en tu móvil una aplicación que en realidad es HTML5. Ejemplo: Facebook.
- O has jugado a juegos que no dependían de Flash. Pero aún hay más, HTML5 da soporte a Realidad Virtual, y gracias a NodeJS (Javascript) podemos hacer grandes cosas en Internet of Things.

EJEMPLOS

Aplicaciones de Escritorio - Electron

EJEMPLOS

Juego - Canvas

EJEMPLOS

Demo - WebGL/Audio - BabylonJS

EJEMPLOS

Juego - Unity exportado a HTML5

Cómo empezar

Cómo empezar

Qué aprender

Lenguajes Frontend: HTML, CSS, Javascript.
Lenguajes Backend: PHP, Ruby, Python, C# o Javascript.
Bases de datos: MySQL, MongoDB, SQLServer.

Cómo empezar

Usa buenas prácticas

Optimiza tus páginas web. (GZ, minify, uglify, código...)
Usa Preprocesadores de CSS. (LESS, SASS, Stylus)
Usando Automatizadores de Tareas. (Gulp, Grunt)

Cómo empezar

Consejos

Practica con Google Developer Tools HTML, CSS y JS.
Lee tutoriales, libros y haz cursos en línea.
Sigue a personas influyentes.
Informate de las últimas tendencias.

Personas influyentes

Douglas Crockford

Yahoo

Blog

Popularizó JSON

JavaScript: The Good Parts

Personas influyentes

Mitchell Baker

Mozilla

@mitchellbaker

Presidenta Fundación Mozilla

Personas influyentes

John Resig

Mozilla

Blog

@jeresig

Creador de jQuery

Pro JavaScript Techniques

Secrets of the JavaScript Ninja

Personas influyentes

Marissa Mayer

Yahoo

Tumblr

@marissamayer

Trabajó en Google

Directora ejecutiva de Yahoo

Personas influyentes

Nicholas Zakas

Yahoo

Blog

@slicknet

Contribuye en la librería YUI

High Performance JavaScript

Pro JavaScript Techniques

Professional Ajax

Personas influyentes

Rebecca Murphey

Indeed.com

Personas influyentes

Brendan Eich

Mozilla

Blog

@brendaneich

Inventor del lenguaje JavaScript

Personas influyentes

Lea Verou

Trabajó para W3C

Personas influyentes

David Flanagan

Mozilla

@__DavidFlanagan

JavaScript: The Definitive Guide

jQuery Pocket Reference

Canvas Pocket Reference

Tendencias 2017

Diseño Web

Micro animaciones atraen a la interacción
Colores, contrastes mejoran la interacción
Ilustraciones refuerzan la identidad de la marca
Diseño minimal para que el contenido brille

Tendencias 2017

Lenguajes

Tendencias 2017

Frontend

Tendencias 2017

Backend

Tendencias 2017

Desarrollo Móvil

¿Dudas o Debate?

Coméntalas aquí o por Twitter a @ccsakuweb

Gracias ;)

websinlimites.develagora.com

github.com/patrixd/slide-web-sin-limites

Selectores	Especificidad
H1 {color: white;}	1
P EM {color: green;}	2
.grape {color: red;}	1,0
P.bright {color: blue;}	1,1
P.bright EM.dark {color: yellow;}	2,2
#id218 {color: brown;}	1,0,0
style=" "	1,0,0,0