-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
682 lines (619 loc) · 44.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
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
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FrontFest '19</title>
<meta name="description" content="La conferencia para toda la comunidad frontend @ Madrid, 9 de febrero de 2019 #FrontFest19">
<meta name="keywords" content="evento, meetup, conferencia, madrid, software, front-end, frontend, html, css, javascript, desarrollo web" />
<meta name="theme-color" content="#222">
<!-- twitter card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@frontfest" />
<meta name="twitter:creator" content="@frontfest" />
<meta name="twitter:url" content="https://frontfest.es" />
<meta name="twitter:title" content="La conferencia para toda la comunidad frontend" /> <!-- maximum 140 char -->
<meta name="twitter:description" content="Madrid, 9 de febrero de 2019" /> <!-- maximum 140 char -->
<meta name="twitter:image" content="https://frontfest.es/images/frontfest-logo-128x128.png" /> <!-- when you post this page url in twitter , this image will be shown -->
<!-- twitter card ends from here -->
<!-- facebook open graph -->
<meta property="og:title" content="La conferencia para toda la comunidad frontend" />
<meta property="og:url" content="https://frontfest.es" />
<meta property="og:locale" content="es_ES" />
<meta property="og:site_name" content="FrontFest" />
<meta property="og:description" content="Madrid, 9 de febrero de 2019" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://frontfest.es/images/frontfest-logo-128x128.png" /> <!-- when you post this page url in facebook, this image will be shown -->
<!-- facebook open graph ends from here -->
<link rel="icon" href="images/frontfest-logo-128x128.png" />
<link rel="canonical" href="https://frontfest.es" />
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<aside class="aside aside-top">
<div class="aside-wrapper">
<div class="aside-logo">
<svg viewBox="0 0 275.201 111.897" width="220" xmlns="http://www.w3.org/2000/svg">
<!-- FRONT -->
<g class="logo-blue-3" fill="#aaa" stroke-width="2.3">
<path d="M135.638 52.748V22.631h18.544v3.399h-14.973v9.852h13.295v3.4h-13.295v13.466zM164.03 35.882h3.743q1.893 0 3.098-.473 1.247-.516 1.979-1.248.731-.731 1.032-1.635.302-.903.302-1.72 0-.947-.517-1.808-.473-.903-1.334-1.548-.817-.689-2.022-1.076-1.161-.387-2.495-.387h-3.786zm-3.571 16.866V22.631h7.099q1.463 0 3.227.473 1.807.43 3.355 1.42 1.55.99 2.582 2.538 1.033 1.55 1.033 3.743 0 3.227-1.635 5.422-1.592 2.15-4.69 2.84l6.454 13.681h-3.873l-6.324-13.424h-3.657v13.424zM182.983 37.733q0-3.141 1.205-5.938 1.205-2.84 3.27-4.948 2.108-2.108 4.905-3.313 2.797-1.247 5.98-1.247 3.141 0 5.938 1.247 2.84 1.205 4.948 3.313 2.108 2.108 3.313 4.948 1.247 2.797 1.247 5.938 0 3.183-1.247 5.98-1.205 2.797-3.313 4.905-2.108 2.065-4.948 3.27-2.797 1.204-5.938 1.204-3.183 0-5.98-1.204-2.797-1.205-4.905-3.27-2.065-2.108-3.27-4.905t-1.205-5.98zm3.572 0q0 2.495.903 4.69.947 2.15 2.539 3.785 1.635 1.592 3.786 2.539 2.151.946 4.603.946 2.453 0 4.604-.946 2.151-.947 3.743-2.539 1.635-1.635 2.539-3.786.946-2.194.946-4.69 0-2.495-.946-4.646-.904-2.194-2.539-3.83-1.592-1.634-3.743-2.58-2.151-.947-4.604-.947-2.452 0-4.603.946-2.151.947-3.786 2.582-1.592 1.635-2.539 3.829-.903 2.151-.903 4.647zM247.041 22.63v31.495q-5.55-5.894-11.014-11.703-5.465-5.808-11.015-11.703-.215-.3-.43-.559-.172-.258-.387-.56.043.345.043.69l.086.688v21.77h-3.571V21.254q5.55 6.023 11.014 11.96 5.464 5.895 11.015 11.919.215.301.387.56.215.257.43.558l-.086-.688q0-.344-.043-.688V22.63zM275.2 22.63v3.4h-10.067v26.718h-3.571V26.03h-10.154v-3.4z"/>
</g>
<!-- FEST -->
<g class="logo-yellow" fill="#fff" stroke-width="2.8">
<path d="M133.984 90.822V60.704h17.855v1.721h-16.091v12.349h14.413v1.72h-14.413v14.328zM159.278 90.822V60.704h17.855v1.721h-16.091v12.349h14.413v1.72h-14.413v12.607h16.693v1.72zM200.09 63.243q-.302.344-.56.688-.215.344-.473.689-.387-.345-.947-.732-.56-.43-1.334-.774-.73-.387-1.677-.603-.904-.258-1.98-.258-1.506 0-2.624.517-1.119.473-1.893 1.333-.732.818-1.119 1.937-.344 1.075-.344 2.237 0 1.248.387 2.151.43.86 1.119 1.463.731.602 1.72 1.076.99.43 2.152.817 1.377.473 3.055 1.076 1.72.559 3.227 1.592 1.506.99 2.495 2.538 1.033 1.506 1.033 3.83 0 1.892-.732 3.441-.688 1.55-1.936 2.668-1.205 1.075-2.883 1.678-1.634.56-3.485.56-1.678 0-3.14-.431-1.42-.43-2.539-1.076-1.118-.645-1.979-1.377-.817-.731-1.29-1.29l1.204-1.205q.602.602 1.377 1.248.774.645 1.678 1.204.946.517 2.065.86 1.119.345 2.41.345 1.462 0 2.796-.43 1.334-.473 2.366-1.29 1.033-.861 1.635-2.066.646-1.205.646-2.754 0-1.936-.86-3.184-.861-1.247-2.152-2.065-1.248-.817-2.754-1.334-1.506-.516-2.796-.946-.818-.258-1.936-.688-1.076-.43-2.109-1.205-.99-.775-1.764-1.936-.731-1.205-.774-2.969-.086-1.42.301-2.84.43-1.463 1.377-2.581.946-1.162 2.452-1.893 1.506-.732 3.657-.732 1.635 0 3.313.56 1.721.559 3.614 2.15zM229.077 60.704v1.721h-11.015v28.397h-1.764V62.425h-11.014v-1.72z"/>
</g>
<!-- LOGO -->
<g fill-rule="evenodd">
<path class="logo-yellow" d="M69.897 29.715l12.418 12.457-39.97 40.26-12.756-12.768" fill="#fff"/>
<path class="logo-red-1" d="M43.956 39.067l-10.75-10.75L0 61.605l21.467-.046z" fill="#bbb"/>
<path class="logo-blue-1" d="M67.983 72.835l10.75 10.75 33.206-33.293-21.467.046z" fill="#bbb"/>
<path class="logo-red-2" d="M61.095 101.224L50.42 111.897 0 61.605l21.467-.046z" fill="#999"/>
<path class="logo-blue-2" d="M50.844 10.673L61.517 0l50.422 50.292-21.467.046z" fill="#999"/>
<path class="logo-red-1" d="M42.327 82.443V57.058L29.571 69.675z" fill="#bbb"/>
<path class="logo-blue-1" d="M69.88 29.726l-.072 25.139 12.507-12.693z" fill="#bbb"/>
</g>
</svg>
<p class="aside-edition">3ª edición</p>
</div>
<img class="aside-year" alt="FrontFest '19" src="images/19.png">
<p class="aside-message">La conferencia para toda la comunidad frontend</p>
<div class="aside-location">
<a class="no-border" href="https://www.google.es/maps/place/La+Nave/@40.3478166,-3.7663987,12z/data=!4m5!3m4!1s0xd4226dc6a64c46b:0x23e1b239d4aea935!8m2!3d40.3478149!4d-3.6963606" target="_blank" rel="noopener">
<img class="aside-pointer" src="images/map-location.svg">
</a>
<div>09 FEB 2019<br><strong>MADRID</strong></div>
<a class="no-border" href="http://www.lanavemadrid.com/event/frontfest-2019/" target="_blank" rel="noopener">
<img class="aside-lanave" src="images/la-nave-madrid-white.png" alt="La Nave Madrid">
</a>
</div>
<ul class="aside-list">
<li>→ <a href="https://blog.frontfest.es" target="_blank" rel="noopener">Blog</a></li>
<li>→ <a href="#entradas">Entradas</a></li>
<li>→ <a href="#agenda">Agenda</a></li>
<li>→ <a href="#ponentes">Ponentes</a></li>
<li>→ <a href="#patrocinadores">Patrocinadores</a></li>
<li>→ <a href="#tabla-patrocinios">Tabla de patrocinios</a></li>
<li>→ <a href="#cdc">Código de conducta</a></li>
<li>→ <a href="#quienes-somos">Quiénes somos</a></li>
</ul>
</div>
</aside>
<main class="main">
<!-- <div class="alert">
¡No te quedes sin tu entrada! Ya quedan menos de 50, tanto generales como de estudiante. <a href="#entradas">Más información ></a>
</div> -->
<div class="intro">
<div class="intro-pictures">
<img src="images/photos/frontfest-main-02.jpg" alt="Edición anterior de FrontFest">
<img src="images/photos/frontfest-main-01.jpg" alt="Edición anterior de FrontFest">
<img src="images/photos/frontfest-main-03.jpg" alt="Edición anterior de FrontFest">
<img src="images/photos/frontfest-main-04.jpg" alt="Edición anterior de FrontFest">
</div>
<div class="intro-logo">
<img src="./images/frontfest-logo.svg" alt="FrontFest">
</div>
</div>
<section class="section bg-dark" id="entradas">
<div class="ticket-row">
<div class="ticket-wrapper inactive">
<div class="ticket">
<div>
<div class="ticket-title">
<img src="images/icons/eagle.svg">
<div>
<h3>Entrada Early Bird</h3>
<small>34 entradas</small>
</div>
</div>
<p>Disponibles a partir del <strong>19 de noviembre</strong> a las <strong>12 del mediodía</strong>.</p>
<ul class="ticket-list">
<li><span>Acceso al track único de 8 charlas.</li>
<li><span>Desayuno, comida y merienda.</li>
<li><span>Bolsa de bienvenida.</li>
</ul>
</div>
<div>
<div class="ticket-footer">
<span class="ticket-price">25€</span>
<span class="btn disabled">Agotadas</span>
</div>
</div>
</div>
</div>
<div class="ticket-wrapper inactive">
<div class="ticket">
<div>
<div class="ticket-title">
<img src="images/icons/users.svg">
<div>
<h3>Entrada general</h3>
<small>310 entradas</small>
</div>
</div>
<p>Disponibles a partir del <strong>2 de enero</strong> a las <strong>12 del mediodía</strong>.</p>
<ul class="ticket-list">
<li><span>Acceso al track único de 8 charlas.</li>
<li><span>Desayuno, comida y merienda.</li>
<li><span>Bolsa de bienvenida.</li>
</ul>
</div>
<div>
<div class="ticket-footer">
<span class="ticket-price">40€</span>
<span class="btn disabled">Agotadas</span>
</div>
</div>
</div>
</div>
<div class="ticket-wrapper inactive">
<div class="ticket">
<div>
<div class="ticket-title">
<img src="images/icons/student.svg">
<div>
<h3>Entrada de estudiante*</h3>
<small>52 entradas</small>
</div>
</div>
<p>Disponibles a partir del <strong>2 de enero</strong> a las <strong>12 del mediodía</strong>.</p>
<ul class="ticket-list">
<li><span>Acceso al track único de 8 charlas.</li>
<li><span>Desayuno, comida y merienda.</li>
<li><span>Bolsa de bienvenida.</li>
</ul>
</div>
<div>
<div class="ticket-footer">
<span class="ticket-price">25€</span>
<span class="btn disabled">Agotadas</span>
</div>
</div>
</div>
</div>
</div>
<p class="smaller-p">
*A los portadores de una entrada de estudiante se les requerirá presentar, el mismo día del evento, una fotocopia de la matrícula
(o documento similar) que acredite la condición de estudiante durante el curso actual (2018-19).
</p>
</section>
<hr>
<section class="section">
<h1 id="agenda">Agenda</h1>
<div class="talk-separator">
<div class="talk-time"><span>08:30 - 09:25</span></div>
<div class="talk-separator-title"><span>Acreditación</span></div>
</div>
<div class="talk-separator">
<div class="talk-time"><span>09:30 - 09:40</span></div>
<div class="talk-separator-title"><span>Presentación</span></div>
</div>
<div class="talk-row">
<div class="talk-time">
<span>09:45 - 10:30</span>
</div>
<div class="talk-author">
<a href="#paqui-calabria" class="image-link"><img alt="Paqui Calabria" src="images/photos/PaquiCalabria.jpg"></a>
<a href="#ismael-navarro" class="image-link"><img alt="Ismael Navarro" src="images/photos/IsmaelNavarro.jpg"></a>
<div>Paqui Calabria e Ismael Navarro</div>
</div>
<h2 class="talk-title">Duendecillos en tu navegador: service workers</h2>
<p class="talk-desc">
¿Nunca has pensado que sería genial poder contar con una ayuda extra a la hora de que tus aplicaciones trabajaran? Ahora es posible contar con unos pequeños ayudantes en tu navegador, los service workers.
</p><p class="talk-desc">
En esta charla pretendemos dar a conocer todas las posibilidades que hay detras de los Services Workers más allá del cacheo de recursos en cliente. Tenemos como objetivo desmitificar lo que se esconde detrás de esta tecnología y mostrar algunas de las muchas posibilidades que ofrece.
</p><p class="talk-desc">
Tras una introducción inicial mostraremos algunos ejemplos de como crear tu service workers y las distintas apliciones prácticas que puedes llegar a conseguir.
</p>
</div>
<div class="talk-row">
<div class="talk-time">
<span>10:35 - 11:20</span>
</div>
<div class="talk-author">
<a href="#cristina-ponce" class="image-link"><img alt="Cristina Ponce" src="images/photos/CristinaPonce.jpg"></a>
<div>Cristina Ponce</div>
</div>
<h2 class="talk-title">Road to Web Components</h2>
<p class="talk-desc">
El concepto webcomponent lleva sonando un tiempecillo y cada vez suena más fuerte gracias a librerías como Polymer o Stencil.
</p><p class="talk-desc">
Por ello, en esta charla veremos cuáles son los conceptos clave de un webcomponent, veremos como crear algunos de ejemplo y como aplicarlos en un proyecto real.
</p><p class="talk-desc">
Así también, analizaremos como está el estándar en este sentido, las ventajas de utilizarlos y como podemos aprovecharlo para hacer de nuestro proyecto algo más nativo y menos pegado al framework que usemos en nuestro proyecto.
</p>
</div>
<div class="talk-separator">
<div class="talk-time"><span>11:25 - 11:55</span></div>
<div class="talk-separator-title"><span>Desayuno</span></div>
</div>
<div class="talk-row">
<div class="talk-time">
<span>12:00 - 12:45</span>
</div>
<div class="talk-author">
<a href="#eduardo-san-martin" class="image-link"><img alt="Eduardo San Martín" src="images/photos/EduardoSanMartin.jpg"></a>
<div>Eduardo San Martín</div>
</div>
<h2 class="talk-title">¿Cómo funciona un router SPA? Caso práctico con Vue Router</h2>
<p class="talk-desc">
Cuando desarrollamos una Single Page Application, es necesario usar un Router. Cada framework tiene su propio router, React incluso tiene varios paquetes disponibles. Y, aunque cada framework sea diferente y cada router tenga un enfoque diferente, todos comparten los mismos principios.
</p><p class="talk-desc">
¿Qué se esconde detrás de una API simple y fácil de usar? ¿Es realmente tan difícil implementar un router por sí mismo? ¿Qué cosas fallan hoy en día en Vue Router?
</p><p class="talk-desc">
Durante esta charla, responderemos a estas preguntas usando el Router oficial de Vue como ejemplo y explicando su funcionamiento interno.
</p>
</div>
<div class="talk-row">
<div class="talk-time">
<span>12:50 - 13:35</span>
</div>
<div class="talk-author">
<a href="#jose-antonio-vela" class="image-link"><img alt="José Antonio Vela" src="images/photos/JoseAntonioVela.jpg"></a>
<div>José Antonio Vela</div>
</div>
<h2 class="talk-title">La igualdad en los espacios laborales: retos y beneficios</h2>
<p class="talk-desc">
Los espacios laborales son lugares de puesta en común del trabajo de personas muy distintas. La diversidad es una oportunidad de aprendizaje y de pluralidad de soluciones pero, sin una valoración de la misma puede transformarse en una fuente de desentendimiento y freno.
</p><p class="talk-desc">
La presencia de mujeres en ámbitos tradicionalmente considerados masculinos puede ser percibida como una ganancia en riqueza de recursos humanos o, por el contrario, como un ataque a las dinámicas tradicionales de trabajo. Del mismo modo, otras diversidades, como la LGBT o de capacidades pueden aprovecharse o perderse al generar espacios violentos.
</p><p class="talk-desc">
La percepción de la diversidad misma está influida por la posibilidad de entender nuevas realidades y de cuestionarse prejuicios adquiridos. A lo largo de esta ponencia se visitarán estrategias y planteamientos que nos permitan visibilizar la diversidad y los patrones sociales que nos impiden crecer igualitariamente y aprovecharnos de nuevos caminos capacitantes.
</p>
</div>
<div class="talk-separator">
<div class="talk-time"><span>13:40 - 14:55</span></div>
<div class="talk-separator-title"><span>Comida</span></div>
</div>
<div class="talk-row">
<div class="talk-time">
<span>15:00 - 15:45</span>
</div>
<div class="talk-author">
<a href="#james-heda-weng" class="image-link"><img alt="James Heda Weng" src="images/photos/JamesHedaWeng.jpg"></a>
<div>James Heda Weng</div>
</div>
<h2 class="talk-title">Cómo te la "colamos" los diseñadores todos los días</h2>
<p class="talk-desc">
Hace años se podía dibujar una línea entre el trabajo de un diseñador y el de un desarrollador frontend fácilmente: el diseñador organiza la apariencia del producto y se la pasa al desarrollador para construir la interfaz. Sin embargo, ahora invertimos más en la experiencia de usuario, además de fijarnos en la apariencia de los elementos en la interfaz también trabajamos en su comportamiento. Como resultado, la dificultad en la comunicación entre diseñadores y desarrolladores frontend está creciendo en el workflow diario: la forma tradicional de documentación de diseño no es suficientemente flexible para reflejar cómo funciona los elementos, tampoco viene en un formato developer-friendly. En esta charla propongo unos trucos para mejorar la comunicación diseño/frontend en nuestro trabajo diario.
</p><p class="talk-desc">
En 40 minutos veremos de forma práctica:
</p><ul class="talk-list">
<li>Unificación del lenguaje en la comunicación de diseño/frontend.</li>
<li>Optimización y personalización del contenido y responsabilidad del trabajo de ambos lados tanto diseñadores como desarrolladores frontend.</li>
<li>Como diseñador, la forma de proveer el diseño en un formato que sea más developer-friendly.</li>
<li>La introducción de un mediador entre diseño y frontend en el workflow.</li>
</ul>
</div>
<div class="talk-row">
<div class="talk-time">
<span>15:50 - 16:35</span>
</div>
<div class="talk-author">
<a href="#vicente-lucendo" class="image-link"><img alt="Vicente Lucendo" src="images/photos/VicenteLucendo.jpg"></a>
<div>Vicente Lucendo</div>
</div>
<h2 class="talk-title">Cómo programar un motor de animaciones cuidando el rendimiento</h2>
<p class="talk-desc">
Existen varios motores de animaciones muy populares entre la comunidad frontend (TweenMax, Anime.js, Velocity, Popmotion...) pero pocos saben cómo funciona uno realmente.
</p><p class="talk-desc">
En ésta charla aprenderemos cómo programar uno desde cero, repasando por el camino conceptos básicos de animación, aprendiendo sobre algunos aspectos importantes del funcionamiento de un navegador y finalmente añadiendo todas las funcionalidades necesarias para dotar a nuestras webs de un "motion design" de primera.
</p><p class="talk-desc">
Una vez terminado lo pondremos a prueba comparando su rendimiento con otros y veremos algunas de las ventajas e inconvenientes de programar nuestras propias librerías en lugar de usar otras ya hechas.
</p>
</div>
<div class="talk-separator">
<div class="talk-time"><span>16:40 - 17:10</span></div>
<div class="talk-separator-title"><span>Merienda</span></div>
</div>
<div class="talk-row">
<div class="talk-time">
<span>17:15 - 18:00</span>
</div>
<div class="talk-author">
<a href="#jesus-olazagoitia" class="image-link"><img alt="Jesús Olazagoitia" src="images/photos/JesusOlazagoitia.jpg"></a>
<div>Jesús Olazagoitia</div>
</div>
<h2 class="talk-title">Las reglas han cambiado, Custom Properties!</h2>
<p class="talk-desc">
Es el momento de aprovechar el potencial de las custom properties, no vienen a sustituir las variables de los preprocesadores sino a brindarnos nuevas formas de construir la web, la siguiente revolución después del responsive web design.
</p><p class="talk-desc">
Las custom properties nos brindan un nuevo canal de comunicación con nuestros archivos CSS, dotándolos de potencia y reduciendo el número de clases que necesitamos.
</p><p class="talk-desc">
Pero no todo es perfecto, las custom properties tienen sus peculiaridades y es necesario conocerlas para no llevarse sorpresas.
</p><p class="talk-desc">
Se verán agunos ejemplos en la charla, como <a rel="noopener" target="_blank" href="https://codepen.io/goiblas/pen/jvvOwy">este</a> o <a rel="noopener" target="_blank" href="https://codepen.io/goiblas/pen/pOOvRZ">este</a>.
</p><p class="talk-desc">
Por supuesto que se verá como modificarlas desde Javascript, con varios ejemplos espectaculares y con muy pocas lineas de código.
</p>
</div>
<div class="talk-row">
<div class="talk-time">
<span>18:05 - 18:50</span>
</div>
<div class="talk-author">
<a href="#sergio-arbeo" class="image-link"><img alt="Sergio Arbeo" src="images/photos/SergioArbeo.jpg"></a>
<div>Sergio Arbeo</div>
</div>
<h2 class="talk-title">Testing sin dogmas</h2>
<p class="talk-desc">
Las charlas de testing pueden dividirse en dos grupos: las introductorias, con generalidades y comparaciones sin mucha profundidad; y las dogmáticas, en las que se enumera lo que hacer como si nos aprendiéramos los diez mandamientos. Esta charla trata de huir de estas dos aproximaciones y aportar una serie de principios, con sus razonamientos para que sepas usarlos y descartarlos según la situación.
</p>
</div>
<div class="talk-separator">
<div class="talk-time"><span>18:55 - 19:15</span></div>
<div class="talk-separator-title"><span>Despedida</span></div>
</div>
<div class="talk-separator">
<div class="talk-time"><span>19:20 - 20:45</span></div>
<div class="talk-separator-title"><span>Networking</span></div>
</div>
</section>
<hr>
<section class="section">
<h1 id="ponentes">Ponentes</h1>
<div class="speaker-row">
<div id="eduardo-san-martin" class="speaker">
<img class="speaker-img" alt="Eduardo San Martín" src="images/photos/EduardoSanMartin.jpg">
<div class="speaker-title">Eduardo San Martín</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/posva"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/posva"><img alt="Github" src="images/icons/color/Github.svg"></a>
</div>
<div class="speaker-desc">
Eduardo es un desarrollador frontend freelance al que le gusta ser pragmático y desarrollar aplicaciones mantenibles así como dar charlas, workshops y sesiones de coaching. Como miembro del core team de Vue.js, se dedica con pasión y amor a su ecosistema, ya sea tanto con el core de Vue como con librerías anexas. Se interesa por los nuevos estándares en Javascript así como las innovaciones en el mundo web. Actualmente vive en París y, además de programar, le gusta la natación, les teclados mecánicos y las películas/juegos de horror.
</div>
</div>
<div id="jose-antonio-vela" class="speaker">
<img class="speaker-img" alt="José Antonio Vela" src="images/photos/JoseAntonioVela.jpg">
<div class="speaker-title">José Antonio Vela</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://ecosdegenero.blogspot.com/"><img alt="Web" src="images/icons/color/Browser.svg"></a>
<a target="_blank" rel="noopener" href="https://twitter.com/ecosdegenero"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://www.youtube.com/user/josevelagenero"><img alt="YouTube" src="images/icons/color/YouTube.svg"></a>
<a target="_blank" rel="noopener" href="https://www.linkedin.com/in/joseamvela"><img alt="Linkedin" src="images/icons/color/Linkedin.svg"></a>
</div>
<div class="speaker-desc">
Sociólogo, investigador en género y videojuegos.
Licenciado en Sociología (UCM), doctorando en estudios interdisciplinares de género (UAM).
Investigador social especializado en Género, Diversidad Afectivo Sexual e Identidad de Género y Videojuegos.
Trabaja e investiga líneas de identidad y género, Teoría feminista, diversidad LGBT y ciberacoso.
Docente y formador en Áreas de Teoría de Género, Estudios LGBT, Igualdad y Masculinidades.
Imparte formaciones a diversos colectivos públicos y privados y coordina actividades relacionadas.
</div>
</div>
<div id="cristina-ponce" class="speaker">
<img class="speaker-img" alt="Cristina Ponce" src="images/photos/CristinaPonce.jpg">
<div class="speaker-title">Cristina Ponce</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/CristinaGrim"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/crisgrim"><img alt="Github" src="images/icons/color/Github.svg"></a>
<a target="_blank" rel="noopener" href="https://www.linkedin.com/in/cristina-ponce/"><img alt="Linkedin" src="images/icons/color/Linkedin.svg"></a>
</div>
<div class="speaker-desc">
Frontend Developer en Kairós. En el tiempo que lleva como desarrolladora ha pasado por diferentes etapas: desde trabajar para startups, organizaciones públicas, pequeñas, medianas y grandes empresas hasta dedicarse íntegramente a ser autónoma, con la posibilidad que esto le da de poder experimentar con diferentes tecnologías del sector en cada momento. Siempre que puede trata de aportar su grano de arena en la comunidad participando como ponente, escribiendo artículos o siendo mentora. El resto del tiempo lo dedica a jugar, ver series y películas o tomar unas cervezas.
</div>
</div>
<div id="jesus-olazagoitia" class="speaker">
<img class="speaker-img" alt="Jesús Olazagoitia" src="images/photos/JesusOlazagoitia.jpg">
<div class="speaker-title">Jesús Olazagoitia</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/goiblas"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/goiblas"><img alt="Github" src="images/icons/color/Github.svg"></a>
</div>
<div class="speaker-desc">
Lleva más de 15 años trabajando como diseñador y desarrollador frontend en ADR Formación, una empresa especializada en e-learning, donde cada día se enfrenta a nuevos retos. Le apasiona el CSS y todo lo que se puede construir con la web hoy en día. Siempre dispuesto a echar una mano y a compartir conocimiento.
Aunque se considera tímido, puede estar horas hablando sobre performance, animación, web components o cualquier tema relacionado con la web.
</div>
</div>
<div id="james-heda-weng" class="speaker">
<img class="speaker-img" alt="James Heda Weng" src="images/photos/JamesHedaWeng.jpg">
<div class="speaker-title">James Heda Weng</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/JamesHedaWeng"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://instagram.com/JamesHedaWeng"><img alt="Instagram" src="images/icons/color/Instagram.svg"></a>
<a target="_blank" rel="noopener" href="https://www.linkedin.com/in/jameshedaweng/"><img alt="Linkedin" src="images/icons/color/Linkedin.svg"></a>
</div>
<div class="speaker-desc">
Diseñador UX/UI en StyleSage y doctorando de Bellas Artes en la Universidad Complutense de Madrid. Profesionalmente tiene 5 años de experiencia como diseñador y creative coder. Académicamente su investigación se enfoca en creación interactiva y diseño de interfaz.
</div>
</div>
<div id="vicente-lucendo" class="speaker">
<img class="speaker-img" alt="Vicente Lucendo" src="images/photos/VicenteLucendo.jpg">
<div class="speaker-title">Vicente Lucendo</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="http://vlucendo.com/"><img alt="Web" src="images/icons/color/Browser.svg"></a>
<a target="_blank" rel="noopener" href="https://twitter.com/vlucendo"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
</div>
<div class="speaker-desc">
Desarrollador creativo y co-fundador de Twenty Two Degrees. Es el responsable del concepto, desarrollo y animación de los proyectos que hacen en su estudio. En el pasado también diseñaba pero ahora su interés se centra en la programación frontend y gráfica (WebGL, shaders, etc) y las posibilidades que abren estas tecnologías.
</div>
</div>
<div id="paqui-calabria" class="speaker">
<img class="speaker-img" alt="Paqui Calabria" src="images/photos/PaquiCalabria.jpg">
<div class="speaker-title">Paqui Calabria</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/zurribulle"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/fcalabria"><img alt="Github" src="images/icons/color/Github.svg"></a>
</div>
<div class="speaker-desc">
Estudió aparejadores, pero acabó haciendo frontend después de un par de saltos profesionales. Colabora con AdaJs Barcelona. Trabajó para AXA durante más de tres años, y ahora está saltando a Schibsted.
</div>
</div>
<div id="ismael-navarro" class="speaker">
<img class="speaker-img" alt="Ismael Navarro" src="images/photos/IsmaelNavarro.jpg">
<div class="speaker-title">Ismael Navarro</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/ismanapa"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/ismanapa"><img alt="Github" src="images/icons/color/Github.svg"></a>
</div>
<div class="speaker-desc">
Actualmente trabaja como desarrollador fullstack en Plain Concepts realizando todo tipo de proyectos. Le apasiona todo lo relacionado con la informática, la electrónica, los videojuegos y en su tiempo libre siempre le gusta empezar pet projects que nunca consigue acabar.
</div>
</div>
<div id="sergio-arbeo" class="speaker">
<img class="speaker-img" alt="Sergio Arbeo" src="images/photos/SergioArbeo.jpg">
<div class="speaker-title">Sergio Arbeo</div>
<div class="speaker-sn">
<a target="_blank" rel="noopener" href="https://twitter.com/serabe"><img alt="Twitter" src="images/icons/color/Twitter.svg"></a>
<a target="_blank" rel="noopener" href="https://github.com/serabe"><img alt="Github" src="images/icons/color/Github.svg"></a>
</div>
<div class="speaker-desc">
Sergio es un desarrollador front que no toca CSS ni de lejos, por su salud y la de sus compañeros. Le encanta cacharrear, leer y teclear como si supiera lo que está haciendo. Sin embargo, odia mucho hablar de sí mismo, en general, y en tercera persona en particular. Lo más probable es que te lo encuentres con varias barajas encima y alguna que otra moneda. Fiel a Ember, últimamente se le ha visto usando otras herramientas, pero no por fuentes fiables.
</div>
</div>
</div>
</section>
<hr>
<section class="section">
<h1 id="patrocinadores">Patrocinadores</h1>
<h2>Platinum</h2>
<div class="sponsor-row">
<a class="no-border" target="_blank" href="https://www.paradigmadigital.com/"><div class="sponsor-platinum"><img alt="Paradigma Digital" src="images/sponsors/paradigma.png"></div></a>
<a class="no-border" target="_blank" href="https://www.schibsted.es/"><div class="sponsor-platinum"><img alt="Schibsted" src="images/sponsors/schibsted.png"></div></a>
</div>
<h2>Gold</h2>
<div class="sponsor-row">
<a class="no-border" target="_blank" href="https://www.opensistemas.com/"><div class="sponsor-gold"><img alt="Open Sistemas" class="width-60" src="images/sponsors/open-sistemas.png"></div></a>
<a class="no-border" target="_blank" href="https://careers.ryanair.com/ryanair-labs-madrid/"><div class="sponsor-gold"><img alt="Ryanair" class="width-85" src="images/sponsors/ryanair.jpg"></div></a>
<a class="no-border" target="_blank" href="https://babel.es/"><div class="sponsor-gold"><img alt="Babel" src="images/sponsors/babel.png"></div></a>
<a class="no-border" target="_blank" href="https://the-cocktail.com/"><div class="sponsor-gold"><img alt="The Cocktail" src="images/sponsors/the-cocktail.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.ing.es/"><div class="sponsor-gold"><img alt="ING" class="width-75" src="images/sponsors/ing.svg"></div></a>
</div>
<h2>Silver</h2>
<div class="sponsor-row">
<a class="no-border" target="_blank" href="https://www.plainconcepts.com/"><div class="sponsor-silver"><img alt="Plain Concepts" src="images/sponsors/plain-concepts.png"></div></a>
<a class="no-border" target="_blank" href="https://machiina.com/"><div class="sponsor-silver"><img alt="Machiina" src="images/sponsors/machiina.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.kairosds.com/"><div class="sponsor-silver"><img alt="Kairos DS" src="images/sponsors/kairos.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.robertwalters.es/"><div class="sponsor-silver"><img alt="Robert Walters" src="images/sponsors/robert-walters.png"></div></a>
<a class="no-border" target="_blank" href="https://www.walterspeople.es/"><div class="sponsor-silver"><img alt="Walters People" class="width-60" src="images/sponsors/walters-people.png"></div></a>
</div>
<h2>En especies</h2>
<div class="sponsor-row">
<a class="no-border" target="_blank" href="https://egghead.io/"><div class="sponsor-inkind"><img alt="egghead" src="images/sponsors/egghead.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.stickermule.com/"><div class="sponsor-inkind"><img alt="Sticker Mule" src="images/sponsors/sticker-mule.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.manning.com/"><div class="sponsor-inkind"><img alt="Manning Publications" src="images/sponsors/manning.svg"></div></a>
<a class="no-border" target="_blank" href="https://www.facebook.com/productoscodan/"><div class="sponsor-inkind"><img alt="Conchas Codan" class="width-70" src="images/sponsors/codan.jpg"></div></a>
<a class="no-border" target="_blank" href="https://vueschool.io/"><div class="sponsor-inkind"><img alt="Vue School" src="images/sponsors/vue-school.svg"></div></a>
</div>
</section>
<hr>
<section class="section">
<h1 id="tabla-patrocinios">Tabla de patrocinios</h1>
<p>Si tu empresa quiere colaborar patrocinando nuestra conferencia, <strong>contáctanos por <a href="mailto:[email protected]">email</a> y te daremos toda la información necesaria.</strong>
Además, puedes descargar el <strong>dossier de patrocinios en formato PDF</strong> en los siguientes enlaces: <a href="./pdf/DossierPatrociniosES-FrontFest19.pdf">[ES]</a>
<a href="./pdf/SponsorsDossierEN-FrontFest19.pdf">[EN]</a>.</p>
<div class="overflow-x">
<table>
<thead>
<tr>
<th></th><th>Platinum <small>(máx. 2)</small></th><th>Gold <small>(máx. 5)</small></th><th>Silver <small>(∞)</small></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tamaño del logo (web, rollups, etc.)</td><td>L</td><td>M</td><td>S</td>
</tr>
<tr>
<td>Entradas para la conferencia</td><td>6</td><td>4</td><td>2</td>
</tr>
<tr>
<td>Tweets promocionales</td><td>5</td><td>3</td><td>2</td>
</tr>
<tr>
<td>Item en la bolsa de bienvenida</td><td>✓</td><td>✓</td><td>✓</td>
</tr>
<tr>
<td>Stand</td><td>✓</td><td>✓</td><td></td>
</tr>
<tr>
<td>Post en nuestro blog</td><td>✓</td><td>✓</td><td></td>
</tr>
<tr>
<td>Cena con organizadores y ponentes (2 personas)</td><td>✓</td><td></td><td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th><th>2500<small>€ (+IVA)</small></th><th>1750<small>€ (+IVA)</small></th><th>600<small>€ (+IVA)</small></th>
</tr>
</tfoot>
</table>
</div>
<p>También aceptamos <strong>patrocinios en especies</strong> (1 tweet promocional, logo XS).</p>
</section>
<hr>
<section class="section">
<h1 id="cdc">Código de conducta</h1>
<p><strong>FrontFest es un evento en el que no se permitirá ningún tipo de abuso ni discriminación por motivos de sexo, procedencia, raza, religión, discapacidad, aspecto físico, orientación sexual e identidad. Los participantes que violen estas reglas pueden ser sancionados o expulsados del evento a discreción.</strong></p>
<p>FrontFest intenta favorecer la comunicación y los debates constructivos en un ambiente seguro, solidario, respetable y diverso.</p>
<p>Serán consideradas conductas abusivas la siguientes:</p>
<ul class="main-ul">
<li>Comentarios ofensivos relativo al género, identidad u orientación sexual, discapacidad, aspecto físico, edad, raza, religión, procedencia o creencias religiosas.</li>
<li>Comentarios relacionados con el estilo de vida de algún asistente al evento como los relacionados con hábitos alimentarios, salud, familia, trabajo, etc.</li>
<li>La reproducción de imágenes sexuales en los espacios públicos, así como conductas intimidatorias o contactos físicos inapropiados.</li>
<li>Grabación o fotografía inadecuada de cualquiera de los asistentes.</li>
<li>La intimidación, persecución, filmación, fotografía o interrupción sistemática en las ponencias, serán también considerado situación de abuso.</li>
<li>No se tolerarán bromas que puedan ofender, chistes, contenido machista, xenófobo, LGBTófobo o cualquier tipo de manifestación que pudieran ser una cuestión de burla u odio a cualquier asistente al evento.</li>
</ul>
<p>Los organizadores pedimos la colaboración de todos los asistentes, así pues si sufres algún tipo de conducta abusiva u observas que alguien puede estar siendo víctima de ella, te rogamos encarecidamente que nos lo comuniques para tomar las medidas oportunas.</p>
<p>En cualquier caso, las medidas disciplinarias dependerán siempre de la decisión de los organizadores, y en caso de llegar a producirse una expulsión, nunca existirá posibilidad de reembolso del precio de la entrada.</p>
</section>
<hr>
<section class="section">
<h1 id="quienes-somos">Quiénes somos</h1>
<p>FrontFest es una conferencia sin ánimo de lucro organizada por un equipo de 8 personas en su tiempo libre.</p>
<ul class="list-founders">
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/LuisCalvoDiaz">Luis Calvo</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/luisddm_">Luis de Dios</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/n03m1ms">Noemi Medina</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/v4n3ss4ms">Vanessa Medina</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/marinalopezyap">Marina López</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/JuanRioPacheco">Juan del Río</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/rubnvp">Rubén Valseca</a></span></li>
<span class="bullet">•</span>
<li><span><a target="_blank" rel="noopener" href="https://twitter.com/ignaciodenuevo">Ignacio Villanueva</a></span></li>
</ul>
<p><strong>FrontFest '19</strong> © 2018-2019</p>
</section>
</main>
<aside class="aside aside-bottom">
<div class="aside-wrapper">
<p><a class="aside-hashtag" href="https://twitter.com/hashtag/FrontFest19?src=hash" rel="noopener" target="_blank">#FrontFest19</a></p>
<p>Ediciones anteriores:
<a href="https://2017.frontfest.es" rel="noopener" target="_blank">2017</a>
•
<a href="https://2018.frontfest.es" rel="noopener" target="_blank">2018</a>
</p>
<p>
<a href="mailto:[email protected]">Email</a>
•
<a href="https://twitter.com/frontfest" rel="noopener" target="_blank">Twitter</a>
•
<a href="https://www.youtube.com/channel/UC3mQnUb4NiwhD67H465_sBw" rel="noopener" target="_blank">YouTube</a>
•
<a href="https://telegram.me/frontfest" rel="noopener" target="_blank">Telegram</a>
</p>
</div>
</aside>
</div>
</body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('js/service-worker.js')
.then(function(reg) {
console.log("Service worker initialized.");
}).catch(function(err) {
console.log("Service worker not initialized: ", err)
});
}
</script>
</html>