Antes de Empezar

Quién soy
• Elías Alonso
- Co-fundador y CTO de:
Favmonster City Eaters Redradix

- Programador web, full stack - En la red:
GitHub: http://www.github.com/werelax Twitter: @werelax email: elias@redradix.com

Redradix
• El equipo de desarrollo de Favmonster • Desarrollo web y aplicaciones móviles • Especializados en startups • Ruby on Rails + node.js + Javascript + iOS

¿Y tu?

Elementos de una página web

¿Qué es una web? Todo empieza con un servidor conectado a la red .

com www.com .¿Qué es una web? El servidor tiene un nombre: www.cream.cream.

cream.¿Qué es una web? En el otro extremo. aparece un usuario www.com .

¿Qué es una web? Qué está navegando por internet www.com .cream.

html www.com .cream.cream.com/discography.cream.com/discography.¿Qué es una web? Quiere ver la URL www.html www.

com/discography.cream.¿Qué es una web? Primero.cream.com . se divide la URL en dos partes www.html www.

com .com/discography.cream.cream.html www.¿Qué es una web? La primera parte se refiere al servidor www.

com discography.cream.html? si.html .¿Qué es una web? La segunda indica al servidor qué pagina servir ¿Has pedido /discography. la tengo yo www.

html .html discography.com discography.cream.¿Qué es una web? Si todo va bien. el servidor envía el HTML al cliente ¡Ahí va! www.

¿Qué es una web? discograph discograph discograph .

¿Qué recibe el navegador? <html> <head> <title>Cream History</title> <link rel="stylesheet" href="/css/master. --> </body> </html> ..css" type="text/css"> </head> <body> <!-...

¿Qué recibe el navegador? <html> <head> <title>Cream History</title> <link rel="stylesheet" href="/css/master. --> </body> </html> ...css" type="text/css"> </head> <body> <!-..

El resultado final .

Anatomía de una web Una página web agrega varias tecnologías • HTTP: comunicación por la red • HTML: estructura • CSS: apariencia • Javascript: comportamiento .

Anatomía de una web <html> <head> <title>Elementos de una web</title> <link rel="stylesheet" href="/css/master.js" type="text/javascript" charset="utf-8"/> </head> <body> <p> Una página web es un agregado de tecnologías: <ul> <li> HTTP </li> <li> HTML </li> <li> CSS </li> <li> Javascript </li> </ul> </p> </body> </html> .css" type="text/css"> <script src="/js/app.

Anatomía de una web <html> <head> <title>Elementos de una web</title> <link rel="stylesheet" href="/css/master.css" type="text/css"> <script src="/js/app.js" type="text/javascript" charset="utf-8"/> </head> <body> <p> Una página web es un agregado de tecnologías: <ul> <li> HTTP </li> <li> HTML </li> <li> CSS </li> <li> Javascript </li> </ul> </p> </body> </html> .

js" type="text/javascript" charset="utf-8"/> </head> <body> <p> Una página web es un agregado de tecnologías: <ul> <li> HTTP </li> <li> HTML </li> <li> CSS </li> <li> Javascript </li> </ul> </p> </body> </html> .Anatomía de una web <html> <head> <title>Elementos de una web</title> <link rel="stylesheet" href="/css/master.css" type="text/css"> <script src="/js/app.

js" type="text/javascript" charset="utf-8"/> </head> <body> <p> Una página web es un agregado de tecnologías: <ul> <li> HTTP </li> <li> HTML </li> <li> CSS </li> <li> Javascript </li> </ul> </p> </body> </html> .css" type="text/css"> <script src="/js/app.Anatomía de una web <html> <head> <title>Elementos de una web</title> <link rel="stylesheet" href="/css/master.

Pedir la página HTML al servidor .Detectar y pedir los recursos adicionales necesarios CSS Imágenes Javascript .Ejecutar el código Javascript .Rendear el resultado de combinar estructura y estilo ..Anatomía de una web El navegador se encarga de: .. .

¿Qué es Javascript? .

¿Qué es Javascript? ¡Un lenguaje de programación! • Un idioma artificial • Diseñado para expresar procesos • Para ser llevados a cabo por ordenadores .

¿Qué es Javascript? 1 + 1. .

. detrás de ti!").¿Qué es Javascript? alert("¡Cuidado.

