tag:blogger.com,1999:blog-219268572024-03-13T19:17:20.518-05:00CacharreandoCacharreando es una invitación al auto aprendizaje, estás invitado.Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comBlogger253125tag:blogger.com,1999:blog-21926857.post-45700903700709123742018-04-27T12:30:00.001-05:002018-05-03T13:55:38.434-05:00Etiquetas para menús interactivos en HTML5 - menu, menuitem y commandHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Si estás interesado en el desarrollo para web, probablemente ya hayas visto que algunas páginas ofrecen menús y comandos adicionales que no posee el resto, de hecho, tal vez te preguntes cómo crear tus propios menús de tipo aplicación, no por css.<br />
<br />
<a name='more'></a><br />
Y es que ese es el punto, que estas etiquetas (menu, menuitem y command) con etiquetas orientadas s single page apps, dicho de manera simple, a aplicaciones que nunca cambian de dirección y son funcionales, un ejemplo rápido sería gmail, un editor de imágenes, etc. Es decir, son funcionales, permiten hacer x cantidad de cosas, pero realmente su url no cambia.<br />
<br />
Ahora, también es cierto que estas etiquetas están en proceso de aceptación, es decir, es muy probable que algunas navegadores no los acepten, al momento de editar el video, sólo Firefox lo hacía, pero pues vale la pena su análisis.<br />
<br />
Pero no les contaré todo, ustedes lo pueden descubrir en el video.<br />
<br />
<br />
<br />
<amp-youtube autoplay="" data-videoid="uxWP_KtJSrw" height="150" layout="responsive" width="240">
</amp-youtube>
<br />
<br />
Y como siempre, pues no olviden compartirlo.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-70791239813103517802018-04-02T17:48:00.002-05:002018-05-03T13:57:48.861-05:00Etiqueta Details y summary - Elemento interactivo en el Curso HTML5Hola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Algunos de nosotros como desarrolladores hemos instalado o acoplado librerías que hacen x o y acción y posteriormente nos damos cuenta que podríamos haberlo logrado de otra manera, casi siempre más fácil o con menor impacto en nuestro código o desempeño.<br />
<br />
Ese es el caso de la etiqueta details y summary - he visto desarrolladores usando hasta jquery (es en serio) sólo para poder usar páneles de información que se despliegan.<br />
<br />
<br />
<a name='more'></a><br />
Por ello analizamos la etiqueta details que usaba en conjunto con summary probablemente te sirva para usar en tu información o web. <br />
<br />
<br />
<details>
<summary>Este es un ejemplo, da click</summary>
y Aquí aparece nuestro texto oculto ... ¿fácil no? y sin JS o CSS adicional <br />
</details>
<br />
<br />
<br />
Como siempre, no olvides compartir el video .<br />
<br />
<br />
<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/Ix5Ymdevf6g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-68217372644990780752018-03-30T21:52:00.005-05:002018-05-03T14:44:55.031-05:00Prototipado para desarrolladoresHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Les cuento que tuve el gusto de ser invitado a un espacio de la comunidad BDotNet Latam, una comunidad de desarrolladores, con quienes estuvimos tratando el tema de prototipado, evidentemente enfocado a este tipo de perfil.<br />
<br />
De entrada les compartiré la presentación utilizada que contiene los hipervínculos de las herramientas a utilizar.<br />
<br />
<br />
<iframe allowfullscreen="true" frameborder="0" height="389" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/e/2PACX-1vR4Gwarbso0VOfvzITUnXn0Y-H3dEAePevlRrQcdUU6sDNo96xBaU-KFen0OgRQGu-CWgAueqNqBjW1/embed?start=false&loop=false&delayms=10000" webkitallowfullscreen="true" width="640"></iframe>
<br />
<br />
La charla taller fue dividida en varias partes, así que a continuación les comparto los videos.<br />
<br />
Maquetación para desarrolladores - parte 1<br />
<br />
<br />
<amp-youtube autoplay="" data-videoid="aTj-wxF-KxI" layout="responsive" width="560" height="315" ></amp-youtube>
<br />
Maquetación para desarrolladores - parte2<br />
<br />
<br />
<amp-youtube autoplay="" data-videoid="Knu1OGRqC54" layout="responsive" width="560" height="315" ></amp-youtube>
<br />
Maquetación para desarrolladores - parte 3 <br />
<br />
<br />
<br />
<amp-youtube autoplay="" data-videoid="dNUm_zlJ9fU" layout="responsive" width="560" height="315" ></amp-youtube>
<br />
Maquetación para desarrolladores - parte4<br />
<br />
<br />
<amp-youtube autoplay="" data-videoid="_K_aAc8nV08" layout="responsive" width="560" height="315" ></amp-youtube>
<br />
<br />
<br />
Lista de enlaces útiles<br />
<br />
<ul>
<li>Menti.com - <a href="https://www.menti.com/">https://www.menti.com/</a></li>
<li>Lorem pixel - <a href="http://lorempixel.com/">http://lorempixel.com/</a> - <a href="https://picsum.photos/">https://picsum.photos/</a> - <a href="https://placeholder.com/">https://placeholder.com/</a> - <a href="https://dummyimage.com/">https://dummyimage.com/</a></li>
<li>Bootstrap - <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> </li>
<li>Foundation - <a href="https://foundation.zurb.com/">https://foundation.zurb.com/</a></li>
<li>Ed-grid - <a href="http://ed-grid.com/">http://ed-grid.com/</a></li>
<li> Material Design - <a href="https://material.io/guidelines/" target="_blank">https://material.io/guidelines/ </a></li>
<li> Snipet de Material Design y bootstrap, llamado MDBootstrap - <a href="https://bootsnipp.com/snippets/Ek518">https://bootsnipp.com/snippets/Ek518</a> </li>
<li>Formularios online para Bootstrap - <a href="https://bootstrapformbuilder.com/">https://bootstrapformbuilder.com</a> - <a href="https://bootsnipp.com/forms">https://bootsnipp.com/forms</a> - <a href="http://protostrap.com/dashboard/designer/edit">http://protostrap.com/dashboard/designer/edit</a> </li>
<li>Snippets <a href="https://bootsnipp.com/tags/4.0.0">https://bootsnipp.com/tags/4.0.0</a> - <a href="https://bootsnipp.com/snippets/76778">https://bootsnipp.com/snippets/76778</a></li>
<li>Layout It - <a href="http://www.layoutit.com/es">http://www.layoutit.com/es</a></li>
<li>Pingendo - <a href="https://pingendo.com/">https://pingendo.com/</a> </li>
<li>El switch - <a href="http://editor.elswitch.co/">http://editor.elswitch.co/</a> </li>
<li>Mobirise - <a href="https://mobirise.com/es/">https://mobirise.com/es/</a></li>
</ul>
Espero que lo disfruten y compartan con sus amigos y desarrolladores.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comBogotá, Colombia4.7109885999999994 -74.0720924.204548599999999 -74.717539 5.2174286 -73.426645tag:blogger.com,1999:blog-21926857.post-53324303750246237702018-03-19T15:08:00.002-05:002018-05-03T13:57:58.824-05:00Etiqueta Contenido Dialog - Curso HTML5Hola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Recientemente me han pedido que muestre ejemplos con etiquetas que no sean tan conocidas, incluso ojalá experimentales y con algo de código de Javascript, por lo menos para que aquellos que inician con programación no se sientan muy perdidos.<br />
<br />
Así que llegó el momento de trabajar con la etiqueta <b>dialog</b>, esta es experimental y de paso es mejor usarla con apoyo de Js.<br />
<br />
<br />
<a name='more'></a><br />
<br />
Este tipo de etiquetas son etiquetas de contenido, contiene información casi siempre por confirmación de parte del usuario y no necesariamente forma parte del flujo de información pero vale la pena tenerla.<br />
<br />
Digamos que deseas mostrar un chat con un cliente, está dividido en varias partes y no quieres mostrarlo si no es necesario, pero si el usuario decide verlo, que lo podamos mostrar sin usar una ventana emergente o un modal o incluso un alert en javascript. Así que usas dialog.<br />
<br />
Como suele ser costumbre, los dejo con el video.<br />
<br />
<br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/gqsifrL9AXI" width="560"></iframe>
<br />
No olvides compartirlo, pues lo creo para ayudar a la gente que trabaja en este hermoso mundo de tecnología. <br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-20814764858734771852018-02-18T13:49:00.003-05:002018-05-03T13:58:06.947-05:00Figure y Figcaption - Curso HTML5Hola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Continuamos con los últimos capítulos que serán abiertos al público sobre el #CursoHTML5Video, en este caso hablaremos sobre la etiqueta <b>figure</b> y <b>figcaption </b>- comúnmente complementadas por la etiqueta img.<br />
<br />
Se trata de una labor semántica y aporta bastante al SEO, así que vale la pena entrar un poco en explicación, así que los dejo con el video.<br />
<br />
<br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/0zNHKIrTTfw" width="560"></iframe>
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-59502666397131606492018-02-07T11:46:00.001-05:002018-05-03T13:58:14.316-05:00Etiquetas contenido embed - Curso HTML5Hola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Hemos llegado a una de esas etiquetas que puede ser tan simple de usar como copiar y pegar o tan compleja como para ver decenas de ejemplos, está compuesta de "embed" "iframe" "object" y param - toda una colección para tu revisión XD.<br />
<br />
Es la base del intercambio de datos entre servicios como Youtube (como el caso en este blog), sonidos, presentaciones, etc así que vale la pena una revisión al tema.<br />
<br />
Los dejo con el video .<br />
<br />
<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/VaU3RT2uU7g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<br />
<br />
No olvides compartirlo.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-83341875038322845262018-02-01T12:37:00.001-05:002018-05-03T13:58:21.475-05:00Contenido insertado y eliminado - Curso HTML5Hola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Continuamos con nuestro curso #CursoHtml5Video, hoy estaremos revisando dos etiquetas simples, pero interesantes para mantener textos al día en una web, se trata de aquellos momentos donde insertas texto (posterior a su publicación y deseas que la gente lo sepa) y el contenido eliminado (ese que borras, pero no sólo deseas comunicar, también sirve para nuestro mejor amigo:el sarcasmo).<br />
<br />
Digamos que <br />
<ins>hay días en donde </ins>publicas que deseas editar <br />
<del>un texto </del>una entrada de blog.<br />
<br />
Es importante que sepas que la visualización dependerá directamente del css y la manera en que controlamos la interpretación del navegador.<br />
<br />
A continuación te dejo el ejemplo en video:<br />
<br />
<br />
<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/Q9EOBww4HCU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<br />
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-55781088355312413962018-01-24T11:42:00.001-05:002018-05-03T13:58:27.848-05:00Etiquetas dinámicas Meter y Progress - Curso HTML5Hola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Continuamos mostrando algunos videos de nuestro #CursoHTML5Video esta vez con un par de etiquetas interesantes por tener un componente dinámico, son Meter y Progress y están llenos de parámetros que vale la pena conocer.<br />
<br />
<br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/2PcndPopEE8" width="560"></iframe>
<br />
No es necesario escribir código siempre, pero definitivamente si manejas cosas básicas de Javascript, puedes tener mejores resultados.<br />
<br />
Por supuesto, no olvides compartir XD<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-61773459050520318212018-01-14T19:31:00.003-05:002018-05-03T13:58:34.572-05:00Etiqueta edición CODE - Curso HTML5Hola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Continuamos con una etiqueta muy útil para este tipo de webs como cacharreando, se trata de la etiqueta code, útil para marcar bloques de texto de esta manera.<br />
<br />
No olvides compartir.<br />
<br />
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/H79rqI4XAfI" width="560"></iframe>
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-67830696441979658742018-01-05T13:13:00.000-05:002018-05-03T13:58:42.466-05:00Etiqueta edicion main - Curso HTML5Hola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Hemos vuelto después de un receso merecido, retomaremos nuestro #CursoHTML5Video con una de las etiquetas semánticas de edición, es la etiqueta <b>main</b> o principal.<br />
<br />
Basicamente define la razón de ser de una página, esta puede cambiar entre páginas internas del mismo sitio y no deberían existir 2 en la misma página o depender de otra etiqueta inline.<br />
<br />
Vamos a revisar el video.<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/rT-FiDHs8ls" width="560"></iframe>
<br />
No olvides compartir o apoyar el canal, siempre sirve mucho. <br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-17000361227762878792017-12-13T15:36:00.000-05:002018-05-03T14:00:59.928-05:00 Curso HTML5 - etiqueta hr Hola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Otra etiqueta simple y sencilla que aunque algunos autores afirman que desaparecerá, sigue siendo usada por los generadores de contenido (incluyendo usuarios).<br />
<br />
Es básicamente la separación horizontal, una línea que nos ayuda a dividir, es de las pocas que no necesita etiqueta de cierre, así que veamos el video y conozcamos más acerca de esta etiqueta:<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/fiFD6lGbmPA" width="560"></iframe>
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-46067316664251890222017-12-11T19:24:00.005-05:002018-05-03T14:01:07.315-05:00Curso HTML5 - Cacharreando con etiqueta preHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
La etiqueta pre no tiene mayor peso semántico, pero se puede usar para aquellos textos donde no importa su valor semántico, más si su distribución física.<br />
<br />
Suele usarse en compañía de la etiqueta code en los sitios web donde se habla de código de programación y se usan editores.<br />
<br />
A continuación una mejor explicación en video:<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/GX3Rzw1ZL6A" width="560"></iframe>
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-66733615332506135322017-12-06T18:35:00.000-05:002018-05-03T14:01:46.141-05:00Curso HTML5 - Cacharreando con abbrHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Tenemos una etiqueta semántica llamada Abbr, que implica abreviaturas, anteriormente existía acrónimo, pero ahora está en desuso.<br />
<br />
Como puedes ver, es un momento de actualizarnos respecto a la semántica en HTML5 y hoy trabajaremos ese tema.<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/YAifMWM1e5U" width="560"></iframe>
<br />
<br />
No dudes en compartir el video y el contenido.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-62651090024493115032017-12-04T18:44:00.002-05:002018-05-03T14:01:52.966-05:00Curso HTML5 - Cacharreando con listasHola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Estuvimos ocupados preparando esta serie completa de videos referente al tema de listas en HTML5, por ello, aunque nos demoramos hoy liberamos varios videos y entre ellos un par de ejercicios solicitados por los estudiantes.<br />
<br />
¿Qué esperas? - vamos a ello.<br />
<br />
<br />
<a name='more'></a><br /><br />
<br />
Las listas son tipos de datos que se usan con muchísima más frecuencia de la que somos conscientes, tenemos listas ordenadas, aquellas que usas cuando das un paso a paso, por ejemplo:<br />
<br />
<ol>
<li>Mira nuestros tutoriales</li>
<li>Comparte los que te gusten</li>
<li>Suscríbete</li>
</ol>
<br />
Mira el siguiente videotutorial al respecto sobre listas ordenadas:<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/29RMqZu2Cq4" width="560"></iframe>
<br />
<br />
Aparentemente podrían ser ejecutadas en cualquier orden, pero digamos que en un escenario de tipo concurso, estos serían los pasos a seguir, en ese orden, por ende, se exige que aparezcan literales, estos pueden ser de tipo número como el anterior, de tipo letras (mayúsculas o minúsculas) o incluso literales romanos.<br />
<br />
<br />
Pero también tenemos las listas no ordenadas - no confundir con "desordenadas", simplemente son usadas para listar elementos, si seguimos con el ejemplo anterior:<br />
<br />
<ul>
<li>Mira nuestros tutoriales</li>
<li>Comparte los que te gusten</li>
<li>Suscríbete</li>
</ul>
Miremos el siguiente video sobre listas no numeradas:<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/4PjlI6vjKMU" width="560"></iframe>
<br />
El asunto se pone más interesante cuando creamos textos que hacen uso de ambos tipos o de listas anidadadas - es decir, unas dentro de otras - ya que en este punto el orden es importante para la creación correctamente semántica.<br />
<br />
Veamos el primer ejercicio de este tipo:<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/6e-YzXJ4KoE" width="560"></iframe>
<br />
<br />
Y si deseamos mejorar nuestras habilidades, les propongo otro ejercicio sobre listas anidadas, veánlo inicialmente, trátenlo de solucionar y posteriormente vean el video y comparen su código, evidentemente deberíamos poder llegar al mismo resultado:<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/jyNrZo8QqVA" width="560"></iframe>
<br />
<br />
Pero como dicen, no todo es blanco y negro y nos queda aún conocer otro tipo de listas, esta vez de tipo definición, usadas por ejemplo cuando tenemos una lista de términos y su obvia definición o incluso cuando tenemos párrafos de tipo <b><i>pregunta, respuesta</i></b>.<br />
<br />
Es importante ver que podemos tener varios términos, una sóla definición o varias definiciones y un sólo término a definir, se usan de la siguiente manera:<br />
<br />
<br />
<iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/zlA47hrrYyg" width="560"></iframe>
<br />
<br />
Como pueden ver, el concepto de listas es bastante útil y muy usado en la web, en tutoriales, en textos del común, etc. Lo importante es asegurar un significado semántico correcto y ello ayudará bastante al SEO.<br />
<br />
Siento mucho la extensión del post, pero valía la pena verlos por separado con un par de ejemplos, por ello me demoré en publicar, pero espero que se lo disfruten.<br />
<br />
Como siempre, si te parece interesante o que le podría ayudar a otra persona, no dudes en compartir este post o los videos.<br />
<br />
<br />
Saludotes.<br />
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-18258195045000372302017-11-20T15:22:00.001-05:002018-05-03T14:02:15.976-05:00Curso HTML5 - Cacharreando con los párrafos Hola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Continuamos con nuestro #CursoVideoHTML5 - hoy con los párrafos, revisaremos algunos parámetros simples ideales para SEO.<br />
<br />
Como siempre, no olvides que puedes compartir este video o el resto del curso.<br />
<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/efBraMxdDTo" width="560"></iframe>
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-84087117724674232452017-11-17T15:53:00.000-05:002018-05-03T14:02:23.313-05:00Curso HTML5 - Explorando Meta etiquetasHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Retomamos nuestro #CursoVideoHTML5 - hoy exploraremos las meta etiquetas, aclarando conceptos y dando ejemplos de uso.<br />
<br />
Estas son etiquetas que según tu perfil, aprovecharás o tal vez ni tengas en cuenta, hoy podemos verlas y analizarlas, pues para el SEO son claves, para analíticas, para el mismo SEM, etc.<br />
<br />
Sin más dilación, no olvides compartir el artíulo o el video a quien tal vez lo requiera.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/zbZ1GW6Zv8E" width="560"></iframe>
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-35058914524914677112017-10-31T10:47:00.000-05:002018-05-03T14:02:58.405-05:00Curso HTML5 - cacharreando con el brHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Continuamos con nuestro #CursoVideoHTML5 - hoy analizamos el uso de una de las etiquetas más incomprendidas, el salto de línea o breakline - usando la etiqueta br.<br />
<br />
Es una etiqueta sin cierre, aunque se recomienda mantener la barra final de cierre, por otro lado su correcto uso suele verse como "profesional".<br />
<br />
Algunos CMS (Joomla, Drupal, Blogger, Wix, etc.) permiten insertar BR cada vez que el usuario introduce un "Enter", pero no necesariamente es semánticamente correcto.<br />
<br />
Sugiero ver nuestro análisis simple, cacharreando con br y algunos ejemplos donde recomendamos su uso.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/kFqkMvaOZAU" width="560"></iframe>
<br />
<br />
No olvides compartir esta serie de videos.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-78886302351954096272017-10-25T12:06:00.000-05:002018-05-03T14:03:05.800-05:00Curso HTML5 - cacharreando con el spanHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Ya estuvimos trabajando con el div, aquella etiqueta que podemos utilizar para dividir bloques o secciones de contenido, enfocada sobre todo a objetos de tipo bloque.<br />
<br />
Pues bien, ahora revisaremos la etiqueta alterna al div, pero enfocada al tipo inline, es decir, al texto como tal, es el span.<br />
<br />
Tengamos en cuenta que span no debe ser usado para reemplazar etiquetas que son semànticas, que tienen implìcito un significado, al igual que con el div, cuando los demàs no cumplen con el requerimiento, podemos usar span.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/XUdxPW_Etk8" width="560"></iframe>
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-88238428632229810012017-10-23T19:27:00.001-05:002018-05-03T13:59:43.139-05:00Curso HTML5 - cacharreando con el divHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Tiempo de usar el famoso DIV - o la etiqueta con mayores atributos no reales y mal otorgados en la web XD.<br />
<br />
El cambio de la web semántica logró darle un usuario más específico a la famosa división, debemos entender entonces el uso correcto y por ello cacharrearemos un poco con esa etiqueta sin dejar de nombrar las complementarias de tipo semántico como footer, header, etc.<br />
<br />
No olvides compartir<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/k5eYfw0bYj0" width="560"></iframe>
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-61478486977956817062017-10-19T17:06:00.001-05:002018-05-03T13:59:51.050-05:00Curso HTML5 - cacharreando el doctypeHola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Hoy trabajaremos más a fondo el doctype, esta etiqueta que nos permite definir las reglas de juego ante el navegador.<br />
<br />
Si bien es cierto que trabajamos sobre HTML5 - existen más, algunos de ellos te los recomiendo en el video a continuación.<br />
<br />
Recuerda que este curso tiene dos series, una llamada explorando y otra cacharreando, este es el momento de cacharrear con el doctype.<br />
<br />
<br />
<br />
<br />
<br />
Ten en cuenta que puedes también usar validadores como el oficial para el W3 org - <a href="https://validator.w3.org/">https://validator.w3.org/</a><br />
<br />
Finalmente si deseas usar estructuras o ver cómo crear nuevas, puedes visitar schemas<br />
<br />
<a href="http://schema.org/docs/schemas.html">http://schema.org/docs/schemas.html</a><br />
<br />
Como siempre, pues comparte, así nos ayudas y ayudas a otros.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-46349191530468947182017-10-17T14:52:00.001-05:002018-05-03T13:59:59.350-05:00Curso HTML5 - El elemento raiz y el doctypeHola comunidad!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Hoy continuamos con nuestro #CursoHTML5 en video, para esta sesión estaremos trabajando el elemento raiz HTML, de paso estaremos definiendo el uso del doctype, hablando también de la famosa codificación, elemento importante si deseamos posicionar y mostrar correctamente un sitio web.<br />
<br />
También comenzamos a tener en cuenta varios consejos a tener en cuenta con respecto al manejo simple de etiquetas, si seguimos estos consejos nos preparamos para ser más semánticos y de paso usar estándares.<br />
<br />
Veamos el video a continuación y exploramos los conceptos básicos:<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/HV5liXx-WwA" width="560"></iframe>
<br />
<br />
Como siempre, si conoces de alguien a quién le interesará el curso, comparte este link, así entre varios, aprendemos más.<br />
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comVereda Vuelta Grande a 150 m de la Glorieta de Siberia / Vía Cota - Chía, Cota, Cundinamarca, Colombia4.761245 -74.153547-20.7607895 -115.462141 30.2832795 -32.844953000000004tag:blogger.com,1999:blog-21926857.post-32043733500978322082017-10-13T12:20:00.000-05:002018-05-03T14:00:05.970-05:00Curso HTML5 - La categorización de las etiquetas htmlHola comunidad!<br />
<div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
<br />
Pido disculpas, pues recientemente no pude publicar como venía siendo costumbre, basicamente se presentaron temas un poco tristes y a la vida hay que atenderla.<br />
<br />
En el siguiente video de nuestro curso de HTML5 daremos respuesta a aquella típica pregunta que nos puede asaltar cuando vemos que existen cientos de etiquetas por aprender a manejar en un lenguaje de marcado como este - ¿<b>Cómo organizar todo esto para ir aprendiéndolo</b>?<br />
<br />
<a name='more'></a><br />
<br />
<br />
También debemos recordar que comprender la semántica y organización de esta tecnología ayudará a posicionar de manera profesional nuestros contenidos, también generaríamos código estándar y nos daría una visión más profesional del tema.<br />
<br />
Pues bien, hoy les cuento cómo se categoriza por referencia el HTML5.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/q3aZV41X5OM" width="560"></iframe>
<br />
Este tipo de categorización ayuda a organizar nuestro avance con estas tecnologías, si bien es cierto que este video es un poco más conceptual, siempre es importante entender el origen para comprender posteriormente nuestro destino - vaya frase XD.<br />
<br />
Por supuesto, también es importante recomendarles nuestra <a href="https://madebymike.com.au/demos/html5-periodic-table/" target="_blank">tabla periódica de elementos HTML5 - Disponible gracias a su autor: Mike Riethmuller's y disponible en su web</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://madebymike.com.au/demos/html5-periodic-table/" target="_blank"><img border="0" data-original-height="352" data-original-width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMT1PlD_GjUY6oPeaY-OD1b8BaBKtzgHCgUvcWddCXPBTITjtnfsraHL8Pm5ox11GUly5ULodrirBe-Nd2yDpookDQ7yvIx_bF_0rsAm98q-77ECPN-blH7FGk-8SDapwJEzh6g/s1600/tablaperiodicahtml5.jpg" /></a></div>
<br />
<br />
Como siempre, los comentarios son bienvenidos, compartan estos videos con personas a las que posiblemente les interese.<br />
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-83954176156201233612017-10-04T23:24:00.001-05:002018-05-03T14:00:16.772-05:00Curso HTML5 - Etiqueta html y el manifestoHola comunidad!<br />
<br /><div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Ha llegado el momento de nuevo video, en esta oportunidad trabajaremos el tema: <b>Etiqueta html</b> - de la mano de la serie <b>cacharreando </b>- y con una breve introducción al <b>manifesto</b>.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/aqYZS_9r1D4?rel=0" width="560"></iframe>
<br />
No olvides suscribirte, así te enteras de nuevos videos, también comparte a tus amigos, es posible que estén buscando aprender, refrescar o actualizarse sobre este tema.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-85211861919883869762017-10-01T20:17:00.001-05:002018-05-03T14:00:26.643-05:00Nuevo Curso de HTML5 en VideoHola comunidad!<br />
<br /><div class="separator" style="clear: both; text-align: center;">
<noscript><img alt="HTML5 en acción" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9SEas8SWqSXPSbdZ0JDzEHL8sg9Utf6wpZpScECU4ITDkvwJjuGxh-mzvrcg1oyUxUc4fZs_pA_FOnEAw3Oq-3juOV8XmzBd2E7hC6JaPdfQK8HoINOB8T5yggbVnMiPRxft6g/s1600/badgehtml5.png" width="300" height="280" /></noscript></div>
Hace rato no "nos webmos", esta debe ser entonces la disculpa perfecta para ponernos al día, ya que estamos lanzando el curso de HTML5 en video.<br />
<br />
¿No estás enterado? - mira el resto del post :-)<br />
<br />
<br />
<a name='more'></a><br />
<br />
Hace un par de semanas, invitamos a nuestros suscriptores y amigos por redes sociales y como prometimos, a partir de hoy 1 de octubre de 2017 lanzaremos un video en promedio, cada 3 días respecto a HTML5.<br />
<br />
Si no has visto el video, puedes verlo a continuación:<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/6k2O00A7DdM?rel=0" width="560"></iframe>
<br />
<br />
<h3>
Inicio del curso - Explorando y cacharreando</h3>
Estaremos con dos "versiones" la serie explorando que está recomendada para las personas que desean conocer el tema, pero que aún no se animan a "meterse en las tripas", desean conocer lo suficiente bien porque no son del área Técnica y Tecnológica (Diseñadores gráficos, Comunicadores sociales, etc.) o simplemente por cultura general.<br />
<br />
Para aquellos que desean ir más a fondo, los videos de la serie cacharreando son más específicos y se centrarán comúnmente en un sólo tema, es posible que sean más cortos, pero definitivamente buscarán sacarle "el jugo y provecho al tema".<br />
<br />
<h3>
Exploremos entonces el curso de HTML5</h3>
Iniciamos entonces explorando a nivel general, ¿qué veremos en este y otros videos?<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/M61Z7W9TRMQ?rel=0" width="560"></iframe>
<br />
<br />
<ul>
<li>Qué software requerimos</li>
<li>Qué deberíamos ir definiendo para un proyecto</li>
<li>Manejo de arhcivos y carpetas</li>
<li>Cómo se divide el HTML5</li>
<li>Contenidos semánticos</li>
<li>Frameworks usados</li>
<li>Publicar proyectos</li>
<li>Conceptos básicos de servidores</li>
</ul>
<br />
Si te interesa tener acceso a la presentación, la podés encontrar aquí :<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="485" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/key/xh5AKU5Y6ylgPB" style="border-width: 1px; border: 1px solid #ccc; margin-bottom: 5px; max-width: 100%;" width="595"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://www.slideshare.net/morpheus_co/explorando-html5-inicio" target="_blank" title="Explorando html5 - Inicio">Explorando html5 - Inicio</a> </strong> de <strong><a href="https://www.slideshare.net/morpheus_co" target="_blank">Edison Monsalve</a></strong> </div>
<br />
<br />
Sin más, bienvenidos, espero que se lo disfruten, suscríbanse al canal de Youtube y activen las notificaciones para que el sistema te avise cada vez que haya un video nuevo.<br />
<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.comtag:blogger.com,1999:blog-21926857.post-60155132462357280342016-11-15T16:27:00.002-05:002016-11-15T16:27:52.014-05:00Cupones de descuento para cursos web en UdemyHola comunidad!<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlieDK2QygkqpTPX6hANAIhEVZ-v8RZZR9uh-o-ME8Twqb6RdMdanzyMyasBHrbdAoX5LcxHKlXjbOd9OVqYhRBOyphjP7xo-GKptfKOF80fIxMtGwzRObw3F_4mtbKlNut1SB2g/s1600/udemy_logo.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlieDK2QygkqpTPX6hANAIhEVZ-v8RZZR9uh-o-ME8Twqb6RdMdanzyMyasBHrbdAoX5LcxHKlXjbOd9OVqYhRBOyphjP7xo-GKptfKOF80fIxMtGwzRObw3F_4mtbKlNut1SB2g/s1600/udemy_logo.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Logo Udemy</td></tr>
</tbody></table>
Como algunos de ustedes saben, soy profesor, pero también soy estudiante todo el tiempo, leo bastante, compro algunos libros y por supuesto hago cursos disponibles por la web, dentro de esta última opción también "consumo" cursos gratuitos y pagos.<br />
<br />
He estado viendo algunos cursos de <a href="http://www.udemy.com/" target="_blank">Udemy</a>, plataforma que me gusta bastante y al estar inscrito en algunos de estos cursos me llegan cupones que a veces puedo aprovechar y en otras ocasiones simplemente los dejo pasar por no ser de mi interés o simplemente por olvido.<br />
<br />
Ahora mismo uno de los profesores me ha entregado algunos bonos de descuento que posiblemente le sirva a algunos de los visitantes del blog, amigos tuyos o estudidantes. ¿Quieres saber más? -> adelante.<br />
<a name='more'></a><br />
<h3>
¿Qué hay que tener en cuenta?</h3>
<ul>
<li>Udemy es una plataforma donde te puedes registrar sin costo, también encontrarás cursos gratuitos y otros pagos.</li>
<li>A un curso puedes acceder (después de la confirmación de ingreso, ya sea gratuito o nó) por medio de computador personal, tablet, móvil, etc. Sin embargo, debes tener en cuenta el siguiente detalle : Los precios no son los mismos si los revisas por pc o por móvil - ignoro la razón de fondo, pero es así.Comúnmente verás que sacarán cursos en promoción, sea cual sea el caso, no encontrarás cursos pagos menores de US $10, pero verás descuentos de todo tipo y en otros simplemente pago completo.</li>
<li>Te sugiero si quieres aprovechar las promociones automáticas, revisarlo desde móvil, <b>pero si deseas aplicar un cupón, debe ser por medio de pc</b>. Ya que en móviles no permite el ingreso de cupones, créeme, me ha pasado.</li>
<li>El acceso que compras al curso es de por vida, podés comprar ahora y ver tu curso en unos meses, sin embargo y ojo a este punto: Tienes un mes después de la compra para solicitar el reembolso de tu dinero si no estás satisfecho, es verdad y es así, por ejemplo; digamos que compras un curso que tiene muy buena pinta, pero encuentras que el profesor no es lo suficientemente claro para tu gusto, puedes solicitar la devolución de tu dinero, diligencias un formulario y listo. Pero esto implica que debes hacer esto hasta el día 30 después de la compra de tu curso o <b>dicho de otra manera, compras hoy y máximo tienes 30 días para solicitar este proceso</b>.</li>
<li>Certificado ? si, si completas un gran porcentaje del curso lo puedes obtener, aunque entendamos que aunque te certifique haber completado, no certifica competencias para el trabajo o competencias académicas, si a tu empleador le sirve, entonces probablemente sacarás tu certificado gratis y tal vez hasta lo publicas en tus perfiles sociales.</li>
<li>No compras sólo una colección de videos, aunque depende del profesor tendrás también documentos, archivos, etc y lo más importante, una atención a tus dudas mediante los sistemas de foros generales o preguntas específicas a una lección.</li>
<li>No olvides que puedes descargar las lecciones para consumirlas fuera de línea, a veces descargo algunos videos en casa y los veo sin "comerme mi plan de datos".</li>
</ul>
<br />
<h3>
Ok - al fin qué ? nos das los cupones o nó?</h3>
Si señor, no empuje... Los cupones que tengo son de profesores que conozco y a los cuales les he visto su material, por eso los recomiendo, dicho lo anterior, también, si no estás de acuerdo después con tu compra podés solicitar reembolso.<br />
<br />
Los siguientes son los cursos a los cuales tengo acceso por cupón, debes hacer clic en los enlaces - que conlleva también los cupones y realizar el proceso de compra desde pc - ya te conté por qué, además recuerda, si lo haces desde móviles, pues no podrás ingresar el bono de descuento, ahh y ten en cuenta que no tengo cupones "for ever and ever", ya que sólo me dieron una cantidad limitada, así que espero que logres tu descuento.<br />
<br />
<br />
<hr />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uq4u8vhq__Hf0_mso5bklcaBV7IhRtQV06n8K5q-gImqw4lpTiIXNjtOmCp2wuXpACR1outjBGq2EYprLK_IPdvjXvB4_dqL6ZyQM4Fe5DsJdtWbEJSQD0Q4HXt_DNo0I_7LBw/s1600/cursos_cupon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uq4u8vhq__Hf0_mso5bklcaBV7IhRtQV06n8K5q-gImqw4lpTiIXNjtOmCp2wuXpACR1outjBGq2EYprLK_IPdvjXvB4_dqL6ZyQM4Fe5DsJdtWbEJSQD0Q4HXt_DNo0I_7LBw/s1600/cursos_cupon.jpg" /></a></div>
<br />
<br />
<b>CURSO DE MAQUETACIÓN WEB:</b></div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/convierte-disenos-hechos-en-photoshop-a-html5-y-css3/?couponCode=EMONSALVE" target="_blank">Convierte diseños hechos en Photoshop a HTML5 y CSS3</a></li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<b>CURSO DE ANIMACIONES Y EFECTOS INTERACTIVOS CON CSS3:</b></div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/aprende-a-crear-animaciones-y-efectos-interactivos-con-css3/?couponCode=EMONSALVE" target="_blank">Aprende a crear animaciones y efectos interactivos con CSS3</a></li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<b>CURSO DE BOOTSTRAP</b></div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/crea-paginas-web-responsive-con-bootstrap/?couponCode=EMONSALVE" target="_blank">Crea páginas web responsive con Bootstrap</a></li>
</ul>
</div>
<div>
<br /></div>
<div>
<b>CURSO DE JAVASCRIPT:</b></div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/aprende-a-programar-con-javascript-desde-cero/?couponCode=EMONSALVE" target="_blank">Aprende a programar con Javascript desde cero</a></li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<b>CURSO DE JQUERY:</b></div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/aprende-jquery-desde-cero/?couponCode=EMONSALVE" target="_blank">Aprende jQuery, jQuery Mobile y jQuery UI desde cero</a></li>
</ul>
</div>
<div>
<div>
<b><br /></b></div>
<div>
<b>CURSO DE PHP</b>:</div>
</div>
<div>
<ul>
<li>Nombre del Curso: <a href="https://www.udemy.com/crea-aplicaciones-php-seguras-con-sql-y-ajax-desde-cero/?couponCode=EMONSALVE" target="_blank">Crea aplicaciones PHP seguras con POO-MVC, PDO-SQL y AJAX</a></li>
</ul>
<br />
<ul>
</ul>
</div>
<hr />
En cualquier caso si no se te cargara el cupón, es sencillo es <b>EMONSALVE</b>. En todo caso si haces clic desde el hipervínculo, el sistema debería llevarte inmediantamente con el cupón - En términos generales es posible que te de un buen precio, alrededor de Us$ 15 cada curso.<br />
<br />
Por si las dudas, el profesor es uno de los líderes de "<b>Tutoriales a tu alcance</b>". Que es a quien estoy recomendando en esta ocasión, es paisa y me apetece apoyar el talento Colombiano.<br />
<br />
Por supuesto, si pescas cursos gratis, "pa´ dentro", si conoces otras plataformas y con cursos parecidos, compártelos, porque el primer objetivo de este blog es compartir. En todo caso siempre debes ver el contenido del curso, el video de inicio y ahí te vas dando cuenta de la idea principal.<br />
<br />
<h3>
Y usted porqué no? </h3>
Finalmente, doy respuesta formal a varios de mis estudiantes que me preguntaron, porqué no mis cursos en Youtube o porqué no tengo cursos en plataformas como estas.<br />
La respuesta no es tan simple, basicamente es tiempo y obligaciones del día a día, de hecho, uso Youtube y los blogs para compartir conocimiento, pero comúnmente no tengo mucho tiempo para ello, sin embargo y gracias a invitación por Udemy y otros amigos, creo que este fin de año me dedicaré a probar esta plataforma y sacaré un par de cursos, vamos a ver cómo nos va y por supuesto, los usuarios de este blog, mis redes sociales y estudiantes tendrán descuentos - Es una promesa!<br />
<br />
Esperemos a ver cómo salimos del fin de año, esperaría que con el favor del creador esto sea posible, tal vez nos "webmos" por Udemy el otro año.<br />
<br />
Saludos para todos.<br />
<br />
-
Nos webmos.<div class="blogger-post-footer"><p>==============================================================</p>
<p> © <a href="http://morpheus-co.blogspot.com//"> Cacharreando ... </a> - Gracias por leernos a través de Rss - </p>
<p> Para más información contacta con edison.monsalve@gmail.com</p>
<p>==============================================================</p></div>Edison Monsalvehttp://www.blogger.com/profile/12505595650945803751noreply@blogger.com