-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
734 lines (711 loc) · 46.4 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
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eaVision | Blog de Edwin Anaya</title>
<meta property="og:url" content="https://edwik.github.io/eavision/" />
<meta property="og:type" content="eaVision" />
<meta property="og:title" content="Blog de Edwin Anaya" />
<meta property="og:description" content="Material para Estudiantes y Desarrolladores" />
<meta property="og:image" content="images/img-facebook.JPG" />
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
window.smartlook||(function(d) {
var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
c.charset='utf-8';c.src='//rec.smartlook.com/recorder.js';h.appendChild(c);
})(document);
smartlook('init', 'dd5fa3587b73104b6383693df1b7c39d59510ae9');
</script>
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82090778-1', 'auto');
ga('send', 'pageview');
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.7&appId=575747655907335";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<nav id="navv" class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand title animated pulse" href="">eaVision</a><!--<span class="lema"><em>- Para Estudiantes</em></span>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- <li><a href="#">Hoja de vida</a></li>
<li><a href="#">Portafolio</a></li> -->
<li><a class="animated swing" href="https://edwik.github.io/corvata/">Servicios</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<aside class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="panel-group animated fadeIn" id="accordion" role="tablist" aria-multiselectable="true">
<a class="scroll inicio" href="#navv">INICIO</a>
<div class="panel">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
<i class="material-icons fl">chevron_right</i>LISTA DE CURSOS
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<ul>
<li><a class="scroll" href="#cursos-gratis">Online Gratis</a></li>
<li><a class="scroll" href="#cursos-youtube">Cursos en YouTube</a></li>
<li><a class="scroll" href="#cursos-pagos">Online de Pago</a></li>
</ul>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
<i class="material-icons fl">chevron_right</i>ARTICULOS
</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
<div class="panel-body">
<ul>
<li><a class="scroll" href="#nomadas-digitales">Nómadas Digitales</a></li>
<li><a class="scroll" href="#app-recomendadas">App Recomendadas</a></li>
<li><a class="scroll" href="#hobbies">Hobbies</a></li>
<li><a class="scroll" href="#anuncios-en-facebook">Anuncios en Facebook</a></li>
</ul>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="heading6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
<i class="material-icons fl">chevron_right</i>TOOLBOX
</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
<div class="panel-body">
<ul>
<li><a class="scroll" href="#monetizacion-seo">Monetización Seo</a></li>
<li><a class="scroll" href="#github-pages">GitHub Pages</a></li>
<li><a class="scroll" href="#utilidades">Utilidades</a></li>
<li><a class="scroll" href="#flexbox">Flexbox</a></li>
</ul>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
<i class="material-icons fl">chevron_right</i>EMPRENDEDORES
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<ul>
<li><a class="scroll" href="#apoyo-de-iniciativas">Apoyo de Iniciativas</a></li>
</ul>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
<i class="material-icons fl">chevron_right</i>CONVOCATORIAS Y EVENTOS
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<ul>
<li><a class="scroll" href="#estudia-una-carrera-ti">Estudia una carrera TI</a></li>
</ul>
</div>
</div>
</div>
<div class="f">
<div class="fb-like" data-href="https://edwik.github.io/eavision/" data-width="200" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
<div class="fb-share-button" data-href="https://edwik.github.io/eavision/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fedwik.github.io%2Feavision%2F&src=sdkpreparse">Compartir</a></div>
</div>
</div> <!-- -->
</aside>
<main class="col-lg-9 col-md-12 col-sm-12 col-xs-12 animated fadeIn">
<div class="titulo-main">
<span class="h">Estudia Online</span><br>
<span class="a"><em>Martes 19 de julio de 2016</em></span>
</div>
<section id="cursos-gratis">
<div class="sub-titulo-main">
<span class="sh">Lista de cursos gratis</span>
</div>
<div class="conten">
<ul>
<li>
<a target="_blank" href="https://oja.la/l/nubelo">Cursos de MinTic</a><span class="colorfree">Gratis</span> - Cursos muy buenos y recomendados para iniciarte en el trabajo 3.0 y aprender sobre <strong>Marketing Digital</strong>, <strong>Desarrollo Web</strong>, <strong>Periodismo Digital.</strong>
</li><br>
<li>
<a target="_blank" href="https://www.youtube.com/user/FalconMasters/playlists">Falcon Máster</a><span class="colorfree">Gratis</span> - Este es el canal de YouTube de un joven muy bueno que dedica parte de su tiempo haciendo videos para ensañarnos tecnologías web y muy bien explicados.
</li><br>
<li>
<a target="_blank" href="https://www.youtube.com/user/codigofacilito/playlists">Código Facilito</a><span class="colorfree">Gratis</span> - Esta es similar al trabajo de Falcon Máster pero ellos tienen mucho mas cursos disponibles para aprovechar.
</li><br>
<li>
<a target="_blank" href="https://www.codecademy.com/es">Code Cademy</a><span class="colorfree">Gratis</span> - Esta es una de mis favoritas porque en su plataforma a medida que vas aprendiendo allí mismo vas compilando y viendo los resultados.
</li><br>
<li>
<a target="_blank" href="http://online.stanford.edu/courses">Universidad de Stanford Online</a><span class="colorfree">Gratis</span> - Plataforma de cursos virtuales ofrecidos por la Universidad de Stanford. Muy buenos y el único detalle es que necesitas saber un poco de Ingles.
</li><br>
<li><a target="_blank" href="https://www.google.com/partners/?hl=es-419#p_insights"><strong>Google Partners</strong></a>
<span class="colorfree">Gratis</span> - Sitio oficial para volverse socio de google. Google da la oportunidad para que las personas puedan estudiar a fondo sus herramientas y sacarles el mejor provecho, luego se aseguran de que así sea realizando un test y finalmente certificándolos para que las empresas sepan que eres un socio.</li>
</ul>
</div>
<section id="cursos-youtube">
<div class="sub-titulo-main">
<span class="sh">Cursos en YouTube</span>
</div>
<div class="conten">
<p>A continuación haré un recopilado de algunos de los mejores cursos que he encontrado en YouTube para aprender totalmente gratis. Personalmente admiro mucho a estas personas que se preparan, les apasiona y deciden dedicar gran parte de su tiempo realizando videos para compartir su experiencia enseñándonos totalmente gratis, por esto quiero motivarlos a que aparten tiempo también y saquen el mejor provecho de estos.</p>
<li><a target="_blank" href="https://www.youtube.com/watch?v=-fHFJg4spI8&list=PLvimn1Ins-42o8Ms1G2SuRloD01nnXn31"><strong>Java SE Básico</strong></a><span class="colorvideo">YouTube</span> - Aprende Java y programación orientada a objetos.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=hI9H4eR7jzw&list=PLvimn1Ins-43qPXR3gBcxwe7tydxZtsON"><strong>Java SE Avanzado</strong></a><span class="colorvideo">YouTube</span> - Refuerza tus conocimientos y se un experto en Java.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=DITiApenY2U&list=PLnWAzeXp9V4ltQPG1nxroarqEBtnRPhDp"><strong>Android Studio</strong></a><span class="colorvideo">YouTube</span> - Lo prometido es deuda, aquí están las listas de reproducción de los cursos de Android Studio, <a href="https://www.youtube.com/watch?v=pO7STLF82Ro&list=PLpOqH6AE0tNh5rvbCb03w8ORR8bOoftZ6">Lista 1</a>, <a href="https://www.youtube.com/watch?v=DITiApenY2U&list=PLnWAzeXp9V4ltQPG1nxroarqEBtnRPhDp">Lista 2</a>, <a href="https://www.youtube.com/watch?v=kNgPYwUY6ZA&list=PLnWAzeXp9V4l1Ru8NB2Iuu39nERyAXJRB">Lista 3</a>,
<a href="https://www.youtube.com/watch?v=wt0Jzc9UHNw&list=PLEtcGQaT56ch37mnavd8p5cbnkDvXLGsX">Lista 4.</a></li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=r4kqcSs4F7I&list=PLvimn1Ins-40CImsffjCkv_TrKzYiB1gb"><strong>Spring Framework</strong></a><span class="colorvideo">YouTube</span> - Aprende Spring Framework y conviértete en un promotor de buenas practicas de programación y crea aplicaciones web totalmente solidas y escalables.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=o0vQ0Jfq5ls&list=PLvimn1Ins-41I74OfEUG_RTIX7wXl19E8"><strong>Ruby</strong></a><span class="colorvideo">YouTube</span> - Aprende Ruby y toda su metodología y sintaxis.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=U4ejmeEals0&list=PLpOqH6AE0tNhdnOl1mOBthj4C7OHdwQB2"><strong>Angular</strong></a><span class="colorvideo">YouTube</span> - a continuación dejare unas listas de reproducción para aprender <strong>Angular Js</strong> <a href="https://www.youtube.com/watch?v=U4ejmeEals0&list=PLpOqH6AE0tNhdnOl1mOBthj4C7OHdwQB2">Lista 1</a> <a href="https://www.youtube.com/watch?v=v5MRjk8Lj5o&list=PLEtcGQaT56cgHfdvGguisToK90z321pRl">Lista 2</a> y para reforzar tu aprendizaje te recomiendo que visites el <a href="https://www.youtube.com/user/azaman1984/videos">Canal</a> de <strong>Carlos Azaustre</strong> que es un maestro en Angular.js.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=YdshHqwrUa0"><strong>Ionic Framework</strong></a><span class="colorvideo">YouTube</span> - Para crear aplicaciones moviles apartir de Html, Css y Javascript, te recomiendo que empieces con este <a target="_blank" href="https://www.youtube.com/watch?v=YdshHqwrUa0">video</a>, luego esta <a target="_blank" href="https://www.youtube.com/watch?v=-VdZRGsKZn4&list=PLYPjmy5IVxT-7FV0uzpG2izFhGoE0Hq2y">lista de reproducción 1</a> o <a target="_blank" href="https://www.youtube.com/watch?v=5ZYipldD9KE&list=PL70Go5StQPB9_H4wHwP9VHsE-ybF4hErE">lista de reproducción 2</a> o <a target="_blank" href="https://www.youtube.com/watch?v=O9b5tUndB10&list=PLEtcGQaT56chdXOZeYY8uyFeHqDZQqgVg">lista de reproducción 3</a>.</li><br>
<li><a target="_blank" href="https://www.youtube.com/watch?v=3xcbtykTkEM&list=PLa8OODhatbXZ-XsM78E_8expiEAQycO2J"><strong>FireBase</strong></a><span class="colorvideo">YouTube</span> - Nuevo, aun no esta terminada la lista pero muy bueno.</li><br>
<!-- <li><a target="_blank" href=""><strong></strong></a><span class="colorvideo">YouTube</span> - </li><br> -->
</div>
</section>
</section>
<section id="cursos-pagos">
<div class="sub-titulo-main">
<span class="sh">Lista de cursos pagos</span>
</div>
<div class="conten">
<ul>
<li>
<a target="_blank" href="https://platzi.com/">Platzi</a><span class="colorpro">Pago</span> - Esta es una plataforma web de cursos virtuales líder y ademas de hacer los cursos te dan certificación y acceso a su plataforma de empleos.
</li><br>
<li>
<a target="_blank" href="https://es.coursera.org/">Coursera</a><span class="colorpro">Pago</span> - Muy Recomendada, ellos tienen una recopilación de cursos y todos de alto nivel y con certificaciones.
</li><br>
<li>
<a target="_blank" href="https://www.udacity.com/">Udacity</a><span class="colorfree">Gratis</span><span class="colorpro">Pago</span> - Pero si sabes un poco de ingles y quieres estudiar no dudes en tomar esta opción, pues ellos son los lideres en cursos de tecnología.
</li><br>
<li><a target="_blank" href="https://devcode.la/cursos/">Dev Code</a><span class="colorpro">Pago</span> Plataforma de cursos online.</li>
</ul>
</div>
</section>
<div class="titulo-main">
<span class="h">Artículos</span><br>
<span class="a"><em>Martes 20 de julio de 2016</em></span>
</div>
<section id="nomadas-digitales">
<div class="sub-titulo-main">
<span class="sh">Nómadas Digitales - </span><a target="_blank" href="http://remoters.net/es/">remoters.net</a>
</div>
<div class="conten">
<p>Estos son el tipo de persona que dedican su vida a viajar y conocer muchos lugares del mundo y donde se encuentren allí desarrollan su trabajo, gracias a la tecnología y sus avances ¡Ya es Posible! pues todo lo que necesitan es una Laptop y acceso a Internet y por supuesto desarrollar un habito. <br><br>Quiero dejarles a ustedes una base de datos de sitios muy interesantes que deberían revisar si desean tener este estilo de vida, son sitios para trabajar como Nómadas Digitales. </p>
<ul>
<li>
<a target="_blank" href="https://www.producthunt.com/">Product Hunt</a>
</li>
<li>
<a target="_blank" href="https://authenticjobs.com/#remote=true">Authentic Jobs</a>
</li>
<li>
<a target="_blank" href="http://frontenddeveloperjob.com/">Frontend Developer Job</a>
</li>
<li>
<a target="_blank" href="http://idealistcareers.stfi.re/work-from-home-interview/?utm_content=buffer08aae&utm_medium=social&sf=zkwxww&utm_source=twitter.com&utm_campaign=buffer#aa">Idealistcareers</a>
</li>
<li>
<a target="_blank" href="https://jobs.github.com/positions?description=&location=remote">Jobs.Github</a>
</li>
<li>
<a target="_blank" href="https://github.com/lukasz-madon/awesome-remote-job#job-boards">Awesome Remote Job</a>
</li>
<li>
<a target="_blank" href="https://nomadlist.com/#cost_type=i%27m+a+nomad&internet_speed=fast+internet&">Nomad List</a>
</li>
<li>
<a target="_blank" href="https://stackoverflow.com/jobs?allowsremote=True">Stack overflow Jobs</a>
</li>
<li>
<a target="_blank" href="https://remoteok.io/">Remote Ok</a>
</li>
<li>
<a target="_blank" href="https://www.transformify.org/">Transformify</a>
</li>
<li>
<a target="_blank" href="https://weworkremotely.com/">Wework Remotely</a>
</li>
<li>
<a target="_blank" href="http://jobs.remotive.io/">Jobs Remotive</a>
</li>
<li>
<a target="_blank" href="https://nomadprojects.io/">Nomad Projects</a>
</li>
<li>
<a target="_blank" href="https://basecamp.com/about/jobs">Basecamp</a>
</li>
</ul>
<p>Algunas herramientas para trabajar como Nómadas Digitales</p>
<ul>
<li>
<a target="_blank" href="https://www.tripmode.ch/">Trip Mode</a>
</li>
<li>
<a target="_blank" href="https://revolut.com/">Revolut</a>
</li>
<li>
<a target="_blank" href="https://trello.com/">Trello</a><span class="colorfree">Gratis</span> - App para organizar tu trabajo como trabajador 3.0 o Nómada Digital
</li>
<li>
<a target="_blank" href="https://es.atlassian.com/software/jira">Jira</a><span class="colorpro">Pago</span> - App para organizar tu trabajo como trabajador 3.0 o Nómada Digital
</li>
</ul>
</div>
</section>
<section id="app-recomendadas">
<div class="sub-titulo-main">
<span class="sh">App Recomendadas</span>
</div>
<div class="conten">
<ul>
<li><a target="_blank" href="https://dribbble.com"><strong>Dribbble</strong></a> Este sitio me gusta muchísimo y lo uso para ver la tendencia en diseño a nivel mundial y evaluar mi trabajo con otros diseñadores.
</li>
<li><a target="_blank" href="http://www.materialup.com/"><strong>Materialup</strong></a> Es un sitio donde otros diseñadores comparte todos sus proyectos en lo que han utilizado material design.</li>
<li><a target="_blank" href="http://www.awwwards.com/"><strong>Awwwards</strong></a> Es un sitio donde podemos ver y votar cuales son los votados mejores sitios del mundo en cuando a diseño.</li>
<li><a target="_blank" href="https://medium.com/tag/design"><strong>Medium</strong></a> Leer artículos en Medium es otro de m is hobbies favortios, los invito a revisarlo.</li>
</ul>
</div>
</section>
<section id="hobbies">
<div class="sub-titulo-main">
<span class="sh">Hobbies</span>
</div>
<div class="conten">
<ul>
<li><a target="_blank" href="https://www.ticketcode.co/"><strong>Ticketcode</strong></a> App para organizar eventos.</li>
<li><a target="_blank" href="https://facebook360.fb.com/"><strong>Facebook 360</strong></a> Mejora la experiencia de tus usuarios con la tecnología 360 para videos que facebook ha apostado.</li>
<li><a href="https://noysi.com/#/es/comunidades"><strong>Noysi</strong></a> app web para hablar con comunidades.</li>
<li><a href="https://aerolab.co/"><strong>Aerolab</strong></a> Una de las compañías digitales mas admiradas por mi.</li>
</ul>
</div>
</section>
<section id="anuncios-en-facebook">
<div class="sub-titulo-main">
<span class="sh">Anuncios en Facebook</span>
</div>
<div class="conten">
<p>Ahora anunciar en las redes sociales tiene un 500% mas de rentabilidad, comenzando por su bajo coste, porque puedes elegir el segmento de mercado que quieres que exclusivamente vean tu anuncio y puedes trabajar con los clientes que han visto tu marca. Completa personalización en los anuncios es la gran meta de los anuncios en en Internet. Dejare un video de facebook para empresas donde explican un poco mas detallado <a target="_blank" href="https://www.facebook.com/marketing.espanol/videos/1011550335566734/">video</a>. Otro dato es que facebook esta buscando desarrolladores para impulsar la innovación en Latinoamérica puedes ver mas información en la <a target="_blank" href="https://www.facebook.com/business/news/facebook-busca-desarrolladores-para-impulsar-innovacin-en-amrica-latina">Pagina Oficial</a></p>
</div>
</section>
<div class="titulo-main">
<span class="h">ToolBox</span><br>
<span class="a"><em>Martes 19 de julio de 2016</em></span>
</div>
<section id="monetizacion-seo">
<div class="sub-titulo-main">
<span class="sh">Monetización respecto de SEO</span>
</div>
<div class="conten">
<p>Cuando estamos posicionando es como si estuviéramos construyendo un local a la calle, una oficina o un negocio donde solo pasan por la calle compradores interesados en los productos. Esto es básicamente lo que nosotros podemos lograr con el SEO, entonces ¿Cómo se monetiza un web site por medio del seo? a continuación algunos ejemplos:</p>
<ul>
<li>
<strong>Afiliados</strong>(<a target="_blank" href="http://www.clickbank.com/">Clickbank</a>) - Se pueden vender productos de afiliados
</li>
<li>
<strong>CPA</strong>(<a target="_blank" href="http://www.offervault.com/es">OfferVault</a>) - Venden productos dependiendo el nicho.
</li>
<li>
<strong>Volumen</strong>(<a target="_blank" href="https://www.google.es/adsense/start/#?modal_active=none">Adsense</a>) - Si tenemos el volumen suficiente.
</li>
<li>
<strong>Leasing de espacios</strong> - Alquilar o Arrendar un pagina de nuestro sitio web.
</li>
<li>
<strong>SEO en YouTube</strong> - Posicionar en YouTube, alquilar un espacio o video, propaganda en YouTube.
</li>
<li>
<strong>Facebook Ads</strong> - Alquilar espacios, publicaciones o simplemente montar una campaña.
</li>
<li>
<strong>Venta de Cookies</strong> - En un sitio web de autoridad.
</li>
<li>
<strong>Amazon y Reviews</strong> - Amazon y sitios de reseñas.
</li>
<li>
<strong>How TOs y Tutoriales</strong> - que luego se pueden vender
</li>
<li>
<strong>Listas de correo</strong> por patrinados y nicho.
</li>
<li>
<strong>Post Patrocinados</strong> - por clientes o marcas
</li>
<li>
<strong> Venta de dominios</strong>, comprarlos y luego revenderlos.
</li>
<li>
<strong>Alquiler de enlaces</strong>
</li>
<li>
<strong>Ventas de sitios</strong> en Flippa, theme forest.
</li>
<li>
<strong>Venta de Lead o PPL</strong> - si tienes un sitio con contenido especializado en techos, puedes vender esos lead.
</li>
<li>
<strong>Contenidos Premium</strong>
</li>
<li>
<strong>Servicios SEO</strong>
</li>
<li>
<strong>Manejo de Reputación</strong>
</li>
</ul>
</div>
</section>
<section id="github-pages">
<div class="sub-titulo-main">
<span class="sh"><strong>Git Hub Pages</strong> - </span><a target="_blank" href="https://pages.github.com/">Sitio oficial</a>
</div>
<div class="conten">
<strong>GitHub</strong> es una plataforma de desarrollo colaborativo y control de versiones que ahora también nos da la opción de hacer una pagina de nuestro proyecto atento a los siguientes pasos para windows: </p>
<ol>
<li>
Selecciona un proyecto que quieras subir y mantenlo dentro de una carpeta, recuerda que dentro de estar carpeta la pagina principal debe tener el nombre de <em>index.html</em>.
</li>
<li>
Abrimos la terminal o consola de windows y nos dirigimos a la ruta de nuestro proyecto
<pre>
// Lista de Comandos Básicos para la consola de windows
cd [destino] – Cambiamos de directorio
cd ../ – Regresamos un directorio atrás
cd / – Regresamos al inicio de nuestra ruta, al disco duro
dir – Muestra los directorios que hay en nuestra posición actual
cls – Limpiamos pantalla
mkdir [nombre carpeta] – Hacemos un directorio
rmdir [nombre carpeta] – Eliminamos un directorio (solo si esta vació)
del [nombre archivo] – Eliminamos un archivo
</pre>
</li>
<li>
Una vez dentro de la carpeta del proyecto, lo que hacemos es inicializar el repositorio utilizando el comando y nos mostrara el siguiente mensaje en verde:
<pre>
git init
<div class="preverde"> initialized empty Git repository in [Ubicación del proyecto].git
</div>
</pre>
</li>
<li>
Luego definimos donde subiremos la pagina, cual sera el repositorio remoto <a class="btn-modal" data-toggle="modal" data-target="#github-pages-img1">imagen</a>. Lo podemos hacer desde <a target="_blank" href="https://github.com">github</a>, creamos el repositorio normal y luego copiamos la dirección <a class="btn-modal" data-toggle="modal" data-target="#github-pages-img2">imagen</a>. <br><br>
</li>
<li>En la terminal usamos el comando:
<pre>
git remote add origin [dirección] //Asi definimos el remoto
</pre>
y luego para que el github pages funcione debe estar dentro de una rama llamada <em>gh-pages</em> para eso escribimos lo siguiente y nos mostrara el mensaje en verde:
<pre>
git checkout -b gh-pages
<div class="preverde"> Switched to a new branch 'gh-pages'
</div>
</pre>
</li>
<li>Luego de esto añadimos los archivos y hacemos commit:
<pre>
git add .
git commit -m "initial commit"
</pre>
</li>
<li>
por ultimo solo subimos a la rama que queremos el proyecto, en nuestro caso sera:
<pre>
git push origin gh-pages
//te pide tu usuario
//te pide tu contraseña
</pre>
y listo el proyecto se ha subido, ahora podemos ver el proyecto en <h4>[USUARIO].github.io/[PRYECTO]</h4>
ejemplo: <em>https://edwik.github.io/eavision/</em>
</li>
</ol>
</div>
</section>
<section id="utilidades">
<div class="sub-titulo-main">
<span class="sh">Utilidades</span>
</div>
<div class="conten">
<p>Estas son algunas de las tantas herramientas que guardo y me gusta utilizar en los proyectos y quiero compartirlas con todos.</p>
<ul>
<li>
<a target="_blank" href="http://mikethedj4.github.io/Webkit-Scrollbar-Generator/"><strong>Scrollbar-Generator</strong></a> Este es una herramienta de <a target="_blank" href="http://mikethedj4.github.io">mikethedj4</a> que nos permite hacer un diseño rápido para nuestro scroll e incrustarlo en el sitio que estemos desarrollando.
</li>
<li><a target="_blank" href="https://chatra.io/es/"><strong>Chatra</strong></a> es una api para chatear directamente con los visitantes de tu sitio web muy buena.
</li>
<li><a href="https://www.intercom.io/es/live-chat"><strong>Intercom Live Chat</strong></a> Igual de bueno que Chatra, pero recomiendo Intercom solo para empresas grandes.</li>
<li><a target="_blank" href="http://getbootstrap.com/"><strong>Bootstrap</strong></a> Muchos los conocemos pero mejor que nunca Bootstrap es muy innovador con sus herramientas y ayuda que nos presta al momento de diseñar un sitio rápidamente.
</li>
<li><a target="_blank" href="http://materializecss.com/"><strong>Materialize css</strong></a> este en un framework frontend como el estilo de bootstrap con la diferencia que Materialize tiene todos sus componentes con Material Design.
</li>
<li>
<a target="_blank" href="http://www.chartjs.org/"><strong>Chart Js</strong></a> Es una api javascript para agregar gráficas a tu sitio web muy potentes y con buenos diseños ademas muy fácil.
</li>
<li><a target="_blank" href="https://rollbar.com/"><strong>Rollbar</strong></a> Como su presentación en la pagina oficial dice: Ponga los errores en su lugar, hace un seguimiento de errores pila completa para todas las aplicaciones en cualquier lenguaje
</li>
<li><a target="_blank" href="http://momentjs.com/"><strong>Moment Js</strong></a> Bueno y este api me gusta mucho y la utilizo para Analizar, validar, manipular y mostrar fechas en JavaScript.
</li>
<li><a target="_blank" href="http://mdbootstrap.com/"><strong>Mdbootstrap</strong></a> Que tal les presento Bootstrap con material design.</li>
<li><a target="_blank" href="http://www.oracle.com/technetwork/es/java/javafx"><strong>Java FX</strong></a> Con Java FX puedes diseñar la interfaz gráfica de tu software desarrollado con java.. con CSS muy bueno. pero aquí les dejare unos videos de <strong>Luis Tejada</strong> <a target="_blank" href="https://www.youtube.com/watch?v=H8-87In-hLk">Video 1</a> <a target="_blank" href="https://www.youtube.com/watch?v=vzH_qMQ0oP0">Video 2</a> <a target="_blank" href="https://www.youtube.com/watch?v=uzEL5NCXP4k"> Video 3</a> y bueno aquí hay otro tutorial <a target="_blank" href="http://code.makery.ch/library/javafx-8-tutorial/es/">tutorial java FX</a> y aquí lo ultimo también mejor java FX integrado con NetBeans <a target="_blank" href="https://netbeans.org/features/java-on-client/javafx.html">Netbeans y Java Fx</a>.
</li>
<li><a href="http://payu.com.co/desarrolladores"><strong>Payu Colombia</strong></a> Si necesitas integrar métodos de pago en tu proyecto te recomiendo que revises las posibilidades que Payu te ofrece.</li>
<li><a target="_blank" href="http://devdocs.io/"><strong>Dev Docs</strong></a> Documentación offline para desarrolladores, una de mis favoritas.</li>
<li><a target="_blank" href="http://mailchimp.com/"><strong>Mail Chimp</strong></a> Una app muy buena para hacer una buena presentación para los correos electrónicos de tu empresa.</li>
<li><a target="_blank" href="https://livecode.com/"><strong>LiveCode</strong></a> Esta es uno de mis software mas frecuentados para el desarrollo de prototipos. Recuerda descargar la <em>Community Edition</em> si la quieres para tu propio uso.<a target="_blank" href="https://livecode.org/">LiveCode.org</a>.</li>
<li><a target="_blank" href="http://ionicframework.com/"><strong>Ionic Framework</strong></a> Este es uno de los framework que mas amo, utilizarlo es muy genial.</li>
<li><a target="_blank" href="https://marvelapp.com/"><strong>Marvel App</strong></a>A ojos cerrados recomiendo Marvel App para el diseño y simulación de prototipos para aplicaciones móviles, muy bueno.</li>
<li><a target="_blank" href="https://www.invisionapp.com"><strong>inVision</strong></a> El que muchos prefieren y con el cual yo empece hacer mis primeros prototipos.</li>
<li><a target="_blank" href="https://polymail.io/"><strong>Polymail</strong></a> Aun estoy esperando, no ha salido pero lo necesito muchísimo para gestionar todas las cuentas de corro electrónico.</li>
<li><a target="_blank" href="http://brandcolors.net/"><strong>Bradcolors</strong></a> Para ver paletas de colores.</li>
<li><a target="_blank" href="https://color.adobe.com/es/"><strong>Adobe Kuler</strong></a> Para combinar colores.</li>
<li><a target="_blank" href="https://www.digitalocean.com/"><strong>Digital Ocean</strong></a> Servicio de hospedaje para app y web sites.</li>
<li><a target="_blank" href="https://www.xamarin.com/"><strong>Xamarin</strong></a>Navegando me encontré con este, igual que <strong>Ionic</strong> sirve para desarrollar aplicaciones móviles híbridas (para todos los sistemas so) y próximamente lo probare, ademas aquí dejo un<a target="_blank" href="http://xamurais.com/primer-proyecto-xamarin-android/">sitio web</a> donde nos enseñan a crear un primer proyecto para android.</li>
<li><a target="_blank" href="https://reduxframework.com/"><strong>Redux</strong></a> Este es un framework para wordpress que facilita mucho el panel de administración para nuestro sitio.</li>
<li><a target="_blank" href="http://ckeditor.com/"><strong>CKEditor</strong></a> Editor de texto muy potente para integrarlo a nuestras aplicaciones web (lo que ves es lo que obtienes) aquí pueden <a target="_blank" href="http://ckeditor.com/">descargarlo</a> de la pagina oficial y también dejo para los que deseen integrarlo una <a target="blank" href="http://ckeditor.com/demo">guia</a>.</li>
<li><a target="_blank" href=""><strong>TinyMCE</strong></a> este es otro editor avanzado igual que <strong>CKEditor</strong> pueden <a target="_blank" href="https://www.tinymce.com/download/">descargarlo</a> y también ver algunos <a target="_blank" href="https://www.tinymce.com/docs/demo/basic-example/">ejemplos</a> de como integrarlo.</li>
<li><a target="_blank" href="http://studio-42.github.io/elFinder/#elf_l1_Lw"><strong>elFinder</strong></a> Es un gestor de archivos desarrollado con tecnologías JavaScript,PHP, CSS ,AJAX y es de código abierto, ademas de una interfaz muy limpia y atractiva. Para implementarla lo podemos hacer directamente en su <a target="_blank" href="http://studio-42.github.io/elFinder/#elf_l1_Lw">sitio web</a> y para obtener la documentación <a target="_blank" href="http://studio-42.github.io/elFinder/#elf_l1_Lw">Aquí</a>. </li>
<li><a href="http://keystonejs.com/"><strong>Keystonejs</strong></a> Es un gestor de contenido CMS al igual que wordpress solo que este esta basado en Javascript y Wordpress en PHP, les invito a probarlo me ha parecido muy bueno.</li>
<li><a href="http://jade-lang.com/"><strong>Jade</strong></a> Es un lenguaje conciso para la escritura de plantillas HTML.</li>
<li><a href="https://ghost.org/es/developers/"><strong>Ghost</strong></a> Para hacer de tu pagina web un administrador de contenido muy rápido</li>
<li><a href="http://dean.edwards.name/packer/"><strong>Packer</strong></a> Si alguna vez han querido cifrar algún script de su pagina web, le recomiendo utilizar esta aplicación.</li>
</ul>
</div>
</section>
<section id="flexbox">
<div class="sub-titulo-main">
<span class="sh">Flexbox</span>
</div>
<div class="conten">
<p>Flexbox es un modo de diseñar la estructura de nuestro sitio web de una forma mas rápida y fácil. A continuación una lista de propiedades para comenzara utilizar Flexbox en nuestros proyectos. <em>Una anotación importante es que no están incluidos os prefijos estos pueden ser incluidos automáticamente por <a target="_blank" href="http://leaverou.github.io/prefixfree/">Autoprefx-free</a>.</em></p>
<pre>
//Añadiendo al final de tu sitio la etiqueta
<div class="preverde"> <script src="prefixfree.min.js"></script>
</div>
</pre>
<p>En adelante mostraremos a ustedes algunas de las propiedades CSS para uso de Flexbox</p>
<ul>
<li>
<p><strong>Display Flex</strong> Esta propiedad nos permite establecer cual sera el contenedor de los elementos a los que queremos dar un acomodo y/o distribución.</p>
<pre>
display: flex | inline-flex ;
</pre>
</li>
<li>
<p><strong>Flex Direction</strong> Nos permite establecer la dirección en la que se acomodaran nuestros elementos.</p>
<pre>
flex-direction: row | column | row-reverse | column-reverse ;
</pre>
</li>
<li>
<p><strong>Flex Wrap</strong> Podemos indicar si todos los elementos estarán en linea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.</p>
<pre>
flex-wrap: no-wrap | wrap | wrap-reverse ;
</pre>
</li>
<li>
<p><strong>Flex Flow</strong> Es un atajo entre flex-direction y flex-wrap.</p>
<pre>
flex-flow:row wrap;
/* Primer valor es el valor que le daríamos a flex-direction */
/* Segundo valor es el valor que le daríamos a flex-wrap */
</pre>
</li>
<li>
<p><strong>Justify Content</strong> Nos permite decidir la posición de nuestros elementos y la distribución que tendran.</p>
<pre>
justify-content: flex-end | flex-start | center | space-around | space-between ;
</pre>
</li>
<li>
<p><strong>Align Items</strong> Nos permite posicionar / distribuir elementos verticalmente. (solo para una linea de elementos)</p>
<pre>
align-items: flex-start | flex-end | center | stretch | baseline ;
</pre>
</li>
<li>
<p><strong>Align Content</strong> Nos permite posicionar / distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.</p>
<pre>
align-content: flex-start | flex-end | center | stretch | space-between | space-around ;
</pre>
</li>
<p>Propiedades para los elementos hijos</p>
<li>
<p><strong>Flex Basis</strong> Establecemos el tamaño que tendrá un elemento.</p>
<pre>
flex-basis:;
</pre>
</li>
<li><p><strong>Flex Grow</strong></p> Establecemos la proporción de crecimiento que tendrá un elemento a comparación con los demás
<pre>
flex-grow:1;
</pre>
</li>
<li>
<p><strong>Flex Shrink</strong> Establecemos la proporción de encogimiento que tendrá un elemento a comparacion con los demás.</p>
<pre>
flex-shrink:1;
</pre>
</li>
<li>
<p><strong>Flex</strong> Atajo entre flex-grow, flex-shrink, flex-basis</p>
<pre>
flex:1 1 50%;
</pre>
</li>
<li>
<p><strong>Order</strong> Establecemos el orden que tendrá un elemento a comparacion con otros elementos.</p>
<pre>
order:;
</pre>
</li>
<li>
<p><strong>Align Self</strong> Nos permite alinear un elemento independientemente de los demás.</p>
<pre>
align-self: flex-start | flex-end | center | stretch | baseline ;
</pre>
</li>
</ul>
</div>
</section>
<div class="titulo-main">
<span class="h">Emprendedores</span><br>
<span class="a"><em>Domingo 7 de agosto de 2016</em></span>
</div>
<section id="apoyo-de-iniciativas">
<div class="sub-titulo-main">
<span class="sh">Apoyo de Iniciativas</span>
</div>
<div class="conten">
<ul>
<li>
<p><strong><a target="_blank" href="https://apps.co/">Apps.co</a></strong> Desde Colombia el Min Tic ha apostado muchísimo al país y la meta es lograr posicionar a Colombia como una potencia en tecnología, innovación por eso desde su iniciativa apps.co buscar apoyar a emprendedores con ideas ne negocio en su etapa iniciar y a empresas en fortalecimiento de negocios TIC.</p>
</li>
<li>
<p><strong><a target="_blank" href="http://www.byci.bayer.com/beja/index.html">Bayer</a></strong> En su programa de <strong>Bayer Young Community Innovators</strong> esta en busca de ideas innovadoras para mejorar la calidad de vida de poblaciones vulnerables y su principal objetivo son soluciones de Salud y Agro.</p>
</li>
<li>
<p><strong><a target="_blank" href="https://www.jovenesnestle.com.co/">Nestlé</a></strong> Cuenta con un programa llamado <strong>Iniciativa por los Jóvenes</strong> el cual busca contribuir en la preparación y capacitación de las nuevas generaciones, con el fin de integrarlas eficazmente en el mercado laboral. Cuentan con varios <a target="_blank" href="https://www.jovenesnestle.com.co/#cursos">Cursos</a> interesantes para cualquier profesional como lo es prepararse para una <a target="_blank" href="https://www.jovenesnestle.com.co/orientate/tips-antes-de-una-entrevista/">Entrevista</a>.</p>
</li>
<li><p><a href="http://www.centrodeinnovacionbbva.com/"><strong>Centro de Innovación BBVA</strong></a> Sin duda una empresa que le ha apostado mucho a la tecnología, me gusta su apoyo y el involucrarse en nuestro ecosistema saliendo un poco de finanzas pues el banco BBVA ahora tiene mucho apoyo para emprendedores, noticias y hasta <a href="https://bbvaopen4u.com/es">Blog</a> De actualidad para desarrolladores y empresas de tecnología.</p></li>
</ul>
</div>
</section>
<div class="titulo-main">
<span class="h">Convocatorias y Eventos</span><br>
<span class="a"><em>Jueves 21 de julio de 2016</em></span>
</div>
<section id="estudia-una-carrera-ti">
<div class="sub-titulo-main">
<span class="sh">Estudia una carrera TI</span>
</div>
<div class="conten">
<p>Estudiar en Colombia una carrera relaciona con Tecnologías de la Información puede salirte gratis, esta es la premisa que promueve el <a target="_blank" href="https://www.facebook.com/MinisterioTIC.Colombia/"><strong>Ministerio de Las TIC</strong></a>, cualquier estudiante que desee estudiar en cualquier universidad e instituto del país pueda acceder a un CREDITO CONDONABLE con el icetex el cual sera condonable (no deberá pagar el crédito) si cumple con requisitos como terminar toda la carrera y graduarse, mantener un promedio, etc. El requisito principal es que su puntaje en el <a target="_blank" href="http://www.icfesinteractivo.gov.co/resultadosSaber/resultadosSaber11/res_individuales.htm">ICFES</a> sea de mínimo 210 pts y sea admitido en un centro educativo o este entre primer semestre y cuarto semestre, a continuación una imagen descriptiva del proceso <a class="btn-modal" data-toggle="modal" data-target="#estudia-una-carrera-ti-img1">imagen</a>. Puedes visitar el sitio oficial de <a target="_blank" href="http://www.talento-ti.gov.co/"><strong>TALENTO TI</strong></a> para obtener mas información y aquí un video de un caso de éxito <a class="btn-modal" data-toggle="modal" data-target="#estudia-una-carrera-ti-video1">video</a>.</p>
</div>
</section>
<div class="fb-comments" data-href="https://edwik.github.io/eavision/" data-width="600" data-numposts="5"></div>
<footer class="col-lg-12">
<span class="name"><a target="_blank" href="https://www.facebook.com/edwinanayafanpage/">Edwin Anaya H.</a></span>
</footer>
</main>
<!-- Modal -->
<div class="modal fade" id="github-pages-img1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="images/github-pages-img1.jpg" alt="" width="100%">
</div>
</div>
</div>
</div>
<div class="modal fade" id="github-pages-img2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="images/github-pages-img2.jpg" alt="" width="100%">
</div>
</div>
</div>
</div>
<div class="modal fade" id="estudia-una-carrera-ti-img1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="images/estudia-una-carrera-ti-img1.png" alt="" width="100%">
</div>
</div>
</div>
</div>
<div class="modal fade" id="estudia-una-carrera-ti-video1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="100%" height="315px" src="https://www.youtube.com/embed/ryzyEiK2sqI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="top"><i class="material-icons">expand_less</i>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!--
< >
<div class="titulo-main">
<span class="h">Artículos</span><br>
<span class="a"><em>Martes 20 de julio de 2016</em></span>
</div>
<section id="...">
<div class="sub-titulo-main">
<span class="sh">...</span>
</div>
<div class="conten">
...
</div>
</section>
-->