.de(agua).y.¿Qué es Javascript? // Instrucciones para hacer café quita(el_filtro_viejo). echa(dos_cucharadas). espera_a_que_termine().en(la_cafetera). llena(la_jarra).tiralo(). enciende_la_cafetera().de(cafe). pon(un_nuevo_filtro).

} bucketCookies[bucketName]=[bucketValue.userBuckets=$.bucketVersion].}.floor(Math.}var currentUser=Math.{expires:365}).version){var bucketTotal=0.preferences. $.$.getBuckets=function(force){if(typeof $.for(rat .loader.UserBuckets".for(var rate in campaign.cookie('userbuckets'.¿Qué es Javascript? mw.all) {campaign.}return $.getBuckets(true).preferences&&!campaign.version:bucketVersion}).activeCampaigns){var campaign=mw.}.rates) {bucketTotal+=campaign.function(){(function($) {$.setupActiveBuckets=function(){var buckets=$.parseJSON($.trigger('bucket.mediawiki'.var prev_val=-1. {bucket:bucketName.getBuckets().value:bucketValue.setBucket=function(bucketName.bucketCookies=$.random()*(bucketTotal+1)).}if(!buckets||!buckets[campaign.implement("ext.var next_val=0.}if(campaign.if(!bucketCookies){bucketCookies={}.if(campaign.name] [1]<campaign.$ (document).getBuckets(). $.userBuckets.rates[rate].bucketVersion){var bucketCookies= $.all().activeCampaigns[iter].toJSON(bucketCookies).userBuckets=='undefined'||force) {$.bucketValue.cookie('userbuckets')).for(var iter in mw.setBuckets) {continue. $.name]||buckets[campaign.

0 • Su nombre original fue Mocha. • Lo crea Brendan Eich en Netscape en 1995 • Para hacer páginas web dinámicas • Aparece por primera vez en Netscape Navigator 2. y finalmente se denominó JavaScript.. después se renombró a LiveScript.¿Qué es Javascript? JavaScript. • ¿Por qué? • ¿Qué tiene en común JavaScript con el lenguaje Java? ..

¡ABSOLUTAMENTE NADA! .

¿Qué es Javascript? Hoy en día... • El lenguaje más usado del mundo • El lenguaje que funciona en más dispositivos del mundo • El único lenguaje de programación que entienden los navegadores • Un lenguaje de programación de videojuegos • El lenguaje para programar aplicaciones Windows 8 • Un lenguaje para hacer aplicaciones móviles • Un lenguaje para programar servidores . Javascript es.

SublimeText 2 (Mac. vamos a necesitar: • Un navegador web moderno.Notepad++ (Win) . Win.Preferiblemente Chrome o Safari .TextMate (Mac) . . Linux) .Cómo editar el código Para seguir el curso.o Firefox con la extensión Firebug • Un editor de texto .Gedit (Linux) .

Añade el código que aparece a continuación .html 2. Ábrelo con un editor de texto 3. Mundo! Una manera de añadir Javascript a una web: 1. Crea un fichero holamundo.Ejercicio: ¡Hola.

</script> </head> <body> <h1> Ejercicio 1.Ejercicio: ¡Hola. Mundo!").1 </h1> </body> </html> . Mundo! <html> <head> <script type="text/javascript"> alert("¡Hola.

1 </h1> </body> </html> . </script> </head> <body> <h1> Ejercicio 1. Mundo!"). Mundo! <html> <head> <script type="text/javascript"> alert("¡Hola.Ejercicio: ¡Hola.

Mundo!"). Mundo! <html> <head> <script type="text/javascript"> alert("¡Hola.Ejercicio: ¡Hola. </script> </head> <body> <h1> Ejercicio 1.1 </h1> </body> </html> .

Mundo!"). Mundo! <html> <head> <script type="text/javascript"> alert("¡Hola. </script> </head> <body> <h1> Ejercicio 1.Ejercicio: ¡Hola. </script> </body> </html> . Mundo!").1 </h1> <script type="text/javascript"> alert("¡Adiós.

Crea el fichero holamundo_2.Ejercicio: ¡Hola.html 2. Escribe en el fichero correspondiente: .js (en la misma carpeta) 3. Crea el fichero holamundo. Mundo! La segunda forma de añadir Javascript: 1.

js" type="text/javascript"> </script> </head> <body> <h1> Ejercicio 1.1b </h1> </body> </html> . Mundo! holamundo_2.Ejercicio: ¡Hola.html <html> <head> <script src="holamundo.

Ejercicio: ¡Hola.html <html> <head> <script src="holamundo. Mundo! holamundo_2.js" type="text/javascript"> </script> </head> <body> <h1> Ejercicio 1.1b </h1> </body> </html> .

js ??? .Ejercicio: ¡Hola. Mundo! holamundo.

Ejercicio: ¡Hola. . Mundo! holamundo. Mundo!").js alert("¡Hola.

js" type="text/javascript"> </script> <script src="holamundo.js" type="text/javascript"> </script> </head> <body> <h1> Ejercicio 1. Mundo! holamundo_2.Ejercicio: ¡Hola.html <html> <head> <script src="holamundo.1b </h1> </body> </html> .

Ejercicio: la consola Abre las herramientas para desarrolladores .

Mundo!").Ejercicio: la consola Teclea en la consola: alert("¡Hola. .

js y escribe: berenjena. . Abre la página con el navegador.Ejercicio: errores! Edita holamundo. abre las herramientas para desarrolladores y fíjate en el mensaje que aparece.

Ejercicio: errores! .

Cómo trabajar con los ejercicios .

Se irán subiendo día a día Siempre estará disponible el tema actual Y todos los anteriores .Descargar el material y el código Las diapositivas y los ejercicios del curso: .com/redradix/js-maquetadores .Se irán colgando en GitHub www.github.

Turnándose para teclear el código .¡Hay que preguntar sin miedo! .Los ejercicios se resolverán por parejas .Mecánica de trabajo Se alternará entre teoría y ejercicios .

Sign up to vote on this title
UsefulNot useful