-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path004-web-development.html
234 lines (221 loc) · 12 KB
/
004-web-development.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Desarrollo Web</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal.js/css/reveal.min.css"/>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'reveal.js/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title">Desarrollo Web</h1>
<h2 class="author">Patricio Pérez <script type="text/javascript">
<!--
h='ceinf.cl';a='@';n='patricio.perez';e=n+a+h;
document.write('<a h'+'ref'+'="ma'+'ilto'+':'+e+'" clas'+'s="em' + 'ail">'+e+'<\/'+'a'+'>');
// -->
</script><noscript>patricio.perez at ceinf dot cl</noscript></h2>
<h3 class="date">Primer semestre 2015</h3>
</section>
<section><section id="desarrollo-web" class="titleslide slide level1"><h1>Desarrollo web</h1></section><section id="developers1cientoonce" class="slide level2">
<h1>Developers!!1cientoonce!</h1>
<video controls width="640" height="480" src="media/developers-developers-developers.webm">
</video>
</section><section id="modelo-clienteservidor" class="slide level2">
<h1>Modelo cliente/servidor</h1>
<p>Es lo que más usamos día a día, en facebook por ejemplo.</p>
</section><section class="slide level2">
<figure>
<img src="media/cliente_servidor_http.png" alt="Cliente/Servidor" /><figcaption>Cliente/Servidor</figcaption>
</figure>
</section></section>
<section><section id="arquitectura-http" class="titleslide slide level1"><h1>Arquitectura HTTP</h1></section><section id="arquitectura-http-1" class="slide level2">
<h1>Arquitectura HTTP</h1>
<p>Implementa el modelo cliente/servidor, ojearemos un par de conceptos necesarios para entenderla:</p>
<ul>
<li class="fragment">URIs</li>
<li class="fragment">Requests</li>
<li class="fragment">Códigos de estado</li>
<li class="fragment">Verbos HTTP</li>
</ul>
</section><section id="uris" class="slide level2">
<h1>URIs</h1>
<p>Un <em>URI</em> es un identificador único de un recurso, ejs:</p>
<ul>
<li class="fragment"><code>http://animales.com/perros/5</code></li>
<li class="fragment"><code>http://animales.com/anguilas</code></li>
<li class="fragment"><code>http://animales.com/anguilas/4/albinas</code></li>
</ul>
</section><section id="requests" class="slide level2">
<h1>Requests</h1>
<p>Un request o <em>petición</em>, se realiza a un recurso mediante su <em>URI</em> usando un <strong>verbo http</strong>. Un request debe tener una respuesta, la que por lo bajo tiene un código (i.e: 500, 200, el infame error 404, etc) y otro tipo de información (headers), aparte de la respuesta.</p>
</section><section id="verbos-http" class="slide level2">
<h1>Verbos HTTP</h1>
<p>Los verbos HTTP más utilizados son:</p>
<ul>
<li class="fragment"><code>GET</code></li>
<li class="fragment"><code>HEAD</code></li>
<li class="fragment"><code>POST</code></li>
<li class="fragment"><code>PUT</code></li>
<li class="fragment"><code>DELETE</code></li>
<li class="fragment"><code>PATCH</code></li>
</ul>
</section><section id="get" class="slide level2">
<h1>GET</h1>
<p>Pide la representación de un recurso específico, el fin es obtener información, no debe haber otro efecto adverso.</p>
</section><section class="slide level2">
<figure>
<img src="media/http_get_request.png" alt="GET request" /><figcaption>GET request</figcaption>
</figure>
</section><section id="head" class="slide level2">
<h1>Head</h1>
<p>Pide una respuesta, del mismo estilo que <code>GET</code>, pero sin el cuerpo de la respuesta. Útil para mostrar información en headers, notificar si hay cambios en el contenido (Es decir, ratear un poco de bandwidth al no transferir el body)</p>
</section><section class="slide level2">
<figure>
<img src="media/http_head_request.png" alt="HEAD request" /><figcaption>HEAD request</figcaption>
</figure>
</section><section id="post" class="slide level2">
<h1>POST</h1>
<p>Envia información y realiza cambios en recursos, pueden crearse nuevos recursos, realizar cambios sobre recursos existentes. Esta es la acción que casi siempre hacemos al pinchar '<code>Enviar</code>' en un formulario.</p>
</section><section class="slide level2">
<figure>
<img src="media/http_post_request.png" alt="POST request" /><figcaption>POST request</figcaption>
</figure>
</section><section id="put" class="slide level2">
<h1>PUT</h1>
<p>Tambien se envia información, sin embargo es más flexible, ya que se puede interpretar como la creación de un nuevo recurso, o la modificación de uno ya existente.</p>
</section><section class="slide level2">
<figure>
<img src="media/http_request_put.png" alt="PUT request" /><figcaption>PUT request</figcaption>
</figure>
</section><section id="delete" class="slide level2">
<h1>DELETE</h1>
<p>Creo que ya se imaginan que hace ...</p>
</section><section id="patch" class="slide level2">
<h1>PATCH</h1>
<p>Realiza modificaciones parciales a un recurso existente, hay que tener ojo, la especificación recomienda que los cambios enviados sean un tipo de diferencia, esta es parseada por el servidor y realiza los cambios pertinentes, al contrario de la creencia común, de enviar una <code>campo:valor</code> y esperar que se modifique solo tal campo en el recurso.</p>
</section><section class="slide level2">
<figure>
<img src="media/http_patch_request.png" alt="PATCH request" /><figcaption>PATCH request</figcaption>
</figure>
</section><section id="códigos-de-estado" class="slide level2">
<h1>Códigos de estado</h1>
<video controls width="640" height="480" src="media/http_status.webmsd.webm">
</video>
</section><section id="patrones-de-diseño-arquitectónico" class="slide level2">
<h1>Patrones de diseño arquitectónico</h1>
<p>Es una solución reconocida (<em>connotada</em>) a un problema recurrente de diseño (Como se ve la estructura de nuestra aplicación). Entre sus dominios encontramos:</p>
<ul>
<li class="fragment">Control de acceso</li>
<li class="fragment">Concurrencia</li>
<li class="fragment">Distribución</li>
<li class="fragment">Persistencia</li>
</ul>
</section><section id="el-que-nos-atañe-mvc" class="slide level2">
<h1>El que nos atañe: MVC</h1>
<aside class="notes">
<ul>
<li class="fragment">Modelo: Objetos del mundo real, del dominio del problema, maneja datos, lógica y reglas de la app (ej: Usuario, Estudiante)</li>
<li class="fragment">Vista: Representación de salida al usuario (ej: HTML, JSON, XML, etc)</li>
<li class="fragment">Controlador: Lógica de interacción con el usuario, recibe, convierte datos e interactua con modelos y vistas</li>
</ul>
</aside>
<p>El patrón que utilizaremos será <em>MVC</em> o <em>M</em>odel <em>V</em>iew <em>C</em>ontroller, este separa la aplicación en 3 capas:</p>
<ul>
<li class="fragment">Modelos</li>
<li class="fragment">Vistas</li>
<li class="fragment">Controladores</li>
</ul>
</section></section>
<section><section id="mvc" class="titleslide slide level1"><h1>MVC</h1></section><section id="modelos" class="slide level2">
<h1>Modelos</h1>
<aside class="notes">
<p>Blog: (Modelos: Entradas, Usuarios, Comentarios) Controladores: EntradasController, UsersController, ComentariosController</p>
<p>/entradas/{id}/comentarios /usuarios/</p>
</aside>
<p>Los modelos se refiere al conjunto de clases que representa nuestro dominio del problema (Relación con el paradigma orientado a objetos).</p>
</section><section id="modelos-1" class="slide level2">
<h1>Modelos</h1>
<p><em>Laravel</em> nos da una herramienta llamada <em>Eloquent</em> para manejar los modelos, estos tienen relación directa con nuestra base de datos (<em>Eloquent</em> es un <em>ORM</em>, este mapea objetos a filas de base de datos), el ORM automáticamente construira consultas para la base de datos.</p>
</section><section id="modelos-2" class="slide level2">
<h1>Modelos</h1>
<p>El ORM permite trabajar los objetos, por ejemplo, <code>Modelo::all()</code> nos entregará una lista con todos los objetos de esa clase, <code>Modelo::find(5)</code> entregará el objeto cuya llave primaria sea igual a 5. Se pueden pedir otras cosas al ORM, como condiciones <code>WHERE</code> o consultar relaciones <code>1/n</code>.</p>
<div class="fragment">
<p>En fin, si quiere más información, lo veremos prontamente, mismo horario, mismo canal.</p>
</div>
</section><section id="controladores" class="slide level2">
<h1>Controladores</h1>
<p>Los controladores son la forma en las que interactuamos con la aplicación, en el caso particular de los frameworks web que implementan MVC las acciones se realizan a través de una URI y de verbos HTTP, ejemplos:</p>
<ul>
<li class="fragment"><code>GET /perros</code></li>
<li class="fragment"><code>POST /perros</code></li>
<li class="fragment"><code>GET /perros/5</code></li>
<li class="fragment"><code>DELETE /perros/10</code></li>
</ul>
</section><section id="controladores-1" class="slide level2">
<h1>Controladores</h1>
<p>Cada ruta de la aplicación (URI) y un verbo http correspondiente deben mapear a un método de un controlador, los métodos de un controlador pueden no recibir parámetros (ej: un index) o recibirlos (ej: mostrar el recurso con id 5).</p>
<div class="fragment">
<p>El encargado de mapear una URI + verbo a un método es el framework de <code>Routing</code> (El que veremos en detalle más adelante)</p>
</div>
</section><section id="vistas" class="slide level2">
<h1>Vistas</h1>
<p>Es la representación de un recurso, presentada al usuario. Estás pueden tener distintos formatos, entre ellos:</p>
<ul>
<li class="fragment">XML</li>
<li class="fragment">JSON</li>
<li class="fragment">HTML</li>
<li class="fragment">Otros</li>
</ul>
</section><section id="mvc-overview" class="slide level2">
<h1>MVC Overview</h1>
<figure>
<img src="media/ash-mvc-architecture.gif" alt="Arquitectura MVC" /><figcaption>Arquitectura MVC</figcaption>
</figure>
</section></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: 'night', // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
// { src: 'reveal.js/plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; }, }
// { src: 'reveal.js/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]});
</script>
</body>
</html>