-
Notifications
You must be signed in to change notification settings - Fork 0
/
ejemplo_feed_wordpress.xml
529 lines (516 loc) · 113 KB
/
ejemplo_feed_wordpress.xml
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>Galatar</title>
<atom:link href="http://galatar.com/feed/" rel="self" type="application/rss+xml"/>
<link>http://galatar.com</link>
<description>Programación Web de cero a infinito</description>
<lastBuildDate>Tue, 31 Jul 2018 15:22:51 +0000</lastBuildDate>
<language>es-ES</language>
<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>
<generator>https://wordpress.org/?v=4.9.7</generator>
<image>
<url>http://galatar.com/wp-content/uploads/2018/07/g_torre_3d-1-150x150.png</url>
<title>Galatar</title>
<link>http://galatar.com</link>
<width>32</width>
<height>32</height>
</image>
<site xmlns="com-wordpress:feed-additions:1">123870268</site>
<item>
<title>Generar código autonumérico con reinicio anual</title>
<link>http://galatar.com/generar-codigo-autonumerico-con-reinicio-anual/</link>
<comments>http://galatar.com/generar-codigo-autonumerico-con-reinicio-anual/#respond</comments>
<pubDate>Wed, 25 Jul 2018 15:19:34 +0000</pubDate>
<dc:creator><![CDATA[Juanan Ruiz]]></dc:creator>
<category><![CDATA[PHP]]></category>
<category><![CDATA[SQL]]></category>
<guid isPermaLink="false">http://galatar.com/?p=115</guid>
<description>
<![CDATA[Siempre aconsejo que las tablas de una base de datos relacional tengan un campo clave autonumérico de tipo entero, que sea totalmente independiente de cualquier otro campo que contenga la tabla y de cualquier otro campo que forme parte de la “lógica de negocio”. Por muy inmutable que te pueda parecer cualquier otro dato, como […]]]></description>
<content:encoded><![CDATA[<p>Siempre aconsejo que las tablas de una base de datos relacional tengan un campo clave autonumérico de tipo entero, que sea totalmente independiente de cualquier otro campo que contenga la tabla y de cualquier otro campo que forme parte de la “lógica de negocio”. Por muy inmutable que te pueda parecer cualquier otro dato, como el DNI, la matrícula de un coche o el código de una factura, es preferible tener una clave adicional que identifique ese registro de manera independiente en la base de datos, que “no tenga que ver nada con nadie”. </p>
<p><span id="more-115"></span></p>
<p>Hay veces que además de ese campo necesitarás generar una clave única que vaya en parte codificada y en parte autogenerada. Un ejemplo típico suele ser el código de una factura. La mayoría de las empresas utilizan algún tipo de código en el que aparece el año y un numeral que se va incrementando a lo largo del año para volver a cero al año siguiente. </p>
<p>Imagina que tienes que generar una factura que sigue una numeración parecida a esta: “F-0001/2018”. Vas a ver como generar una consulta SQL que encuentre el código de factura más alto del año y te devuelva el siguiente. Sería estupendo que también devolviera el número correcto si es la primera factura del año o que le pudiéras pedir el siguiente número de factura de cualquier año concreto. No es mucho pedir ¿no?</p>
<p>Digamos que la tabla de facturas almacena el número de factura en un campo ‘codigo’ y también tiene un campo ‘fecha_emision’ para almacenar la fecha de emisión de la factura. Para simplificar la consulta vamos a generar de momento las facturas para el año actual.</p>
<div class="codecolorer-container sql solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="sql codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #993333; font-weight: bold;">SELECT</span> CONCAT<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'F-'</span><span style="color: #66cc66;">,</span>LPAD<span style="color: #66cc66;">(</span>SUBSTR<span style="color: #66cc66;">(</span>codigo<span style="color: #66cc66;">,</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">+</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">,</span><span style="color: #ff0000;">'0'</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'/'</span><span style="color: #66cc66;">,</span> <br />
<span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> <span style="color: #993333; font-weight: bold;">AS</span> codigo <br />
<span style="color: #993333; font-weight: bold;">FROM</span> factura <span style="color: #993333; font-weight: bold;">WHERE</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>fecha_emision<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">=</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><br />
<span style="color: #993333; font-weight: bold;">UNION</span><br />
<span style="color: #993333; font-weight: bold;">SELECT</span> CONCAT<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'F-0001'</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'/'</span><span style="color: #66cc66;">,</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> <span style="color: #993333; font-weight: bold;">AS</span> codigo<br />
<span style="color: #993333; font-weight: bold;">ORDER</span> <span style="color: #993333; font-weight: bold;">BY</span> codigo <span style="color: #993333; font-weight: bold;">DESC</span> <span style="color: #993333; font-weight: bold;">LIMIT</span> <span style="color: #cc66cc;">1</span>;</div></td></tr></tbody></table></div>
<p>La primera consulta, antes del <strong>UNION</strong>, busca el código más alto del año actual y te lo devuelve sumándole “1” y rellenando con ceros a la izquierda.</p>
<p>Si todavía no hay registros para el año en curso, entonces esta primera consulta no devuelve nada pero la segunda parte, después del [strong]UNION[/strong] viene al rescate y genera la primera factura del año.</p>
<p>Si necesitas generar registros para años anteriores solo tienes que modificar esta consulta pasándole el año como parámetro en lugar de las expresiones YEAR(NOW()). </p>
<p>Otra forma parecida de hacerlo sería con esta consulta que no utiliza <strong>UNION</strong></p>
<div class="codecolorer-container sql solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="sql codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #993333; font-weight: bold;">SELECT</span> <span style="color: #993333; font-weight: bold;">CASE</span> <span style="color: #993333; font-weight: bold;">WHEN</span> <span style="color: #993333; font-weight: bold;">COUNT</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">*</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">></span> <span style="color: #cc66cc;">0</span> <span style="color: #993333; font-weight: bold;">THEN</span> <br />
CONCAT<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'F-'</span><span style="color: #66cc66;">,</span>LPAD<span style="color: #66cc66;">(</span>SUBSTR<span style="color: #66cc66;">(</span>codigo<span style="color: #66cc66;">,</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">+</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">,</span><span style="color: #ff0000;">'0'</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'/'</span><span style="color: #66cc66;">,</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><br />
<span style="color: #993333; font-weight: bold;">ELSE</span> <br />
CONCAT<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'F-0001'</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'/'</span><span style="color: #66cc66;">,</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span><br />
<span style="color: #993333; font-weight: bold;">END</span> <span style="color: #993333; font-weight: bold;">AS</span> codigo <br />
<span style="color: #993333; font-weight: bold;">FROM</span> factura <span style="color: #993333; font-weight: bold;">WHERE</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>fecha_emision<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">=</span> <span style="color: #993333; font-weight: bold;">YEAR</span><span style="color: #66cc66;">(</span>NOW<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> <span style="color: #993333; font-weight: bold;">ORDER</span> <span style="color: #993333; font-weight: bold;">BY</span> codigo <span style="color: #993333; font-weight: bold;">DESC</span> <span style="color: #993333; font-weight: bold;">LIMIT</span> <span style="color: #cc66cc;">1</span>;</div></td></tr></tbody></table></div>
<h3>Desde tu código PHP</h3>
<p>Desde PHP se podría ejecutar primero esta consulta y con el “código” resultante guardar el registro completo. O, mejor incluso, si hay que rellenar algo en un formulario, ejecutar esto en el script PHP que va a pintar el formulario y dejarlo ya impreso como un “input disabled” en el propio formulario. Luego se enviará con el resto de campos para grabar en la base de datos.</p>
<div class="codecolorer-container php solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000000; font-weight: bold;"><?php</span><br />
<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$dbh</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #000088;">$query</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$dbh</span><span style="color: #339933;">-></span><span style="color: #004000;">prepare</span><span style="color: #009900;">(</span><br />
<span style="color: #0000ff;">"SELECT CONCAT('F-',LPAD(SUBSTR(codigo,3,4)+1,4,'0'), '/', <br />
YEAR(NOW())) AS codigo <br />
FROM factura WHERE year(fecha_emision) = YEAR(NOW())<br />
UNION<br />
SELECT CONCAT('F-0001', '/', YEAR(NOW())) AS codigo<br />
ORDER BY codigo DESC LIMIT 1;<br />
"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #666666; font-style: italic;">// Establece la forma de devolver los resultados, en este caso devolverá un array asociativo</span><br />
<span style="color: #000088;">$query</span><span style="color: #339933;">-></span><span style="color: #004000;">setFetchMode</span><span style="color: #009900;">(</span>PDO<span style="color: #339933;">::</span><span style="color: #004000;">FETCH_ASSOC</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$query</span><span style="color: #339933;">-></span><span style="color: #004000;">execute</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">"<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'></head><body>"</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">while</span> <span style="color: #009900;">(</span><span style="color: #000088;">$row</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$query</span><span style="color: #339933;">-></span><span style="color: #004000;">fetch</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'<form method="post" action="index.php?p=factura_grabar">'</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'<input type="text" name="codigo" value="'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"codigo"</span><span style="color: #009900;">]</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'">'</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'<input type="date" name="fecha_emision">'</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'<input type="submit" value="Grabar factura">'</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'</form>'</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">}</span><br />
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">"</body></html>"</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Tienes disponible el <a href="https://github.com/galatar/generar-codigo-autonumerico-con-reinicio-anual">código de este tutorial en github</a> por si quieres probarlo “al completo”.</p>
]]></content:encoded>
<wfw:commentRss>http://galatar.com/generar-codigo-autonumerico-con-reinicio-anual/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">115</post-id>
</item>
<item>
<title>Herencia compleja de plantillas en twig</title>
<link>http://galatar.com/herencia-compleja-de-plantillas-en-twig/</link>
<comments>http://galatar.com/herencia-compleja-de-plantillas-en-twig/#respond</comments>
<pubDate>Thu, 12 Jul 2018 16:32:22 +0000</pubDate>
<dc:creator><![CDATA[Juanan Ruiz]]></dc:creator>
<category><![CDATA[PHP]]></category>
<category><![CDATA[Symfony]]></category>
<category><![CDATA[Twig]]></category>
<guid isPermaLink="false">http://galatar.com/?p=104</guid>
<description>
<![CDATA[La posibilidad de realizar herencias de plantillas o ‘templates’ en Twig es una de las características más útiles de este motor de plantillas. Sin embargo en proyectos más complejos la herencia simple de plantillas se queda corta y Twig no permite la herencia múltiple (quizás por la complejidad indeseable que esto supondría). Lo que si […]]]></description>
<content:encoded><![CDATA[<p><img src="http://galatar.com/wp-content/uploads/2018/07/logo_twig-300x241.png" alt="Logo motor de plantillas Twig" width="300" height="241" class="alignright size-medium wp-image-111" srcset="http://galatar.com/wp-content/uploads/2018/07/logo_twig-300x241.png 300w, http://galatar.com/wp-content/uploads/2018/07/logo_twig.png 471w" sizes="(max-width: 300px) 100vw, 300px" />La posibilidad de realizar herencias de plantillas o ‘templates’ en Twig es una de las características más útiles de este motor de plantillas.</p>
<p>Sin embargo en proyectos más complejos la herencia simple de plantillas se queda corta y Twig no permite la herencia múltiple (quizás por la complejidad indeseable que esto supondría).</p>
<p>Lo que si está permitido, como he descubierto con alegría hace poco, es la herencia en cascada o herencia por niveles. Esto permite personalizar completamente una aplicación que esté organizada de manera modular o una web que tenga secciones muy diferenciadas.<br />
<span id="more-104"></span></p>
<p>Primero un repaso rápido a como funciona la herencia de plantillas en twig. Aquí tenemos la plantilla base o madre.</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #66cc66;">{</span># templates<span style="color: #66cc66;">/</span>base.html.twig #<span style="color: #66cc66;">}</span><br />
<!DOCTYPE html><br />
<<a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a>><br />
<<a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>><br />
<<a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">meta</span></a> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"UTF-8"</span>><br />
<<a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>><span style="color: #66cc66;">{</span>% block <span style="color: #000066;">title</span> %<span style="color: #66cc66;">}</span>Probando la herencia en Twig<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>><br />
<<a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>><br />
<<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"sidebar"</span>><br />
<span style="color: #66cc66;">{</span>% block barra_lateral %<span style="color: #66cc66;">}</span><br />
<<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/"</span>>Inicio<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/blog"</span>>Blog<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/tienda"</span>>Tienda<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>><br />
<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>><br />
<<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"contenido"</span>><br />
<span style="color: #66cc66;">{</span>% block contenido %<span style="color: #66cc66;">}</span><span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a>></div></td></tr></tbody></table></div>
<p>Y ahora la plantilla hija que hereda de base.html.twig</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #66cc66;">{</span># templates<span style="color: #66cc66;">/</span>inicio.html.twig #<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% extends <span style="color: #ff0000;">'base.html.twig'</span> %<span style="color: #66cc66;">}</span><br />
<br />
<span style="color: #66cc66;">{</span>% block <span style="color: #000066;">title</span> %<span style="color: #66cc66;">}</span>Bienvenido a la web de Twig<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><br />
<br />
<span style="color: #66cc66;">{</span>% block contenido %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% <span style="color: #000066;">for</span> noticia in noticias %<span style="color: #66cc66;">}</span><br />
<<a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>><span style="color: #66cc66;">{</span><span style="color: #66cc66;">{</span> noticia.titulo <span style="color: #66cc66;">}</span><span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>><br />
<<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><span style="color: #66cc66;">{</span><span style="color: #66cc66;">{</span> noticia.contenido <span style="color: #66cc66;">}</span><span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><br />
<span style="color: #66cc66;">{</span>% endfor %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span></div></td></tr></tbody></table></div>
<p>Ahora quiero diseñar la sección de la tienda, reutilizando la plantilla base para mantener la coherencia visual del sitio, pero no quiero que en la barra de la izquierda haya ninguna referencia al blog o a la página de inicio para que el cliente no se me distraiga y se me vaya. </p>
<p>Ahí me interesa poner un listado de categorías de producto que tengo en la tienda. Y quiero que ese listado me acompañe en cualquier página de la tienda.</p>
<p>Así que defino para la tienda una plantilla intermedia que hereda de la plantilla base</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #66cc66;">{</span># templates<span style="color: #66cc66;">/</span>tienda<span style="color: #66cc66;">/</span>intermedia.html.twig #<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% extends <span style="color: #ff0000;">'base.html.twig'</span> %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% block <span style="color: #000066;">title</span> %<span style="color: #66cc66;">}</span>Bienvenido a la Tienda de Twig<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% block barra_lateral %<span style="color: #66cc66;">}</span><br />
<<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/tienda/peluches"</span>>Peluches<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/tienda/camisetas"</span>>Camisetas<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"/tienda/posters"</span>>Posters<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>><br />
<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span><br />
<br />
<span style="color: #66cc66;">{</span>% block footer %<span style="color: #66cc66;">}</span><br />
<<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"footer"</span>>Todos los artículos que se venden en la tienda son <span style="color: #cc66cc;">100</span>% ecológicos<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><br />
<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span></div></td></tr></tbody></table></div>
<p>Y ahora haré que todas las páginas de la tienda heredarán de esta plantilla que a su vez hereda de la plantilla base</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #66cc66;">{</span># templates<span style="color: #66cc66;">/</span>tienda<span style="color: #66cc66;">/</span>ofertas.html.twig #<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% extends <span style="color: #ff0000;">'tienda/intermedia.html.twig'</span> %<span style="color: #66cc66;">}</span><br />
<br />
<span style="color: #66cc66;">{</span>% block contenido %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% <span style="color: #000066;">for</span> articulo in ofertas %<span style="color: #66cc66;">}</span><br />
<<a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>><span style="color: #66cc66;">{</span><span style="color: #66cc66;">{</span> articulo.nombre <span style="color: #66cc66;">}</span><span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>><br />
<<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"{{ articulo.imagen_url }}"</span>><br />
<<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><span style="color: #66cc66;">{</span><span style="color: #66cc66;">{</span> articulo.descripcion <span style="color: #66cc66;">}</span><span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><br />
<<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>>Precio: <span style="color: #66cc66;">{</span><span style="color: #66cc66;">{</span> articulo.precio <span style="color: #66cc66;">}</span><span style="color: #66cc66;">}</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><br />
<span style="color: #66cc66;">{</span>% endfor %<span style="color: #66cc66;">}</span><br />
<span style="color: #66cc66;">{</span>% endblock %<span style="color: #66cc66;">}</span></div></td></tr></tbody></table></div>
<h3Algunos consejos antes de ponerte manos a la obra</h3>
<ul>
<li>Puedes emplear tantos niveles de herencia como desees, pero el más común es este que hemos visto a tres niveles. Más quizás sea complicarte la vida</li>
<li>Cuantas más etiquetas {% block %} incluyas mejor. Las plantillas hijas no tienen que definir todos los bloques de la madre, por lo que puedes crear tantos bloques como vayas a necesitar en las distintas plantillas. Mientras más bloques más flexible será la plantilla.</li>
<p><l>El contenido de un bloque de una plantilla madre se puede reutilizar con la función {{ parent() }}. Esto es útil si quieres añadir contenido al bloque madre en lugar de sobreescribirlo entero. Además puedes poner tu nuevo contenido por encima o por debajo del heredado según te convenga</li>
<li>Si ves que estás duplicando contenido quizás debas mover ese contenido a un {% block %} en una plantilla madre, aunque a veces es mejor moverlo a una plantilla aparte a la que llamarás como include</li>
</ul>
]]></content:encoded>
<wfw:commentRss>http://galatar.com/herencia-compleja-de-plantillas-en-twig/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">104</post-id>
</item>
<item>
<title>Como crear una lista horizontal con HTML y CSS</title>
<link>http://galatar.com/como-crear-una-lista-horizontal-con-html-y-css/</link>
<comments>http://galatar.com/como-crear-una-lista-horizontal-con-html-y-css/#respond</comments>
<pubDate>Mon, 25 Jun 2018 08:01:45 +0000</pubDate>
<dc:creator><![CDATA[Juanan Ruiz]]></dc:creator>
<category><![CDATA[CSS]]></category>
<guid isPermaLink="false">http://galatar.com/?p=88</guid>
<description>
<![CDATA[Si lo piensas un poco HTML es un lenguaje enfocado a apilar los contenidos verticalmente. Los únicos contenidos que quedan alineados horizontalmente son los que están dentro de una misma etiqueta o los que utilizan etiquetas de caracteres como <b>, <i>, <a>, <span> El resto de etiquetas va enfocada a bloques y la disposición por […]]]></description>
<content:encoded><![CDATA[<p><img src="http://galatar.com/wp-content/uploads/2018/06/lista-horizontal-iconos-300x163.png" alt="Iconos con distribución vertical y horizontal" width="300" height="163" class="aligncenter size-medium wp-image-156" srcset="http://galatar.com/wp-content/uploads/2018/06/lista-horizontal-iconos-300x163.png 300w, http://galatar.com/wp-content/uploads/2018/06/lista-horizontal-iconos.png 744w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>Si lo piensas un poco HTML es un lenguaje enfocado a apilar los contenidos verticalmente. Los únicos contenidos que quedan alineados horizontalmente son los que están dentro de una misma etiqueta o los que utilizan etiquetas de caracteres como <b><b></b>, <b><i></b>, <b><a></b>, <b><span></b></p>
<p>El resto de etiquetas va enfocada a bloques y la disposición por defecto es que se alineen verticalmente <b><h1></b>, <b><p></b>, <b><div></b>, <b><li></b>, <b><dd></b>, <b><dt></b></p>
<p>La única etiqueta de bloque que te permite alinear contenido horizontalmente es la de la celda de una tabla <b><td></b> y ahí caemos todos, muy mal <img src="https://s.w.org/images/core/emoji/2.4/72x72/1f641.png" alt="🙁" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
<span id="more-88"></span></p>
<p>Las tablas solo deben usarse para mostrar contenido que deba ir alineado en filas y columnas, vaya, para datos tabulados. Utiliza la siguiente regla: si los elementos de una fila determinada se pueden pasar a la fila siguiente sin que la información pierda sentido entonces quizás no debería estar usando una tabla. Por ejemplo imagina que quieres poner una serie de productos de una tienda online en una rejilla para que no ocupen tanto espacio, ¡no uses una tabla!.</p>
<p>¿Que haces entonces? ¡CSS al rescate! CSS te permite cambiar esta manía apilatoria del HTML y permitir distribuir elementos de manera horizontal de manera mucho más efectiva y responsiva que como lo haría una tabla. En el ejemplo anterior de los productos online sólo tienes que poner cada producto dentro de una etiqueta <b><div></b> y asignarle el estilo <b>float: left;</b> en el CSS para que queden alineados horizontalmente, además el número de artículos en cada fila se ajustará automáticamente al ancho de la pantalla.</p>
<p>Cuando los elementos que queremos distribuir horizontalmente son más sencillos no deberíamos usar <b><div></b> sino las etiquetas para listas de HTML: <b><ul> <li></b> Es el caso típico de un menú de navegación, una lista de iconos de redes sociales o cualquier caso parecido. Vamos a ver un ejemplo con texto y luego otro con imágenes o iconos.</p>
<p>Para hacer un menú de opciones deberíamos entonces hacer algo así:</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><<a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">style</span></a>><br />
ul.navega li <span style="color: #66cc66;">{</span><br />
display: inline;<br />
<span style="color: #66cc66;">}</span><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">style</span></a>><br />
<<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"navega"</span>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>>Inicio<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>>Blog<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>>Tienda<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>>Contactar<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></div></td></tr></tbody></table></div>
<p>Como ves lo único que necesitas es definir una clase para la lista e indicar mediante CSS que muestre los elementos de esa lista en formato 'inline'.</p>
<p>Ahora te propongo "jugar" un poco con este ejemplo. Duplica o triplica el número de elementos de la lista y luego prueba a reducir el ancho de la ventana de tu navegador. Verás como el contenido se adapta al ancho, esto es algo que no sucedería con una tabla, pruébalo también. (Para poder cambiar el código utiliza el enlace “Edit on CodePen que aparece en la ventana inferior)</p>
<p data-height="183" data-theme-id="0" data-slug-hash="jKxazo" data-default-tab="html,result" data-user="juananruiz" data-embed-version="2" data-pen-title="Listas horizontales" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/juananruiz/pen/jKxazo/">Listas horizontales</a> by Juanan (<a href="https://codepen.io/juananruiz">@juananruiz</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://static.codepen.io/assets/embed/ei.js"></script></p>
<p>Puedes hacer algo parecido con iconos</p>
<div class="codecolorer-container html4strict solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><<a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">style</span></a>><br />
@import url<span style="color: #66cc66;">(</span>https:<span style="color: #66cc66;">//</span>cdnjs.cloudflare.com<span style="color: #66cc66;">/</span>ajax<span style="color: #66cc66;">/</span>libs<span style="color: #66cc66;">/</span>font-awesome<span style="color: #66cc66;">/</span>4.6.3<span style="color: #66cc66;">/</span>css<span style="color: #66cc66;">/</span>font-awesome.css<span style="color: #66cc66;">)</span>;<br />
.social-icons li <span style="color: #66cc66;">{</span><br />
vertical-<span style="color: #000066;">align</span>: top;<br />
display: inline;<br />
font-<span style="color: #000066;">size</span>: 1.2em;<br />
padding: 0.5em;<br />
<span style="color: #66cc66;">}</span><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;">style</span></a>><br />
<<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icons"</span>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icon"</span>> <<a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fa fa-facebook"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icon"</span>> <<a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fa fa-twitter"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icon"</span>> <<a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fa fa-rss"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icon"</span>> <<a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fa fa-youtube"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"social-icon"</span>> <<a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fa fa-google-plus"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/i.html"><span style="color: #000000; font-weight: bold;">i</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></div></td></tr></tbody></table></div>
<p data-height="174" data-theme-id="0" data-slug-hash="BVxJGo" data-default-tab="html,result" data-user="juananruiz" data-embed-version="2" data-pen-title="Menú horizontal con iconos" class="codepen">See the Pen <a href="https://codepen.io/juananruiz/pen/BVxJGo/">Menú horizontal con iconos</a> by Juanan (<a href="https://codepen.io/juananruiz">@juananruiz</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://static.codepen.io/assets/embed/ei.js"></script></p>
]]></content:encoded>
<wfw:commentRss>http://galatar.com/como-crear-una-lista-horizontal-con-html-y-css/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">88</post-id>
</item>
<item>
<title>Cómo acceder a la API de WordPress desde PHP</title>
<link>http://galatar.com/como-acceder-a-la-api-de-wordpress-desde-php/</link>
<comments>http://galatar.com/como-acceder-a-la-api-de-wordpress-desde-php/#respond</comments>
<pubDate>Tue, 29 May 2018 16:06:18 +0000</pubDate>
<dc:creator><![CDATA[Juanan Ruiz]]></dc:creator>
<category><![CDATA[WordPress]]></category>
<guid isPermaLink="false">http://galatar.com/?p=61</guid>
<description>
<![CDATA[En este artículo te muestro un ejemplo de una API de una aplicación web, en este caso la API REST de WordPress. Tras la explicación inicial te planteo un reto para que intentes ver en la práctica como funciona esta API, que utilidades podrías darle y cómo atacarla desde PHP. Más adelante tienes una posible […]]]></description>
<content:encoded><![CDATA[<p>En este artículo te muestro un ejemplo de una API de una aplicación web, en este caso la API REST de WordPress. Tras la explicación inicial te planteo un reto para que intentes ver en la práctica como funciona esta API, que utilidades podrías darle y cómo atacarla desde PHP.</p>
<p>Más adelante tienes una posible solución al ejercicio por si te has quedado atascado en el alguno de los pasos o para que puedas compararla con la tuya.<span id="more-61"></span></p>
<h2>Bueno, pero ¿qué es una API?</h2>
<p>Una <strong>API</strong>,<strong> Application Programming Interface </strong>o<strong> Interfaz de Programación de Aplicaciones</strong>, es un conjunto de métodos que permiten acceder a las funciones de un programa. Sería algo así como un programa hablando con otro programa o una máquina hablando con otra máquina.</p>
<p>Las APIs suelen devolver resultado en dos formatos <strong>XML</strong>, que es muy parecido a HTML pero más estructurado (y que se usa menos en este ámbito porque es una lata) y <strong>JSON</strong> que es más fácil de generar y de procesar posteriormente.</p>
<p>Es el creador de la API quién decidirá que funcionalidad expone públicamente, que nivel de autorización será necesario para utilizar cada una de ellas y que información proporcionará en cada momento.</p>
<p>Las buenas aplicaciones web suelen tener una API potente y bien documentada que permite acceder a sus funciones desde otras propias aplicaciones, aquí tienes algunos ejemplos de APIs:</p>
<ul>
<li><a href="https://developers.google.com/custom-search/json-api/v1/overview?hl=es">Google Search API</a></li>
<li><a href="https://developer.twitter.com/en.html">Twitter APIs</a></li>
<li><a href="https://developer.wordpress.org/rest-api/">WordPress API</a></li>
</ul>
<p>Esta última es la base de este artículo y el punto de partida para que comience tu reto.</p>
<h2>¿Qué es la API de WordPress?</h2>
<p>Cuando accedes como usuario a un <a href="http://demo.wp-api.org/">sitio web hecho con WordPress</a> puedes ver en tu navegador los contenidos que el autor publica, maquetados con fotos, columnas, menús, etc. Si un programa informático intentará acceder a esta misma información lo que obtendría es un documento de texto en formato HTML que pintaría más o menos así.</p>
<pre>
<div class="codecolorer-container html4strict solarized-light language-html" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><article <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"post-1"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"post"</span>><header <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"entry-header"</span>><br />
<<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"entry-meta"</span>>May <span style="color: #cc66cc;">23</span>, <span style="color: #cc66cc;">2017</span><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>><br />
<<a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"entry-title"</span>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://demo.wp-api.org/2017/05/23/hello-world/"</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"bookmark"</span>>Hello world!<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>><br />
<<span style="color: #66cc66;">/</span>header><br />
<<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"entry-content"</span>><br />
<<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>>Welcome to <<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://wp-api.org/"</span>>WP API Demo Sites<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>>. This is your first post. Edit or delete it, then <span style="color: #000066;">start</span> blogging!<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><br />
<<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>><br />
<<span style="color: #66cc66;">/</span>article><br />
...</div></td></tr></tbody></table></div>
</pre>
<p>Si te fijas un poco hay bastante información, pero es difícil de entender porque no vemos claramente la estructura, tal como aparece cuando se nos presenta en modo gráfico. Para las personas es más fácil ver y consumir esta información en el contexto de un navegador, que se mostraría más o menos como en la imagen.</p>
<p><img class="aligncenter size-large wp-image-65" src="http://galatar.com/wp-content/uploads/2018/05/homepage_wp_api-1024x688.png" alt="" width="1024" height="688" srcset="http://galatar.com/wp-content/uploads/2018/05/homepage_wp_api-1024x688.png 1024w, http://galatar.com/wp-content/uploads/2018/05/homepage_wp_api-300x202.png 300w, http://galatar.com/wp-content/uploads/2018/05/homepage_wp_api-768x516.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Este formato, tan agradable para nosotros, es muy difícil de digerir para un programa informático que necesite extraer información a partir de la página. Imagina que te pido que crees un programa que obtenga los títulos de los artículos o posts que aparecen en esta página y un enlace a su contenido completo. Lo tendrías crudo ¿verdad?</p>
<p>Por suerte hay otra forma de acceder a esta información utilizando un formato más estructurado, y por tanto más fácil de procesar para un programa informático, además, no sólo permite leer contenido del sitio web, sino que, con la autenticación pertinente, podrías modificar la información o agregar nuevo contenido.</p>
<p>Si accedes al sitio web anterior utilizando la siguiente url <a class="url" href="http://demo.wp-api.org/wp-json" target="_blank" rel="noopener">http://demo.wp-api.org/wp-json</a> obtendrás algo parecido a esto:</p>
<pre>
<div class="codecolorer-container javascript solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #009900;">{</span><span style="color: #3366CC;">"name"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"WP REST API Demo"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"description"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"Just another WP API Demo Sites <br />
site"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"url"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-api.org"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"home"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-<br />
api.org"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"gmt_offset"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"0"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"timezone_string"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">""</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"permalink_structure"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"<span style="color: #000099; font-weight: bold;">\/</span>%year%<span style="color: #000099; font-weight: bold;">\/</span>%monthnum%<span style="color: #000099; font-weight: bold;">\/</span>%da<br />
y%<span style="color: #000099; font-weight: bold;">\/</span>%postname%<span style="color: #000099; font-weight: bold;">\/</span>"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"namespaces"</span><span style="color: #339933;">:</span><span style="color: #009900;">[</span><span style="color: #3366CC;">"oembed<span style="color: #000099; font-weight: bold;">\/</span>1.0"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"broker<span style="color: #000099; font-weight: bold;">\/</span>v1"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"wp<span style="color: #000099; font-weight: bold;">\/</span>v2"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"authentication"</span><span style="color: #339933;">:</span><br />
<span style="color: #009900;">{</span><span style="color: #3366CC;">"oauth1"</span><span style="color: #339933;">:</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"request"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-<br />
api.org<span style="color: #000099; font-weight: bold;">\/</span>oauth1<span style="color: #000099; font-weight: bold;">\/</span>request"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"authorize"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-<br />
api.org<span style="color: #000099; font-weight: bold;">\/</span>oauth1<span style="color: #000099; font-weight: bold;">\/</span>authorize"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"access"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-<br />
api.org<span style="color: #000099; font-weight: bold;">\/</span>oauth1<span style="color: #000099; font-weight: bold;">\/</span>access"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"version"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"0.1"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"broker"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-api.org<span style="color: #000099; font-weight: bold;">\/</span>wp-<br />
json<span style="color: #000099; font-weight: bold;">\/</span>broker<span style="color: #000099; font-weight: bold;">\/</span>v1<span style="color: #000099; font-weight: bold;">\/</span>connect"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"routes"</span><span style="color: #339933;">:</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"<span style="color: #000099; font-weight: bold;">\/</span>"</span><span style="color: #339933;">:</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"namespace"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">""</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"methods"</span><span style="color: #339933;">:</span><span style="color: #009900;">[</span><span style="color: #3366CC;">"GET"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"endpoints"</span><span style="color: #339933;">:</span><br />
<span style="color: #009900;">[</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"methods"</span><span style="color: #339933;">:</span><span style="color: #009900;">[</span><span style="color: #3366CC;">"GET"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"args"</span><span style="color: #339933;">:</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"context"</span><span style="color: #339933;">:</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"required"</span><span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"default"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"view"</span><span style="color: #009900;">}</span><span style="color: #009900;">}</span><span style="color: #009900;">}</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"_links"</span><span style="color: #339933;">:</span><br />
<span style="color: #009900;">{</span><span style="color: #3366CC;">"self"</span><span style="color: #339933;">:</span><span style="color: #3366CC;">"https:<span style="color: #000099; font-weight: bold;">\/</span><span style="color: #000099; font-weight: bold;">\/</span>demo.wp-api.org<span style="color: #000099; font-weight: bold;">\/</span>wp-json<span style="color: #000099; font-weight: bold;">\/</span>"</span><span style="color: #009900;">}</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
...</div></td></tr></tbody></table></div>
</pre>
<p>Este galimatías es un fichero JSON que contiene, de manera muy estructurada, toda la información que devuelve la API del sitio cuando haces una llamada por defecto. Si tienes una versión actualizada de Firefox podrás verlo así de bonito:</p>
<p><img class="aligncenter size-large wp-image-64" src="http://galatar.com/wp-content/uploads/2018/05/json-wp-api-1024x444.png" alt="" width="1024" height="444" srcset="http://galatar.com/wp-content/uploads/2018/05/json-wp-api-1024x444.png 1024w, http://galatar.com/wp-content/uploads/2018/05/json-wp-api-300x130.png 300w, http://galatar.com/wp-content/uploads/2018/05/json-wp-api-768x333.png 768w, http://galatar.com/wp-content/uploads/2018/05/json-wp-api.png 1556w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>El ejemplo que acabas de ver es sólo un fragmento mínimo de toda la funcionalidad de la API de WordPress, una API que además sigue en desarrollo e incorporando nuevas funciones. Si tienes curiosidad aquí tienes una <a href="%20https://codex.wordpress.org/WordPress_APIs">lista de todas las APIs disponibles en WordPress</a>.</p>
<p>Hasta hace poco en los sitios web de WordPress esto se hacía con un plugin que el administrador del sitio instalaba , pero desde la versión 4.7 viene como una funcionalidad activa por defecto.</p>
<h3>¿Porqué se llama API REST?</h3>
<p>No todas las APIs funcionan de la misma manera, pero sería una locura que cada vez que alguien crea una API lo hiciera sin ceñirse a unos estándares o convenciones. Uno de los estándares más extendidos para APIs basadas en el protocolo HTTP (el protocolo de la Web) es <strong><a href="https://es.wikipedia.org/wiki/Transferencia_de_Estado_Representacional">REST</a></strong>, <strong>Representational State Transfer</strong> o <strong>Transferencia de Estado Representacional</strong>. REST es un protocolo cliente servidor sin estado (al igual que HTTP), con unas pocas operaciones básicas definidas: GET, POST, PUT y DELETE; los recursos son accedidos mediante <strong>URIs</strong> bien definidas (una URI es como una URL pero más completa); además la información que devuelve una API REST debe contener hiperenlaces para acceder a otros recursos.</p>
<h2>Planteamiento del reto</h2>
<p>En lugar de leer este tutorial de cabo a rabo te animo a asumirlo como un reto intentando hallar tu propia solución antes de ver la que planteo al final como ejemplo.</p>
<p>En el camino aprenderás a confiar en tus propios recursos, a desarrollar tus capacidades de búsqueda y rastreo de la información y a encontrar una solución original que seguramente supere la aquí propuesta.</p>
<h3>¿Te apuntas? ¡Vamos a ello!</h3>
<p>El reto que te planteo consiste en crear una sencilla página web con PHP accediendo al contenido de algún blog basado en WordPress, como ejemplo puedes usar el blog de ejemplo de la API de WordPress, a cuya API se accede con la siguiente URL <a class="url" href="http://demo.wp-api.org/wp-json" target="_blank" rel="noopener">http://demo.wp-api.org/wp-json</a>/.</p>
<p>Usando esta API te propongo obtener una lista de los artículos que aparecen en portada con un enlace a cada artículo. Cuidado porque la API anterior da alguna pista para encontrar los posts, pero no da directamente los posts, para eso hay otra URL que debes descubrir, pero cuidado porque la URL ha cambiado un par de veces con las versiones de la API y puede que encuentres alguna información anticuada.</p>
<p>Una vez obtenida la URL correcta hay varias maneras de llamar a una API desde PHP, busca en el <a href="http://php.net/manual/es/">manual en línea</a> o mejor pregunta directamente en Google hasta encontrar una que sea lo más simple posible.</p>
<p>Luego tendrás que procesar la información que te devuelve y generar una página HTML sencilla pero completa con el listado de artículos enlazados al contenido de cada uno de ellos en el blog de origen.</p>
<p>Cuando termines puedes dejar tu solución en los comentarios de esta entrada del blog, también puedes acudir ahí para preguntarme alguna duda, aunque te advierto que yo mismo estoy todavía empezando con este tema.</p>
<h2>¡Atención Spoiler!</h2>
<p>A partir de aquí te doy mi solución al reto que planteo. Seguro que no es la mejor, espero que alguien aporte algo más elegante o completo en los comentarios.</p>
<p>Para el ejemplo voy a utilizar mi blog personal al que tengo un poco abandonado, la URL o mejor la URI de la API con los últimos posts sería la siguiente:</p>
<p><a class="url" href="http://wikijuanan.com/wp-json/wp/v2/posts" target="_blank" rel="noopener">http://wikijuanan.com/wp-json/wp/v2/posts</a></p>
<p>Aquí tienes el código PHP que permite acceder a la API y formatear lo que esta me devuelve para generar mi propia página web:</p>
<pre>
<div class="codecolorer-container html4strict solarized-light language-php+html" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #009900;"><?php</span><br />
<span style="color: #009900;">$uri <span style="color: #66cc66;">=</span> <span style="color: #ff0000;">'http://wikijuanan.com/wp-json/wp/v2/posts'</span>;</span><br />
<span style="color: #009900;">$json <span style="color: #66cc66;">=</span> file_get_contents<span style="color: #66cc66;">(</span>$uri<span style="color: #66cc66;">)</span>;</span><br />
<span style="color: #009900;">$posts<span style="color: #66cc66;">=</span> json_decode<span style="color: #66cc66;">(</span>$json<span style="color: #66cc66;">)</span>;</span><br />
<br />
<span style="color: #009900;">echo <span style="color: #ff0000;">"<html><body><h1></span></span>Blog Wikijuanan<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">h1</span></a>><<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></span>";<br />
foreach ($posts as $post) { <br />
echo "<span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">'" . $post-></span></span>link . "'>" . $post->title->rendered . "<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>\n";<br />
}<br />
echo "<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a>></span>";</div></td></tr></tbody></table></div>
</pre>
<p>Se podrían hacer muchas más cosas, como poner el autor de cada artículo, la fecha de publicación, un resumen del mismo, etc.</p>
<p>Y esto no es nada, también podríamos acceder a la API autenticándonos previamente para publicar contenidos, contestar comentarios automáticamente, etc. Pero yo ahí todavía no he llegado…</p>
<h2>Resumiendo</h2>
<p>La API REST de WordPress provee la funcionalidad necesaria para que una aplicación pueda consultar, añadir, modificar y eliminar información de una instalación de WordPress.<br />
Para obtener y enviar información al sitio se utiliza el formato JSON, que es la notación de JavaScript para representar objetos de manera literal.<br />
Para “atacar” esta API se puede utilizar cualquier lenguaje o tecnología: JavaScript, PHP, Java, Node.js, Python, etc. Con la API de WordPress se puede hacer cualquier cosa, el límite es nuestra imaginación.</p>
<h2>Enlaces para seguir aprendiendo</h2>
<ul>
<li><a class="url" href="https://developer.wordpress.org/rest-api/" target="_blank" rel="noopener">https://developer.wordpress.org/rest-api/</a></li>
<li><a class="url" href="https://www.genbetadev.com/desarrollo-web/wordpress-rest-api" target="_blank" rel="noopener">https://www.genbetadev.com/desarrollo-web/wordpress-rest-api</a></li>
<li><a class="url" href="https://decodecms.com/como-usar-la-rest-api-de-wordpress/" target="_blank" rel="noopener">https://decodecms.com/como-usar-la-rest-api-de-wordpress/</a></li>
<li><a class="url" href="https://www.hostinger.es/tutoriales/guia-para-principiantes-api-rest-wordpress/" target="_blank" rel="noopener">https://www.hostinger.es/tutoriales/guia-para-principiantes-api-rest-wordpress/</a></li>
<li><a class="url" href="https://codex.wordpress.org/WordPress_APIs" target="_blank" rel="noopener">https://codex.wordpress.org/WordPress_APIs</a></li>
</ul>
<h2>Agradecimientos</h2>
<p>Este artículo va dedicado a dos personas:</p>
<p>A mi compañero Mario, junto al que aprendo Symfony mientras comemos palmeras como si no hubiera mañana, que fue quien me introdujo el gusanillo este de la API de WordPress.</p>
<p>Y a Nuria, a quien intento enseñar programación, y que con sus constantes maquinaciones para dominar WordPress me animó sin saberlo a escribir este artículo para empezar a explorar el asunto.</p>
]]></content:encoded>
<wfw:commentRss>http://galatar.com/como-acceder-a-la-api-de-wordpress-desde-php/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">61</post-id>
</item>
<item>
<title>Automatiza la creación de tus proyectos con Composer</title>
<link>http://galatar.com/automatiza-la-creacion-de-tus-proyectos-con-composer/</link>
<comments>http://galatar.com/automatiza-la-creacion-de-tus-proyectos-con-composer/#comments</comments>
<pubDate>Tue, 30 Jan 2018 18:25:37 +0000</pubDate>
<dc:creator><![CDATA[Juanan Ruiz]]></dc:creator>
<category><![CDATA[Herramientas]]></category>
<guid isPermaLink="false">http://galatar.com/?p=17</guid>
<description>
<![CDATA[Que es Composer y en que puede ayudarme Cuando creas un nuevo proyecto de desarrollo de código, sea en el lenguaje que sea, no creo que empieces desde cero y teclees todo el código desde principio a fin. Normalmente vas a utilizar partes de algún proyecto ya desarrollado, por ti u otra persona, como eje […]]]></description>
<content:encoded><![CDATA[<h2>Que es Composer y en que puede ayudarme</h2>
<p>Cuando creas un nuevo proyecto de desarrollo de código, sea en el lenguaje que sea, no creo que empieces desde cero y teclees todo el código desde principio a fin. Normalmente vas a utilizar partes de algún proyecto ya desarrollado, por ti u otra persona, como eje del proyecto y luego irás añadiendo librerías por aquí y por allá para empezar con alguna base. Me arriesgaría a decir que todo este código “importado” puede llegar a suponer el 75% del proyecto.</p>
<p>Normalmente lo que hacemos para esta tarea es copiar una carpeta de una librería que usamos en un proyecto del año pasado, otra que encontramos hace poco en la web, código que hemos desarrollado para un proyecto anterior y que poco a poco vamos adaptando a este, etc.</p>
<p>El problema es que vamos mezclando versiones de librería que muchos veces son incompatibles entre si (no las librerías, sino las versiones) o que son incompatibles con nuestra versión actual de PHP. Además suele ser una locura casarlas entre si, llamar a unas desde otra y, no digamos ya, actualizarlas cuando salgan nuevas versiones o parches de seguridad.</p>
<p>Para este tipo de escenarios, propios de una peli de terror, se inventaron los gestores de dependencias, que no son otra cosa que utilidades que te ayudan a instalar los paquetes que necesites y a ir comprobando e instalado las dependencias que, a su vez, tienen esos paquetes para funcionar.<br />
<span id="more-17"></span><br />
A nivel de sistema operativo un ejemplo serían <strong>apt</strong> y <strong>yum</strong> en Linux; para Javascript existen <strong>npm</strong> o <strong>bower</strong> y Java tiene <strong>Maven</strong>. Para PHP tenemos la fortuna de contar con <strong>Composer</strong></p>
<p><img class="aligncenter wp-image-18 size-full" src="http://galatar.com/wp-content/uploads/2018/01/logo-composer.png" alt="" width="250" srcset="http://galatar.com/wp-content/uploads/2018/01/logo-composer.png 290w, http://galatar.com/wp-content/uploads/2018/01/logo-composer-244x300.png 244w" sizes="(max-width: 290px) 100vw, 290px" /></p>
<h3>Instalación desde Windows</h3>
<p>Descarga el ejecutable para hacer una instalación automatizada desde la web de Composer <a href="https://getcomposer.org/doc/00-intro.md#installation-windows" target="_blank" rel="noopener">https://getcomposer.org/doc/00-intro.md#installation-windows</a></p>
<p>Tras la instalación podrás utilizar Composer desde cualquier directorio utilizando la línea de comandos y tecleando <b>php composer.phar</b></p>
<h3>Instalación desde Linux y Mac</h3>
<p>Accede a la página de instalación de Composer y sigue las instrucciones <a href="https://getcomposer.org/download/" target="_blank" rel="noopener">https://getcomposer.org/download/</a> (el proceso de instalación cambia con cada versión así que es mejor que lo mires allí). Desde estos sistemas se puede utilizar Composer directamente desde línea de comando como si fuera un ejecutable sin necesidad de invocar a php. Así que, una vez instalado abre un terminal y teclea <b>composer</b></p>
<h2>Comenzar a utilizar Composer</h2>
<p>Composer no funciona a nivel global, sino a nivel de proyecto. Una vez instalado accede desde una terminal o línea de comandos al directorio raíz de tu proyecto y teclea <b>composer init</b> ó <b>php composer.phar init</b> si desarrollas con Windows.</p>
<p>Esto arranca el generador de configuración de Composer, que, de manera interactiva te irá pidiendo datos para generar el fichero de configuración de dependencias para tu proyecto, el fichero <b>composer.json</b>.</p>
<p>Te recomiendo irlo haciendo en paralelo a medida que vas siguiendo este tutorial.</p>
<p><img class="aligncenter size-large wp-image-19" src="http://galatar.com/wp-content/uploads/2018/01/composer_init-1024x531.png" alt="Cuadro de diálogo de composer init" width="700" srcset="http://galatar.com/wp-content/uploads/2018/01/composer_init-1024x531.png 1024w, http://galatar.com/wp-content/uploads/2018/01/composer_init-300x156.png 300w, http://galatar.com/wp-content/uploads/2018/01/composer_init-768x398.png 768w, http://galatar.com/wp-content/uploads/2018/01/composer_init.png 1130w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Primero te pide el nombre del proyecto que vas a generar, en realidad el lo llama “package” porque para Composer todo son paquetes y el formato que suele usarse es: <b>nombre_desarrollador/nombre_paquete</b>, si eres un pistolero solitario, o <b>nombre_empresa/nombre_paquete</b> si desarrollas para una empresa u organización. Luego te pide una descripción del proyecto, un número de versión para reflejar el estado de madurez del mismo (puedes dejarlo en blanco de momento), el tipo de paquete que vas a crear: librería, proyecto, metapaquete, plugin de Composer y por último el <a href="https://es.wikipedia.org/wiki/Licencia_de_software">tipo de licencia</a> que vas a usar para tu proyecto (propietaria, GPL, BSD, MIT, etc. ).</p>
<p>Con esto ya tienes los parámetros básicos de tu proyecto, a continuación puedes empezar a declarar las dependencias que vas a utilizar. Para ello, continúa con la configuración (dile <strong>Yes</strong> cuando te pregunte si vas a definir dependencias).</p>
<p>Para cada dependencia que quieras definir primero pones el nombre aproximado del paquete para que Composer lo busque en su base de datos de paquetes (<a href="https://packagist.org/" target="_blank" rel="noopener">https://packagist.org/</a>), luego eliges uno de entre los resultados y a continuación pones la versión que quieres (déjalo en blanco si quieres la última). A modo de ejemplo instala el gestor de plantillas <strong>twig/twig</strong>. Tardará un poquito y de nuevo te preguntará si quieres seguir agregando dependencias.</p>
<p>Si quieres puedes seguir definiendo dependencias, cuando quieras parar pulsa la tecla <b>enter</b> la próxima vez que te pregunte <b>Search for a package:</b></p>
<p>Cuidado no pulses <b>CTRL-C</b> ni cierres el terminal antes de terminar porque abortarías todo el proceso.</p>
<p>A continuación te pregunta si quieres definir dependencias en fase de desarrollo, si tienes alguna clara, adelante, si no teclea <b>No</b> para salir. Entonces te preguntará si quieres crear el fichero de configuración con los datos que has ido proporcionando, teclea <b>Yes</b> o pulsa <b>enter</b> para terminar.</p>
<p>Con esto se genera un fichero que se graba en la carpeta de tu proyecto como <b>composer.json</b> Abre el fichero para darle un vistazo y verás que contiene las opciones que has ido indicando.</p>
<div class="codecolorer-container javascript solarized-light language-js" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"name"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"galatar/tuto_composer"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"description"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"Tutorial sobre composer"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"type"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"project"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"require"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"twig/twig"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"^2.4"</span><br />
<span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"authors"</span><span style="color: #339933;">:</span> <span style="color: #009900;">[</span><br />
<span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"name"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"Juanan Ruiz"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"email"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"juanan@us.es"</span><br />
<span style="color: #009900;">}</span><br />
<span style="color: #009900;">]</span><br />
<span style="color: #009900;">}</span></div></td></tr></tbody></table></div>
<p>De momento no se ha descargado nada, ni se ha creado ningún otro fichero, para que Composer ejecute el fichero de configuración que acabas de definir escribe <b>composer install</b> en tu terminal.</p>
<p>Una vez que termine el proceso de descarga, a veces tarda un rato, puedes echar un vistazo a las carpetas y ficheros que se han creado en tu proyecto, en principio tendrás un nuevo fichero <b>composer.lock</b> y una carpeta <b>vendor</b></p>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">.<br />
├── composer.json<br />
├── composer.lock<br />
└── vendor<br />
├── autoload.php<br />
├── composer<br />
├── symfony<br />
└── twig</div></td></tr></tbody></table></div>
<p>El fichero <strong>composer.lock</strong> almacena los datos de los paquetes que Composer ha descargado, si le das un vistazo verás que contiene bastante información porque cada paquete que descargas tiene su propio fichero de dependencias (su propio composer.json) que queda reflejado en este fichero. Ten cuidado porque nunca debes tocar este fichero a mano, los cambios que necesites realizar los haces en tu fichero <b>composer.json</b> y luego los haces efectivos con la orden <b>composer update</b> . Por último, pero no menos importante, Composer crea la carpeta <b>vendor</b> donde se guardan los ficheros de los paquetes que has instalado y los ficheros que el propio Composer necesita para funcionar.</p>
<h2>Instalar paquetes para el entorno de desarrollo</h2>
<p>Composer también te permite especificar paquetes que en principio estarán disponibles sólo en modo “desarrollo”, o sea, que solo deberían descargarse y utilizarse en los equipos de desarrollo y testeo de tu aplicación.</p>
<p>Habrás visto que una de las opciones que aparece al final del asistente de <b>composer init</b> dice algo así:</p>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">Would you like to define your dev dependencies (require-dev) interactively [yes]?</div></td></tr></tbody></table></div>
<p>Pues los paquetes que instales en ese momento se instalarán en una rama especial del fichero <b>composer.json</b> llamada <b>require-dev</b>.</p>
<p>Si no lo haces en ese momento también podrás añadir paquetes a esa rama en cualquier momento desde la línea de comandos usando algo como: <b>composer require monolog/monolog –dev</b></p>
<p>Que instala <strong>Monolog</strong> un paquete de gestión de información super completo para hacer el seguimiento de logs de tu proyecto en modo desarrollo. Dentro de tu archivo composer.json se añadirá algo así:</p>
<div class="codecolorer-container javascript solarized-light language-js" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">...<br />
<span style="color: #3366CC;">"require-dev"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"monolog/monolog"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"^1.23"</span><span style="color: #339933;">,</span><br />
<span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
...</div></td></tr></tbody></table></div>
<p>En cualquier caso ten en cuenta que Composer no puede averiguar por arte de magia cuando está en un equipo de desarrollo y cuando en uno de producción, por lo que cuando estés desplegando tu proyecto en este último utiliza siempre <b>composer install –no-dev</b> o <b>composer update –no-dev</b></p>
<h2>Trabajar con un proyecto existente que utiliza Composer</h2>
<p>Si trabajas en equipo puede que otra persona haya creado y compartido contigo el proyecto. O puede que lo hayas creado tú siguiendo este tutorial y ahora quieras compartirlo con alguien más.</p>
<p>En este caso ya partes de un fichero <b>composer.json</b> que has debido recibir o compartir con el resto del proyecto. Lo que no has debido recibir ni compartir, si estás haciendo las cosas bien, es la carpeta <b>vendor</b> y su contenido.</p>
<p>Esa carpeta con sus ficheros y sus carpetas se van a crear en el nuevo entorno ejecutando <b>composer install</b> desde la raíz del proyecto.</p>
<p>Si utilizas un gestor de dependencias como <b>git</b> para programar en equipo (o simplemente para guardarte las espaldas) debes incluir en tu repositorio los archivos <b>composer.json</b> y <b>composer.lock</b>, pero debes excluir el directorio <b>vendor</b>. Este se creará solito en nuevas instancias de tu proyectos cuando ejecutes el comando <b>composer install</b> como has visto arriba.</p>
<h2>Autocarga de paquetes</h2>
<p>La mayoría de los paquetes que descargues incluirán su propia información de autoload, para poder instanciar las clases que contienen. Otro de las ventajas de Composer es que el se encarga de organizar todo la autocarga directamente desde un fichero centralizado, este fichero se llama <strong>autoload.php</strong> y lo encontrarás en la carpeta <b>vendor</b> de tu proyecto.</p>
<p>Para poder acceder a cualquier clase sólo tendrás que incluir el fichero <b>autoload.php</b> desde tu script.</p>
<div class="codecolorer-container php solarized-light language-php" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000000; font-weight: bold;"><?php</span><br />
<span style="color: #b1b100;">require_once</span> <span style="color: #0000ff;">'../vendor/autoload.php'</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$twig_loader</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Twig_Loader_Filesystem<span style="color: #009900;">(</span><span style="color: #0000ff;">'../templates'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$twig</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Twig_Environment<span style="color: #009900;">(</span><span style="color: #000088;">$twig_loader</span><span style="color: #339933;">,</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">(</span><span style="color: #0000ff;">'cache'</span> <span style="color: #339933;">=></span> <span style="color: #0000ff;">'../cache/twig'</span><span style="color: #339933;">,</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>También puedes cargar tus propias clases utilizando Composer, sigue leyendo.</p>
<h2>Carga tus clases automáticamente con Composer</h2>
<p>Si ya sabes de que van los espacios de nombre en PHP (espero que si) ahora es el momento de declarar el espacio de nombre raíz para tu proyecto y la carpeta donde el interprete de php debe buscar tus clases. Para ello añade algo parecido a lo siguiente en el fichero <b>composer.json</b></p>
<div class="codecolorer-container javascript solarized-light language-js" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #3366CC;">"autoload"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"psr-4"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"Galatar<span style="color: #000099; font-weight: bold;">\\</span>TutoComposer<span style="color: #000099; font-weight: bold;">\"</span>: "</span>src<span style="color: #3366CC;">"<br />
}<br />
}</span></div></td></tr></tbody></table></div>
<p>Con lo que tendrás algo así:</p>
<div class="codecolorer-container javascript solarized-light language-js" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"name"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"galatar/tuto_composer"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"description"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"Tutorial sobre composer"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"type"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"project"</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"require"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"twig/twig"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"^2.4"</span><br />
<span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"require-dev"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"monolog/monolog"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"^1.23"</span><span style="color: #339933;">,</span><br />
<span style="color: #009900;">}</span><span style="color: #339933;">,</span><br />
<span style="color: #3366CC;">"autoload"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"psr-4"</span><span style="color: #339933;">:</span> <span style="color: #009900;">{</span><br />
<span style="color: #3366CC;">"Galatar<span style="color: #000099; font-weight: bold;">\\</span>TutoComposer<span style="color: #000099; font-weight: bold;">\"</span>: "</span>src<span style="color: #3366CC;">"<br />
}<br />
},<br />
"</span>authors<span style="color: #3366CC;">": [<br />
{<br />
"</span>name<span style="color: #3366CC;">": "</span>Juanan Ruiz<span style="color: #3366CC;">",<br />
"</span>email<span style="color: #3366CC;">": "</span>juanan<span style="color: #339933;">@</span>us.<span style="color: #660066;">es</span><span style="color: #3366CC;">"<br />
}<br />
]<br />
}</span></div></td></tr></tbody></table></div>
<p>Ahora por fin podrás empezar a escribir tus primeras clases dejando en manos de Composer la carga automática de las mismas (autoload).</p>
<p>Crea una carpeta <b>src</b> en la raíz del proyecto y crea dentro de ella un fichero <b>Persona.php</b> con el siguiente contenido:</p>
<div class="codecolorer-container php solarized-light language-php" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000000; font-weight: bold;"><?php</span><br />
<span style="color: #666666; font-style: italic;">// src/Persona.php</span><br />
<span style="color: #000000; font-weight: bold;">namespace</span> Galatar\TutoComposer<span style="color: #339933;">;</span><br />
<span style="color: #000000; font-weight: bold;">class</span> Persona<br />
<span style="color: #009900;">{</span><br />
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> saluda<span style="color: #009900;">(</span><span style="color: #009900;">)</span><br />
<span style="color: #009900;">{</span><br />
<span style="color: #b1b100;">print</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"Hola soy una persona"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">}</span><br />
<span style="color: #009900;">}</span></div></td></tr></tbody></table></div>
<p>Crea también en la raíz del proyecto una carpeta <strong>public</strong> y escribe en ella un fichero <strong>index.php</strong> con el siguiente contenido:</p>
<div class="codecolorer-container php solarized-light language-php" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000000; font-weight: bold;"><?php</span><br />
<span style="color: #666666; font-style: italic;">// tuto_galatar/public/index.php</span><br />
<span style="color: #b1b100;">require_once</span> <span style="color: #0000ff;">'../vendor/autoload.php'</span><span style="color: #339933;">;</span><br />
<span style="color: #000000; font-weight: bold;">use</span> Galatar\TutoComposer\Persona<span style="color: #339933;">;</span><br />
<span style="color: #000088;">$persona</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Persona<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$persona</span><span style="color: #339933;">-></span><span style="color: #004000;">saluda</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Ahora tu estructura de directorios debería parecerse a esto, si te fijas ya tienes un pequeño framework:</p>
<div class="codecolorer-container text solarized-light" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">.<br />
├── composer.json<br />
├── composer.lock<br />
├── public<br />
│ └── index.php<br />
├── src<br />
│ └── Persona.php<br />
└── vendor<br />
├── autoload.php<br />
├── composer<br />
├── symfony<br />
└── twig</div></td></tr></tbody></table></div>
<p>Activa desde consola el servidor web que viene integrado con php utilizando la orden: <b>php -S localhost:8000</b><br />
Ahora ve a tu navegador web y teclea <a href="http://localhost:8000" target="_blank" rel="noopener">http://localhost:8000</a></p>
<p>Debería aparecer una página con la frase:<b>Hola soy una persona</b></p>
<p>Gracias por haber llegado hasta aquí y espero que este tutorial te haya sido de utilidad. </p>
<p>Si algo no ha ido bien repasa de nuevo las instrucciones anteriores. Si tienes alguna duda o te gustaría que hablara del algún tema relacionado déjame un comentario e intentaré atenderte en cuanto pueda.</p>
<h3>Para más información</h3>
<ul>
<li><a href="http://librosweb.es/libro/composer/capitulo_2/cargando_clases_de_forma_automatica.html"> Libros Web: Composer, el manual oficial</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>http://galatar.com/automatiza-la-creacion-de-tus-proyectos-con-composer/feed/
</wfw:commentRss>
<slash:comments>1</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">17</post-id>
</item>
</channel>
</rss>