Introducción al desarrollo web

Introducción al desarrollo web Marcos Vanetta (aka malev)

¿Quién soy? No se estoy seguro, pero me pueden encontrar en: @malev blog.malev.com.ar

¿Qué motiva a esta charla?
Arquitectura compleja
Muchos conceptos nuevos
Frameworks actuales
Incompatibilidad de browsers
Curva de aprendizaje empinada
Muchos lenguajes, tools, etc.

Lenguajes y tools
PHP
Joomla
Wordpress
Drupal
phpBB
phpWiki
…
MVC - MVP
HTML
Javascript
CSS
PHP, Python, ruby, …
SQL
jQuery, Prototype, Mootools
Django, web2py, Rails, cakePHP
SASS o LESS
HTML5
ActionScript (flash)
HAML
CoffeeScript
Backbone.js, Sproutcore

“ How many freaking languages you have to learn to make a webpage?” Robert Martin

Programación web – 2 lugares
Cliente
El browser interpreta el HTML y CSS enviado desde el cliente. Ejecuta el javascript en un sandbox.
Servidor
Responde a las peticiones de los clientes analizando URL, parámetros y tipo de petición. En gral. responde con HTML, CSS y Javascript.

El cliente python -m SimpleHTTPServer

Génesis
En el principio creó Dios los cielos y la tierra y la web. Y la web estaba desordenada y vacía, y las tinieblas estaban sobre la faz del abismo, y el Espíritu de la Web se movía sobre la faz de las aguas. Y dijo Dios: Sea el HTML; y fue el HTML.

HTML HTML, siglas de HyperText Markup Language, es el lenguaje de marcado . Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).

HTML - Ejemplo <!DOCTYPE html> <html> <head> <title>Ejemplo de HTML</title> </head> <body> <h1>Hola PyCon</h1> <p>Esto es Junín</p> </body> </html>

Un viaje al pasado

¿Qué teníamos en ese entonces?
HTML
Estilos embebidos:
<font size="1" face="Verdana, Arial" color="#339999" size="5"> <strong>Territorial</strong> </font>
Javascript
Gif animados
Tablas y frames

¿Cómo son ahora? <!DOCTYPE html> <html dir='ltr' lang='en-US'> <head> <title>App47</title>  </head> <body> <div id='header'> <div class='message'>Welcome back to App47!</div> <h1 class='logo'>App47</h1> </div>  </div> </body> </html>

Estilos #header .message { float: right; color: white; font-size: 22px; font-family: Palatino, Georgia, serif; font-style: italic; line-height: 35px; }

Primer concepto Separar el contenido de la presentación

Comportamiento en el cliente Programamos Javascript, un lenguaje que se ejecuta en el cliente y entre otras cosas puede modificar el documento HTML y el CSS. <script> var suma; Suma = 4 + 6; alert(suma); </script>

Ejemplos jQuery UI

El servidor

El servidor Debe poder generar el HTML de manera dinámica desde el servidor para cada pedido desde el cliente. Debe buscar información en bases de datos, relizar pedidos a otros servidores o realizar cálculos. Ejemplo, un blog o un diario online.

PHP y un poco de dinamismo <html> <body> <?php echo "Hello World"; mysql_connect(localhost,$username,$password); @mysql_select_db($database) or die( "Unable to select database"); $query = "INSERT INTO contacts VALUES ('','$first','$last','$phone','$mobile','$fax','$email','$web')"; mysql_query($query); ?></body> </html>

¿Qué pasa cuando ingresamos a una URL? Antes localhost/archivo.php El browser se conectaba con el server, el server buscaba el archivo, lo ejecutaba y se lo devuelve al browser Ahora localhost/pyconar El browser se conecta al server, el server llama a un método, el método genera una respuesta y la enviá al cliente (browser)

bottlepy.org

Ejemplo 1 from bottle import route, run @route('/') def index(): return '<b>Hola pyconar</b>' run(host='localhost', port=8080)

Ejemplo 2 from bottle import route, run @route('/hello/:name') def index(name='World'): return '<b>Hello %s!</b>' % name run(host='localhost', port=8080)

Separemos lógica de presentación

Templates <html> <head> <title>{{title or 'No title'}}</title> </head> <body> %include </body> </html>

Templates 2 %if name: Hi <b>{{name}}</b> %else: <i>Hello stranger</i> %end

Templates 3 %rebase layout title=title <div style="width: 50%; float:left"> %leftblock() </div> <div style="width: 50%; float:right"> %rightblock() </div>

Preguntas ¿?

http://blog.malev.com.ar	807
http://feeds.feedburner.com	9
http://imixspa.com.ar	8
http://localhost	7
http://translate.googleusercontent.com	6
http://malev.com.ar	4
http://www.imixspa.com.ar	4
http://code.malev.com.ar	1
https://s1-eu3.ixquick-proxy.com	1
http://esproxy.com	1
http://aportaherramientas.com.ar	1

Introducción al desarrollo web

by malev on Oct 10, 2011

Accessibility

Tags

Upload Details

Usage Rights

11 Embeds 849

Statistics

Introducción al desarrollo web — Presentation Transcript