Mozilla El SalvadorJekyll2017-08-13T00:07:31+00:00http://mozillaSv.github.io/Mozilla El Salvadorhttp://mozillaSv.github.io/mozillaelsalvador@gmail.comhttp://mozillaSv.github.io/blog/moz-activate-2017-ii-encuentro-mozilla-centroamerica2017-08-12T22:40:10+00:002017-08-12T22:40:10+00:00Karla Hernándezhttp://mozillaSv.github.io
<p>Para el domingo 23 de Julio, amanecimos en el <a href="https://www.facebook.com/hostelcasayoses">Hostel Casa Yoses</a> por ultima vez ya finalizado el Encuentro Centroamericano de Software Libre 2017. Nos encontrábamos desde temprano, algunos con las maletas ya listas y otros terminando de alistar, comenzamos a despedirnos de las buenas amistades que realizamos en los días anteriores junto a ellos también nos despedimos de los nuevos mozillians guatemaltecos <em>Yeffri Salazar</em> y <em>Andres Alonzo</em>, además de <a href="https://mozillians.org/es/u/mpineda18/">Martin Pineda</a> de Mozilla Honduras y <a href="https://mozillians.org/es/u/EduardoValencia/">Eduardo Valencia</a> de Mozilla El Salvador quienes por trabajo ya no podrían seguir acompañándonos para el resto de nuestra aventura por Costa Rica. Lo cual nos dejo a <a href="https://mozillians.org/es/u/carloscarcamo/">Carlos Carcamo</a> y a mi como los mozillians salvadoreños junto al resto del de compañeros desde Mozilla Nicaragua con <a href="https://mozillians.org/es/u/cheerleader/">Ana Sofía</a> e <a href="https://mozillians.org/es/u/zunibux/">Ibel Zuniga</a> y de Mozilla Panamá a <a href="https://mozillians.org/es/u/alexanderarmuelles/">Richard Armuelles</a> y <a href="https://mozillians.org/es/u/ronyyC2/">Rony de León</a>. Todos ya estábamos a la espera del transporte de la <strong>Universidad de Costa Rica - Sede del Pacífico, Esparza</strong> quienes fueran nuestros aliados principales para la celebración del <strong>II Encuentro Mozilla Centroamérica</strong> donde de forma unánime se acordó llevaríamos acabo todo el despliegue del proyecto <strong>Moz Activate 2017</strong>. Desde antes de nuestra llegada a Costa Rica ya se había realizado un despliegue asombroso para nuestra llegada esto gracias al apoyo y sincero interés por parte de <em>Wendy Vargas</em> y <em>Aaron Galargaza</em> ambos parte de la <em>UCR Sede del Pacífico, Esparza</em> a quienes expresamos nuestro mas profundo agradecimiento por todas las atenciones y cuidados que tuvieron con nosotros. Durante el resto de nuestra estancia en Puntarenas nos alojamos en el <a href="https://www.facebook.com/hotelrocadelmar/">Hotel Roca del Mar</a> donde quienes nos atendieron fueron muy amables y atentos con nosotros ademas de que amanecer y anocher con una piscina al frente y el mar por detrás es bastante genial.</p>
<figure>
<a href="https://farm5.staticflickr.com/4296/36213877296_625edc4a69_b.jpg">
<img src="https://farm5.staticflickr.com/4296/36213877296_625edc4a69_b.jpg" alt="image" />
</a>
<figcaption>
Acto de apertura, MozActivate Day
</figcaption>
</figure>
<p>Para cuando celebramos el Moz Activate 2017 comenzamos con el acto de apertura con unas crónica muy interesante por parte del director de la sede del pacífico, para luego dar paso la bienvenida por parte de Wendy Vargas y Ana Sofía. Así, es como dimos inicio a las actividades y cumplimos con una agenda con varias actividades en simultaneo de múltiples charlas y talleres muy interesantes impartidas por mozillians y por estudiantes de la UCR. Como Mozilla El Salvador tuvimos la participación de <a href="https://mozillians.org/es/u/carloscarcamo/">Carlos Carcamo</a> con el taller de “Dive into Rust” de ahí estuvimos apoyando otras actividades anexas como el cuido del stand de Mozilla y la toma de fotografiás. Entre el apoyo secundario a otras charlas y talleres, finalizamos el evento junto a los estudiantes de la UCR. Desde “Mozilla y tú”, “Mozilla Add-ons”, “HTML y videjuegos”, “Web VR”, “Mozilla test pilot”, “Diversidad e inclusion - Womoz”, “web extensions”, “Introducción a Arduino”, “IONIC” y esas son las que me recuerdo porque hubieron muchas otras charlas y talleres. Y bueno el final del día llego y hubo una afluencia muy fuerte de estudiantes a pesar de que era época de vacaciones y pues dimos paso al evento de cierre al Moz Activate 2017 donde realizamos una pequeña rifa con entre los estudiantes que habían asistido a lo largo del día y que se habían inscritos en el formulario de asistencias, se brindaron unas palabras de agradecimiento y entrega de diplomas por parte de Aaron Galargaza, finalizamos entregando las palabras de agradecimiento por parte de <a href="https://mozillians.org/es/u/ronyyC2/">Rony de León</a>.</p>
<figure>
<a href="https://farm5.staticflickr.com/4319/35861283230_0112d163cf_b.jpg">
<img src="https://farm5.staticflickr.com/4319/35861283230_0112d163cf_b.jpg" alt="image" />
</a>
<figcaption>
Introducción a Rust
</figcaption>
</figure>
<figure>
<a href="https://farm5.staticflickr.com/4297/36213879926_38f55931e3_b.jpg">
<img src="https://farm5.staticflickr.com/4297/36213879926_38f55931e3_b.jpg" alt="image" />
</a>
<figcaption>
Introducción al Open Hardware, Karla Hernández
</figcaption>
</figure>
<figure>
<a href="https://farm5.staticflickr.com/4320/36087824552_eed56ee22d_b.jpg">
<img src="https://farm5.staticflickr.com/4320/36087824552_eed56ee22d_b.jpg" alt="image" />
</a>
<figcaption>
Introducción a Web Extensions
</figcaption>
</figure>
<p>De ahí al siguiente día, pues ya nos dirigimos al aeropuerto de San José, luego de varias fotografías (las cuales puedes ver en: <a href="https://goo.gl/kMjryb">https://goo.gl/kMjryb</a>) nos despedimos de los demás compañeros y compañeras del resto de Mozilla Centroamérica y de Aaron Galargaza que nos escolto. Y pues ahora, quedamos para vernos hasta un próximo III Encuentro Centroamericano Mozilla pero de aquí en adelante a seguir trabajando juntos a la distancia como la familia Mozillians que somos.</p>
<figure>
<a href="https://farm5.staticflickr.com/4440/36392423111_f237cc4606_b.jpg">
<img src="https://farm5.staticflickr.com/4440/36392423111_f237cc4606_b.jpg" alt="image" />
</a>
<figcaption>
Mozilla Centroamérica junto con catedráticos y alumnos de la UCR sede del Pacifíco
</figcaption>
</figure>
<p><a href="http://mozillaSv.github.io/blog/moz-activate-2017-ii-encuentro-mozilla-centroamerica/">Moz Activate 2017 - II Encuentro Mozilla Centroamérica</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 12, 2017.</p>
http://mozillaSv.github.io/blog/ix-encuentro-centroamericano-de-software-libre2017-08-06T18:53:03+00:002017-08-06T18:53:03+00:00Karla Hernándezhttp://mozillaSv.github.io
<p>La fundación Mozilla brindó este 2017 unas becas para algunos miembros mozillians centroamericano quienes se ofrecieron a colaborar con algunas charlas y talleres, todo esto acompaño al proceso de re estructuración que esta viviendo Mozilla en sus diferente áreas de desarrollo. Es así como para un miércoles 19 de Julio el último vuelo de los tres participantes mozillians salvadoreños estaba siendo aprobado, junto a esto <a href="https://mozillians.org/es/u/Feldt/">Alcides Rodríguez</a> avisaba que no podría participar y cediendo así su puesto a <a href="https://mozillians.org/es/u/carloscarcamo/">Carlos Carcamo</a> quien se uniera a <a href="https://mozillians.org/es/u/EduardoValencia/">Eduardo Valencia</a> y mi persona <a href="https://mozillians.org/es/u/karlalhdz/">Karla Hernández</a> todos miembros oficiales de Mozillians quienes para un jueves 20 salieron rumbo a Costa Rica y posteriormente se reunieron con el resto de compas centroamericanos. De Mozilla Nicaragua se tuvo la participación de <a href="https://mozillians.org/es/u/cheerleader/">Ana Sofía</a> e <a href="https://mozillians.org/es/u/zunibux/">Ibel Zuniga</a> y de Mozilla Panamá a <a href="https://mozillians.org/es/u/alexanderarmuelles/">Richard Armuelles</a> y <a href="https://mozillians.org/es/u/ronyyC2/">Rony de León</a> todos becados por la fundación Mozilla para participar en el <a href="https://ecsl2017.softwarelibre.ca/">Encuentro Centroamericano de Software Libre 2017</a> o ECSL17 para acortar. Al llegar a San José Costa Rica, nos trasladamos hacia donde estaríamos alojados los primeros días del ECSL17 esto en el <a href="https://www.facebook.com/hostelcasayoses">Hostel Casa Yoses</a>, ahí nos encontramos sorpresivamente a <a href="https://mozillians.org/es/u/mpineda18/">Martín Pineda</a> de Mozilla Honduras quien con fondos propios habia costado su llegada y pues nos saludamos y admiramos lo muy bonito que fuera Casa Yoses con múltiples murales artísticos que aseguran un ambiente relajado y de disfrute de cultura ya que también poseen señal wifi bastante estable en el primer piso y estanterías con libros de interés cultural muy variado, una excelente selección de estadía para un grupo de personas tan particulares como lo son los participantes de un ECSL, ademas no podemos quejarnos de la buena recepción del staff de Casa Yoses.</p>
<figure>
<a href="http://res.cloudinary.com/dgckuyt9g/image/upload/v1502054520/35413892784_c05d0fb867_k_zbafyg.jpg">
<img src="http://res.cloudinary.com/dgckuyt9g/image/upload/v1502054520/35413892784_c05d0fb867_k_zbafyg.jpg" alt="image" />
</a>
<figcaption>
Foto grupal, IX ECSL Costa Rica 2017
</figcaption>
</figure>
<p>Para la primera mañana del ECSL, un viernes 21, caminamos hacia la <a href="https://www.ucr.ac.cr/">Universidad de Costa Rica</a> donde celebramos la apertura de un nuevo ECSL. La maratonica de talleres, charlas y mesas de trabajo con los diferente participantes que voluntariamente brindaron su tiempo para hacer del ECSL17 una experiencia única y amena. No podríamos esperar menos ante la convocatoria de tantos miembros de diferentes comunidades e instituciones tan variadas pero conectados por el uso, estudio, desarrollo y distribución del uso de software libre y de la lucha constante por el respeto ante las libertades del usuario.</p>
<figure>
<a href="https://farm5.staticflickr.com/4311/35438718213_e8439e6a5d_b.jpg">
<img src="https://farm5.staticflickr.com/4311/35438718213_e8439e6a5d_b.jpg" alt="image" />
</a>
<figcaption>
Stand Mozilla, IX ECSL Costa Rica 2017
</figcaption>
</figure>
<p>Como Mozilla Centroamérica hubierón participaciones íntimamente relacionadas con Mozilla y otras no tan directas que quedaron plasmadas en la <a href="https://ecsl2017.softwarelibre.ca/registro/agenda?dia=1">agenda</a> del evento pero que también fueron brindados por nuestros miembros, entre las directamente relacionadas con Mozilla podemos mencionar la participación de <a href="https://mozillians.org/es/u/EduardoValencia/">Eduardo Valencia</a> impartiendo en la CATTECU 1 la charla <a href="https://ecsl2017.softwarelibre.ca/registro/charla/40">«Rust y el futuro de la programación de sistemas»</a> seguido de <a href="https://mozillians.org/es/u/carloscarcamo/">Carlos Carcamo</a> con <a href="https://ecsl2017.softwarelibre.ca/registro/charla/39">«Introducción a Rust»</a> en la misma aula, mientras tanto por mi parte me mantenía saltando de salón en salón tomando fotografía de las diferentes participaciones mozillians esto junto a Rony de León de Mozpa, además de hacer presencia por invitación directa a mesas de desarrollo tan interesantes como la de <a href="https://ecsl2017.softwarelibre.ca/registro/charla/17">«Mujeres en software libre / Seamos una comunidad más inclusiva y diversa»</a> organizado por Código Sur con Mónica Monje en colaboración con Keyla Merino de la comunidad Salvadoreña de Software Libre y pues de yo igual participe como Mozilla Centroamérica. Otra de estas participación externas a la agenda mozilliana presentada fue la charla <a href="https://ecsl2017.softwarelibre.ca/registro/charla/30">«Licenciamiento libre para proyectos de hardware FLOSS»</a> que igualmente impartí en el segundo día del ECSL, que seria ya el sábado 22 de Julio, ese día además la participación del resto de toda la comunidad fue relevante en la asistencia y apoyo a otros talleres y charlas del resto del evento, donde nos relacionamos y convivimos con otros asistentes donde varios nos externaron su interés por ser parte de las diferentes comunidades mozilla de sus respectivos países y evidentemente del aglomerado Centromaricano.</p>
<p>El material de las charlas que se impartieron las estaremos compartiendo con todos ustedes más adelante en cuento lo tengamos mejor documentados como miembros de Mozilla Centroamerica, asi que pendientes.</p>
<p>Y pues no queremos cerrar esta publicación sin antes dejar plasmada nuestra felicidad al dar la bienvenida al inicio de la fundación de las comunidad <em>Mozilla Guatemala</em> con <em>Yeffri Salazar</em> y <em>Andrés Alonzo</em> que se confirmo en este ECSL17, luego de poder compartir con ellos en esta ocasión. <strong>¡Bienvenidos, a la familia Mozillians!</strong>.</p>
<p>Sin más que decir creemos importante disculparnos con cada persona que esta al pendiente de nuestras acciones acá en nuestro pulgarcito por nuestra ausencia tan extendida en realizar actividades que involucren a la comunidad en general, aprovechando esto dejamos plasmado nuestro compromiso en reactivarnos como comunidad aquí en El Salvador. Pero, sabes esta es tan solo la mitad de nuestra aventura en Costa Rica, si te interesa puedes visitar nuestra publicación acerca de nuestra participación en el Moz Activate 2017 que viene a ser la celebración de nuestro II Encuentro Mozillero Centroamérica.</p>
<p>Puedes ver más foto de nuestra participación en el ECSL17 en: <a href="https://goo.gl/Kq9BBb">https://goo.gl/Kq9BBb</a></p>
<p><a href="http://mozillaSv.github.io/blog/ix-encuentro-centroamericano-de-software-libre/">IX Encuentro Centroamericano De Software Libre</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 06, 2017.</p>
http://mozillaSv.github.io/tutoriales/aplicaciones-web-offline-con-github-pages2016-07-05T18:13:36+00:002016-07-05T18:13:36+00:00Andrés Godínezhttp://mozillaSv.github.iopistilloagodinez@gmail.com
<p><em>Post traducido del blog de <a href="https://hacks.mozilla.org/">Mozilla Hacks</a>, lee el original <a href="https://hacks.mozilla.org/2015/11/offline-web-apps-on-github-pages/">aqui</a>.</em></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> es una respuesta a los <a href="http://alistapart.com/article/application-cache-is-a-douchebag">problemas de la memoria caché de aplicaciones</a>, y es una potente y elegante vía para su aplicación web offline. Pero también es más difícil de implementar y mantener.</p>
<p>Mientras tanto, <a href="https://pages.github.com/">GitHub Pages</a> es un host estático grande y simple para <a href="http://offlinefirst.org/">aplicaciones offline-first</a>. Pero el despliegue de aplicaciones en GitHub Pages requiere configuración manual, especialmente si se desarrollan con un equipo, utilizan alguna variante del <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a> y establece un proceso continuo de implementación.</p>
<p><a href="https://github.com/mozilla/oghliner">Oghliner</a> es un paquete de <a href="https://www.npmjs.com/">NPM</a> que simplifica tanto el offining de una aplicación con Service Workers y el despliegue de la aplicación a GitHub Pages (incluyendo el despliegue continuo usando <a href="https://travis-ci.org/">Travis CI</a>). El objetivo de Oghliner es que sea lo más simple posible para estar fuera de línea y desplegar una aplicación web.</p>
<p>Para comenzar a utilizar Oghliner, instálalo globalmente:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>npm install --global oghliner
</code></pre>
</div>
<p>Si usted tiene una aplicación existente en un repositorio GitHub, escriba el comando <strong>integrate</strong> para configurarlo. Ese comando copia un script offline-manager.js (que registra el service worker) en su aplicación y recuerde que debe cargar ese script en las página(s)/plantilla(s) de su aplicación (uno de los pocos pasos que Oghliner todavía no automatiza).</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>oghliner integrate
Integrating Oghliner into the app <span class="k">in </span>the current directory…
? Copying offline-manager.js to ./… <span class="k">done</span>!
Oghliner has been integrated into the app!
The app needs to load the script offline-manager.js <span class="k">in </span>order to register
the service worker that offlines the app. To load the script, add this line to
the app<span class="s1">'s HTML page(s)/template(s):
<script src="offline-manager.js"></script>
And commit the changes and push the commit to the origin/master branch:
git commit -m"integrate Oghliner" --all
git push origin master
Then you can offline and deploy the app using the offline and deploy commands.
? For more information about offlining and deployment, see:
https://mozilla.github.io/oghliner/
</span></code></pre>
</div>
<p>Si aún no dispone de una aplicación existente, cree una nueva aplicación mediante la <a href="https://github.com/new">creación de un nuevo repositorio</a> en GitHub, clónelo a su máquina local, y escriba el comando <strong>bootstrap</strong> en su directorio de trabajo.</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>git clone git@github.com:mykmelez/offline-app.git
Cloning into <span class="s1">'offline-app'</span>...
…
<span class="gp">$ </span><span class="nb">cd </span>offline-app/
<span class="gp">$ </span>oghliner bootstrap
Bootstrapping current directory as Oghliner app…
Your app<span class="s1">'s configuration is:
Name: offline-app
Repository: git@github.com:mykmelez/offline-app.git
Description: A template app bootstrapped with oghliner.
License: Apache-2.0
Would you like to change its configuration (y/N)?
Creating files…
? Creating README.md
? Creating .gitignore
? Creating gulpfile.js
? Creating package.json
? Creating app/favicon.ico
? Creating app/fonts
? Creating app/index.html
? Creating app/robots.txt
? Creating app/images/apple-touch-icon-114x114.png
? Creating app/images/apple-touch-icon-120x120.png
? Creating app/images/apple-touch-icon-144x144.png
? Creating app/images/apple-touch-icon-152x152.png
? Creating app/images/apple-touch-icon-57x57.png
? Creating app/images/apple-touch-icon-60x60.png
? Creating app/images/apple-touch-icon-72x72.png
? Creating app/images/apple-touch-icon-76x76.png
? Creating app/images/favicon-128x128.png
? Creating app/images/favicon-16x16.png
? Creating app/images/favicon-196x196.png
? Creating app/images/favicon-32x32.png
? Creating app/images/favicon-96x96.png
? Creating app/images/mstile-144x144.png
? Creating app/images/mstile-150x150.png
? Creating app/images/mstile-310x150.png
? Creating app/images/mstile-310x310.png
? Creating app/images/mstile-70x70.png
? Creating app/scripts/main.js
? Creating app/scripts/offline-manager.js
? Creating app/styles/stylesheet.css
? Creating files… done!
? Installing npm dependencies… done!
Your app has been bootstrapped! Just commit the changes and push the commit
to the origin/master branch:
git add --all && git commit -m"initial version of Oghliner app"
git push origin master
Then you can build, offline, and deploy the app using gulp commands.
? For more information about building, offlining and deployment, see:
https://mozilla.github.io/oghliner/
</span></code></pre>
</div>
<p>Por último, confirme los cambios para completar la configuración.</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>git add --all <span class="o">&&</span> git commit -m<span class="s2">"initial version of Oghliner app"</span>
</code></pre>
</div>
<p>Ahora que su aplicación está configurada, puede compilarla, desconectarla y desplegarla. El arranque de aplicaciones incluye un script de compilación gulpfile.js. Para compilar, instale gulp globalmente:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>npm install --global gulp
</code></pre>
</div>
<p>Entonces simplemente escriba gulp:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>gulp
</code></pre>
</div>
<p>Para desconectar su aplicación, invoque el comando <strong>offline</strong> para generar el service worker que desconectará su aplicación, especificando el directorio que contiene los archivos sin conexión.</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>oghliner offline dist/
Offlining dist/ to dist/offline-worker.js…
? Caching <span class="s2">"dist/favicon.ico"</span> <span class="o">(</span>384 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-114x114.png"</span> <span class="o">(</span>278 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-120x120.png"</span> <span class="o">(</span>285 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-144x144.png"</span> <span class="o">(</span>321 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-152x152.png"</span> <span class="o">(</span>320 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-57x57.png"</span> <span class="o">(</span>242 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-60x60.png"</span> <span class="o">(</span>242 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-72x72.png"</span> <span class="o">(</span>247 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/apple-touch-icon-76x76.png"</span> <span class="o">(</span>247 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/favicon-128x128.png"</span> <span class="o">(</span>298 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/favicon-16x16.png"</span> <span class="o">(</span>216 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/favicon-196x196.png"</span> <span class="o">(</span>380 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/favicon-32x32.png"</span> <span class="o">(</span>232 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/favicon-96x96.png"</span> <span class="o">(</span>269 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/mstile-144x144.png"</span> <span class="o">(</span>323 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/mstile-150x150.png"</span> <span class="o">(</span>316 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/mstile-310x150.png"</span> <span class="o">(</span>411 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/mstile-310x310.png"</span> <span class="o">(</span>610 B<span class="o">)</span>
? Caching <span class="s2">"dist/images/mstile-70x70.png"</span> <span class="o">(</span>246 B<span class="o">)</span>
? Caching <span class="s2">"dist/index.html"</span> <span class="o">(</span>3.08 kB<span class="o">)</span>
? Caching <span class="s2">"dist/robots.txt"</span> <span class="o">(</span>102 B<span class="o">)</span>
? Caching <span class="s2">"dist/scripts/main.js"</span> <span class="o">(</span>151 B<span class="o">)</span>
? Caching <span class="s2">"dist/scripts/offline-manager.js"</span> <span class="o">(</span>1.1 kB<span class="o">)</span>
? Caching <span class="s2">"dist/styles/stylesheet.css"</span> <span class="o">(</span>107 B<span class="o">)</span>
Total precache size is about 10.41 kB <span class="k">for </span>24 resources.
</code></pre>
</div>
<p>Para desplegar la aplicación (incluyendo el service worker) a GitHub Pages, invocar el comando <strong>deploy</strong>, y otra vez especifique el directorio que contiene los archivos de la aplicación.</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>oghliner deploy dist/
Deploying <span class="s2">"initial version of Oghliner app"</span> to GitHub Pages…
? Cloning git@github.com:mykmelez/offline-app.git into .gh-pages-cache… <span class="k">done</span>!
? Cleaning… <span class="k">done</span>!
? Fetching origin… <span class="k">done</span>!
? Checking out origin/gh-pages… <span class="k">done</span>!
? Removing files… <span class="k">done</span>!
? Copying files… <span class="k">done</span>!
? Adding all… <span class="k">done</span>!
? Committing… <span class="k">done</span>!
? Pushing… <span class="k">done</span>!
</code></pre>
</div>
<p>Todos los comandos de Oghliner están disponibles a través de un módulo de interfaz, así que usted puede integrarlas en sus scripts de compilación Node-based usando herramientas como Grunt y Gulp. Si usted hizo su aplicación con Oghliner, su gulpfile.js ya ha <strong>desconectado</strong> y <strong>desplegado</strong> (que también se puede utilizar como una alternativa a los comandos anteriores).</p>
<p>Por último, invocar el comando <strong>configure</strong> para configurar una aplicación para desplegarla automáticamente a GitHub Pages utilizando Travis CI cuando se combine un cambio en la rama principal de la aplicación (siempre que la compilacion se realizó con éxito y pasó las pruebas, por supuesto!).</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>oghliner configure
Configuring Travis to auto-deploy to GitHub Pages…
Your repository has a single remote, origin.
Ok, I<span class="s1">'ll configure Travis to auto-deploy the origin remote (mykmelez/offline-app).
To check the status of your repository in Travis and authorize Travis to push
to it, I'</span>ll create GitHub personal access tokens, <span class="k">for </span>which I need your GitHub
username and password <span class="o">(</span>and two-factor authentication code, <span class="k">if </span>appropriate<span class="o">)</span>.
? For more information about GitHub personal access tokens, see:
https://github.com/settings/tokens
Username: mykmelez
Password:
× Checking credentials… error!
You<span class="s1">'re using two-factor authentication with GitHub.
Please enter the code provided by your authentication software.
Auth Code: 123456
? Checking credentials… done!
? Creating temporary GitHub token for getting Travis token… done!
? Getting Travis token… done!
? Deleting temporary GitHub token for getting Travis token… done!
Creating permanent GitHub token for Travis to push to the repository…
? Creating permanent GitHub token for Travis to push to the repository… done!
? You had an existing token for this app, so we deleted and recreated it.
? Checking the status of your repository in Travis… done!
Good news, your repository is active in Travis!
? Encrypting permanent GitHub token… done!
? Writing configuration to .travis.yml file… done!
? You didn'</span>t already have a .travis.yml file, so I created one <span class="k">for </span>you.
For more information about the file, see:
http://docs.travis-ci.com/user/customizing-the-build/
You<span class="s1">'re ready to auto-deploy using Travis! Just commit the changes
in .travis.yml and push the commit to the origin/master branch:
git add .travis.yml
git commit -m"configure Travis to auto-deploy to GitHub Pages" .travis.yml
git push origin master
Then visit https://travis-ci.org/mykmelez/offline-app/builds to see the build status.
</span></code></pre>
</div>
<p>Entonces Travis desplegará la compilación exitosa (en la rama master):</p>
<p><img src="https://hacks.mozilla.org/files/2015/11/Screen-Shot-2015-11-16-at-16.34.53-500x110.png" alt="figure01" /></p>
<p>Un par de advertencias a tener en cuenta:</p>
<ul>
<li>El despliegue a veces toma unos minutos en aparecer en las páginas de GitHub.</li>
<li>Los Service Workers requieren que se cargue la aplicación a través de una conexión cifrada (HTTPS). Todas las páginas de GitHub se pueden cargar a través de una conexión de este tipo, a pesar de que GitHub no lo admite oficialmente.</li>
<li>Los Service Workers están disponibles en Chrome, Opera, y la edición para desarrolladores de Firefox. Lo estarán en Firefox 44.</li>
</ul>
<p><a href="https://wiki.mozilla.org/Apps#Web_App_Developer_Initiative">La iniciativa desarrollador de aplicaciones web</a> de Mozilla del equipo de ingeniería construyó Oghliner porque pensamos que Service Workers es una gran vía para las aplicaciones web offline, y GitHub Pages es una gran cosa para implementarlas, así que queríamos ver cuánto mejor podría ser la combinación.</p>
<p>Hemos utilizado Oghliner en nuestros propios proyectos, al igual que esta <a href="https://mykmelez.github.io/offline-web-apps-on-github-pages/">presentación</a> y <a href="https://github.com/mozilla/platatus">Platatus</a>, y esperamos que le guste. Así que a <a href="https://www.npmjs.com/package/oghliner">aprender más sobre él</a>, pruébelo, y háganos saber cómo funciona para usted!</p>
<p><a href="http://mozillaSv.github.io/tutoriales/aplicaciones-web-offline-con-github-pages/">Aplicaciones Web Offline Con GitHub Pages</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on July 05, 2016.</p>
http://mozillaSv.github.io/blog/1er-encuentro-centroamericano-de-mozilla2016-06-23T17:07:00+00:002016-06-23T17:07:00+00:00Andrés Godínezhttp://mozillaSv.github.iopistilloagodinez@gmail.com
<p><strong>El evento se llevó a cabo el día 16 de junio del presente año en la <a href="http://www.ies.uni.edu.ni/">Universidad Nacional de Ingeniería (UNI-IES)</a></strong> de la ciudad de Managua en Nicaragua. Fue organizado con el apoyo de la comunidad de <a href="https://mozillanicaragua.wordpress.com/">Mozilla Nicaragua</a> y la UNI-IES, con el objetivo de promover las tendencias y proyectos de Mozilla.</p>
<p>La cantidad de personas que llegaron al evento fue impresionante, <strong>más de 500 personas</strong> entre docentes, estudiantes y entusiastas de la tecnología asistieron a las 10 conferencias en el Auditorio Salomón de la Selva y a los 5 Talleres en los laboratorios de computación de dicha Universidad.</p>
<figure>
<a href="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466713218/MozSV/1ecm.png">
<img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466713218/MozSV/1ecm.png" alt="image" />
</a>
<figcaption>
Foto grupal, 1er Encuentro Centroamericano de Mozilla, Nicaragua 2016
</figcaption>
</figure>
<p>Los talleres y conferencias fueron impartidos por las comunidades mozilleras de los paises de <a href="https://mozillahonduras.wordpress.com/">Honduras</a>, <a href="http://mozillasv.github.io/">El Salvador</a>, <a href="http://mozilla-costarica.org/">Costa Rica</a>, <a href="http://mozillapanama.org/">Panamá</a> y <a href="https://mozillanicaragua.wordpress.com/">Nicaragua</a>, entre las cuales podemos listar los siguientes:</p>
<ul>
<li>Proyecto Mozilla Historia e impacto en la web.</li>
<li>Conoce Firefox, Tips de navegación</li>
<li>¿Qué hace Mozilla por la Neutralidad de la red?</li>
<li>Mozilla Learning Network</li>
<li>Proyecto Womoz (Mozilla Women)</li>
<li>Introducción a Rust</li>
<li>Desarrollo de Juegos con LIBGDX</li>
<li>IOT (Internet of things) con arduino</li>
<li>Introducción a Ionic framework</li>
<li>Taller de Node Js</li>
<li>Taller de wordpress básico</li>
<li>Makey Makey, convirtiendo objetos en interfaces físicas</li>
<li>Taller de Desarrollo apps híbridas con Ionic</li>
</ul>
<figure>
<a href="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466714133/MozSV/mozcr_rust.jpg">
<img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466714133/MozSV/mozcr_rust.jpg" alt="image" />
</a>
<figcaption>
Brian Salazar de Mozilla Costa Rica en su presentación "Introducción a Rust"
</figcaption>
</figure>
<p>Se mostró mucho interés por parte de los asistentes con respecto a los proyectos que impulsamos como entusiastas y profesionales de la Web abierta. <strong>Agradecemos también la amable atención y apoyo que nos brindó la <a href="http://www.ies.uni.edu.ni/">UNI-IES</a></strong> en este gran evento realizado, esperamos que después siempre nos brinden su apoyo cuando se organice algún otro evento similar.</p>
<p>Para más información sobre el evento visita el <a href="http://encuentro.mozillanicaragua.org/">sitio web oficial</a> de este año.</p>
<p>Los siguientes enlaces hacen referencia al evento en distintas paginas publicitarias:</p>
<ul>
<li><a href="http://www.canal4.com.ni/index.php/multinoticias/13089-realizan-el-primer-encuentro-centroamericano-de-mozilla-en-nicaragua.html">Reportaje Canal 4</a></li>
<li><a href="http://www.el19digital.com/articulos/ver/titulo:43151-realizan-el-primer-encuentro-centroamericano-de-mozilla-en-nicaragua-">El 19 Digital</a></li>
<li><a href="http://www.lavozdelsandinismo.com/nicaragua/2016-06-16/nicaragua-acoge-primer-encuentro-centroamericano-comunidad-mozilla/">La voz del sandinismo</a></li>
<li><a href="http://www.radionicaragua.com.ni/noticias/ver/titulo:29256-uni-realiza-el-primer-encuentro-centroamericano-de-mozilla-">Radio Nicaragua</a></li>
<li><a href="http://nuevaya.com.ni/nicaragua-sera-sede-del-i-encuentro-centroamericano-de-mozilla/">La nueva Radio Ya </a></li>
<li><a href="https://www.facebook.com/926511660753495/videos/1076778169060176/">NNT45 </a></li>
</ul>
<p>Para terminar, también agradecemos enormemente a Mozilla por la oportunidad que nos dio de poder viajar hasta Nicaragua para hacer realidad este evento en el que pudimos aprender mucho y compartir nuestros conocimientos con los demás, fue una bonita experiencia que esperamos seguir haciendola cada año en la región centroamericana.</p>
<p><a href="http://mozillaSv.github.io/blog/1er-encuentro-centroamericano-de-mozilla/">1er Encuentro Centroamericano de Mozilla</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on June 23, 2016.</p>
http://mozillaSv.github.io/blog/viii-encuentro-centroamericano-de-software-libre2016-06-22T17:04:09+00:002016-06-22T17:04:09+00:00Andrés Godínezhttp://mozillaSv.github.iopistilloagodinez@gmail.com
<p>El <a href="http://encuentro.softwarelibre.ca/">Encuentro Centroamericano de Software Libre (ECSL)</a> es un evento anual organizado desde el año 2009 por y para la comunidad de <a href="http://softwarelibre.ca/">Software Libre Centroamérica (SLCA)</a>. El ECSL es una reunión anual de activistas y miembros de comunidades y grupos de usuarios que sirve como punto de encuentro y espacio de articulación, educación, coordinación e intercambio de ideas para fortalecer acuerdos y formas de trabajo conjuntas que faciliten la promoción del uso y desarrollo del Software Libre en la región.</p>
<p>En este año, se celebró la <a href="http://encuentro.softwarelibre.ca/2016/">octava edición</a> de dicho evento los días 16, 17 y 18 de junio en el <a href="http://teodolinda.com.ni/">Hotel Mansión Teodolinda</a> de la ciudad de Managua en Nicaragua, el evento reunió a más de 200 personas y contó con alrededor de <a href="http://encuentro.softwarelibre.ca/2016/agenda/">50 charlas</a> de diversos temas sobre tecnologías libres.</p>
<figure>
<a href="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466709703/MozSV/grupal_viii_ecsl.jpg">
<img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466709703/MozSV/grupal_viii_ecsl.jpg" alt="image" />
</a>
<figcaption>
Foto grupal, VIII ECSL Nicaragua 2016
</figcaption>
</figure>
<p>Mozilla Centroamérica (MozCA), la cual es formada por mozillians de las comunidades de <a href="http://mozillapanama.org/">Panamá</a>, <a href="http://mozilla-costarica.org/">Costa Rica</a>, <a href="https://mozillahonduras.wordpress.com/">Honduras</a>, <a href="https://mozillanicaragua.wordpress.com/">Nicaragua</a>, <a href="http://mozillasv.github.io/">El Salvador</a> y en un futuro cercano tambien por Guatemala, hizo su presencia al evento con unas cuantas charlas que hablaban y promovian algunas de las tecnologías de Mozilla.</p>
<p>Los compañeros de <a href="https://mozillanicaragua.wordpress.com/">Nicaragua</a> participaron con las charlas <em>“Mozilla y tú”</em> realizada por Ivan Zeledon, <em>“La visión de Mozilla sobre Internet of Things (IoT)”</em> por David Blanchard, <em>“Mozilla y la Web RTC”</em> por Ibel Zuniga y <em>“Mozilla Women (WOMOZ)”</em> por Francys Gómez. El compañero Brian Salazar de <a href="http://mozilla-costarica.org/">Costa Rica</a> realizó la charla <em>“Introduccion a Rust”</em>.</p>
<p><a href="http://mozillapanama.org/">Panamá</a> hizo su participacion con Richard Armuelles y su charla <em>“Controlando sensores con JS y Arduino”</em>, tambien el colega Rony de León con su ponencia <em>“¿Tienes el control de tu información? Detecta el rastreo en la Web”</em>. <a href="https://mozillahonduras.wordpress.com/">Honduras</a> participó con la charla <em>“Fritzing y Arduino: Electrónica para generar comunidad de la mano de Thinkers and Makers”</em> del compañero Martín Pineda y Jorge Aguilar nos habló sobre <em>“La Neutralidad de la Red”</em>.</p>
<p><a href="http://mozillasv.github.io/">El Salvador</a> tuvo su participación con la compañera Karla Hernandez quien habló sobre <em>“Difusión de Mozilla desde el equipo creativo con Inkscape”</em> y <em>“Compartiendo Buenas Prácticas para el Hardware de Fuente Abierta”</em>, tambien con el compañero Andrés Godínez quien ayudó a Nelson Stanley Castillo en su charla <em>“OpenHardware Enterprise”</em>.</p>
<p>El próximo año, la sede del evento será el país de Costa Rica, los mozillians de la <a href="http://mozilla-costarica.org/">Comunidad de Costa Rica</a> estarán a cargo de la organización de la novena edición del ECSL. Bueno esperamos poder asistir y compartir de nuevo esta experiencia, y si te animas a ir podremos organizar el viaje para asistir.</p>
<figure>
<a href="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466710470/MozSV/moz_ni_sv_pa.jpg">
<img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1466710470/MozSV/moz_ni_sv_pa.jpg" alt="image" />
</a>
<figcaption>
Compañeros de Mozilla Nicaragua, El Salvador y Panamá
</figcaption>
</figure>
<p>Además agradecemos a Mozilla por la oportunidad que nos dio de poder asistir a este evento en el que pudimos aprender mucho, fue una buena experiencia el convivir con las demás comunidades de mozilla y el poder organizarnos para realizar otros eventos y actividades en la región centroamericana.</p>
<p>Y a los compañeros de MozCA solo nos queda decirles: <strong>Allá nos volvemos a ver!</strong></p>
<p><a href="http://mozillaSv.github.io/blog/viii-encuentro-centroamericano-de-software-libre/">VIII Encuentro Centroamericano de Software Libre</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on June 22, 2016.</p>
http://mozillaSv.github.io/eventos/i-encuentro-centroamericano-de-mozilla2016-06-01T00:00:00+00:002016-06-01T00:00:00+00:00Mozilla El Salvadorhttp://mozillaSv.github.iomozillaelsalvador@gmail.com
<style>
table td {
font-size: 18px;
font-size: 1rem;
line-height: 1.55556;
margin-bottom: 24px;
margin-bottom: 1.33333rem;
font-weight: 300;
}
tbody tr > td.thead {
background-color: #fafafa;
}
.social-share-twitter a:hover,
.social-share-facebook a:hover,
.social-share-googleplus a:hover {
padding: 5px;
color: #fff !important;
}
.social-share-twitter a:hover { background-color: #55acee; }
.social-share-facebook a:hover { background-color: #3b5998; }
.social-share-googleplus a:hover { background-color: #dd4b39; }
</style>
<p>El Primer Encuentro Centroamericano de Mozilla será un evento en donde mozillians de las comunidades de Mozilla de <a href="http://mozillasv.github.io/">El Salvador</a>, <a href="https://mozillahonduras.wordpress.com/">Honduras</a>, <a href="https://mozillanicaragua.wordpress.com/">Nicaragua</a>, <a href="http://mozilla-costarica.org/">Costa Rica</a> y <a href="http://mozillapanama.org/">Panamá</a> darán a conocer al público sobre los proyectos, actividades y eventos que se están realizando o se realizarán a nivel centroamericano.</p>
<p>Es organizado por las comunidades Mozilla Centroamérica y Mozilla Nicaragua, <strong>se realizará en la Universidad Nacional de Ingenieria (Nicaragua) el día Jueves 16 de Junio del presente año</strong>, invitamos a que asistan todos los que deseen conocer más acerca de las tecnologías de Mozilla, la web, la seguridad y otros temas en general.</p>
<p><strong>Aqui listamos algunas de las ponencias/talleres que se verán en el evento:</strong></p>
<table>
<tbody>
<tr>
<td class="thead"><strong>Charla</strong></td>
<td class="thead"><strong>Ponente</strong></td>
<td class="thead"><strong>País</strong></td>
</tr>
<tr>
<td>Proyecto Mozilla, Historia e impacto en la web</td>
<td>Iván Zeledon</td>
<td>Nicaragua</td>
</tr>
<tr>
<td>Conoce Firefox // tips de navegación</td>
<td>Ronyy De León</td>
<td>Panamá</td>
</tr>
<tr>
<td>¿Qué hace Mozilla por la Neutralidad de la red?</td>
<td>Richard Armuelles</td>
<td>Panamá</td>
</tr>
<tr>
<td>Mozilla Learning Network</td>
<td>Ing. Ibel Zuniga</td>
<td>Nicaragua</td>
</tr>
<tr>
<td>Introducción a Rust (porqué utilizarlo y ejemplo práctico)</td>
<td>Brian Salazar</td>
<td>Costa Rica</td>
</tr>
<tr>
<td>Flexbox, La nueva forma de hacer Responsive Design</td>
<td>David Gaitán</td>
<td>Nicaragua</td>
</tr>
<tr>
<td>IOT + App en minutos con Arduino</td>
<td>Karla Hernández</td>
<td>El Salvador</td>
</tr>
<tr>
<td>Desarrollo de Juegos HTML5 o Nativos con LIBGDX</td>
<td>Ing. David Blanchard</td>
<td>Nicaragua</td>
</tr>
<tr>
<td>Introducción a Ionic Framework</td>
<td>Jorge Mizrain</td>
<td>Honduras</td>
</tr>
</tbody>
</table>
<p> <br />
<strong>Afiche del evento:</strong></p>
<p><img src="https://blanchardspace.files.wordpress.com/2016/05/cim7sgjwwaap4tz.jpg" alt="afiche" /></p>
<p> <br />
Comparte esta página en las redes sociales:
<span class="social-share-twitter">
<a target="_blank" href="https://twitter.com/intent/tweet?hashtags=&text=I%20Encuentro%20Centroamericano%20de%20Mozilla&url=http://mozillaSv.github.io/eventos/i-encuentro-centroamericano-de-mozilla/&via=mozelsalvador" title="Share on Twitter" itemprop="Twitter"><i class="fa fa-twitter"></i> Tweet</a>
</span>
<span class="social-share-facebook">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://mozillaSv.github.io/eventos/i-encuentro-centroamericano-de-mozilla/" title="Share on Facebook" itemprop="Facebook"><i class="fa fa-facebook"></i> Like</a>
</span>
<span class="social-share-googleplus">
<a target="_blank" href="https://plus.google.com/share?url=http://mozillaSv.github.io/eventos/i-encuentro-centroamericano-de-mozilla/" title="Share on Google Plus" itemprop="GooglePlus"><i class="fa fa-google-plus"></i> +1</a>
</span></p>
<p><a href="http://mozillaSv.github.io/eventos/i-encuentro-centroamericano-de-mozilla/">I Encuentro Centroamericano de Mozilla</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on June 01, 2016.</p>
http://mozillaSv.github.io/tutoriales/construye-la-realidad-virtual-en-la-web-con-a-frame2016-04-15T00:50:03+00:002016-04-15T00:50:03+00:00Andrés Godínezhttp://mozillaSv.github.iopistilloagodinez@gmail.com
<p><em>Post traducido del blog de <a href="https://hacks.mozilla.org/">Mozilla Hacks</a>, lee el original <a href="https://hacks.mozilla.org/2016/03/build-the-virtual-reality-web-with-a-frame/">aquí</a></em></p>
<p>El <a href="https://mozvr.com/">equipo de WebVR de Mozilla (MozVR)</a> estableció hace más de un año la pregunta: <em>“¿Qué aspecto tendría la Realidad Virtual (VR) en la Web?”</em> Hoy hacemos clic en los enlaces para saltar de página en página, un día caminaremos a través de portales para saltar de mundo en mundo. Lamentablemente, hay sólo un puñado de desarrolladores de WebGL en el mundo que sabe cómo crear experiencias 3D interactivos. Pero hay potencialmente millones de desarrolladores web, diseñadores y artistas 3D con deseo de una herramienta para crear contenido de Realidad Virtual fácilmente como construir una página web.</p>
<p>Recientemente hemos publicado un framework de código abierto llamado <a href="https://aframe.io/">A-Frame</a> para crear fácilmente experiencias 3D y realidad virtual en la web. A-Frame pone la creación de contenidos de VR en nuestras manos por lo que nos permite crear escenas con <strong>declarativa HTML</strong> que simplemente funciona en desktop, Oculus Rift y smartphones. Podemos manipular escenas con JavaScript básico tal como lo haría con los elementos HTML ordinarios, y podemos continuar usando nuestras bibliotecas y frameworks JavaScript favoritos (por ejemplo, <a href="https://www.youtube.com/watch?v=Tb2b5nFmmsM">d3</a>, <a href="https://github.com/ngokevin/aframe-react">React</a>). Una escena básica en A-Frame se ve algo como:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/jqERjQ/?height=266&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/jqERjQ/">Hello A-Frame - 2</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<p>En esta escena:</p>
<ul>
<li>Tenemos algunas geometrías básicas con <code class="highlighter-rouge"><a-cube></code>, <code class="highlighter-rouge"><a-cylinder></code>, <code class="highlighter-rouge"><a-sphere></code>.</li>
<li>Tenemos una imagen de la Web, usando<code class="highlighter-rouge"><a-image></code>.</li>
<li>Tenemos una foto de 360 grados usando <code class="highlighter-rouge"><a-sky></code> para el fondo.</li>
<li>Podemos movernos alrededor con las teclas WASD y mirar alrededor con arrastrar el ratón.</li>
</ul>
<p>Para entrar en la realidad virtual, pulsamos el icono de las Gafas. Esta escena se puede ver en un Oculus Rift en una desktop o en un smartphone usando un soporte de Google Cardboard. O también puede funcionar como una escena 3D normal. Más información sobre la <a href="https://mozvr.com/#start">introducción de VR</a>. La sintaxis anterior debe parecer familiar a casi todos; cada elemento debajo de <code class="highlighter-rouge"><a-scene></code> representa un objeto 3D, y podemos modificar estos objetos usando atributos HTML. Bajo este marcado simple, sin embargo, se encuentra un framework 3D flexible y extensible.</p>
<h3 id="threejs--sistema-de-entidades-y-componentes">three.js + Sistema de Entidades y Componentes</h3>
<p>Bajo la cubierta, A-Frame es un framework three.js que trae el modelo <a href="https://en.wikipedia.org/wiki/Entity_component_system">sistema de entidades y componentes (ECS)</a> para el DOM. A-Frame esta construido como una capa de abstracción sobre <a href="http://threejs.org/">three.js</a> y es lo suficientemente extensible como para hacer casi cualquier cosa que three.js puede hacer.</p>
<p>El modelo ECS es un patrón de uso general en el desarrollo de juegos que favorece dimensionabilidad sobre herencia. Desde que A-Frame pretende acercar experiencias 3D altamente interactivas para la Web, éste adopta los patrones existentes de la industria de los videojuegos. En ECS, cada objeto en la escena es una <a href="https://aframe.io/docs/core/entity.html">entidad</a>, que es un contenedor general que por sí mismo no hace nada. <a href="https://aframe.io/docs/core/component.html">Los componentes</a> son módulos reusables que están conectados a una entidad con el fin de conectar la apariencia, comportamiento, y/o funcionalidad.</p>
<p>Para dar un simple ejemplo abstracto, podríamos tener los componentes color, neumáticos y motor. Podemos componer entidades configurando, mezclando y conectando los componentes reutilizables:</p>
<ul>
<li>Una entidad auto azul se compone por el componente color a azul, el componente neumático con el número establecido a cuatro, y asociando el componente motor.</li>
<li>Una entidad bicicleta roja se compone por el componente color a rojo, el componente neumático con el número establecido a dos, y no asociando el componente motor.</li>
<li>Una entidad barco amarillo se compone por el componente color a amarillo, el componente neumático con el número fijado a cero, y asociando el componente motor.</li>
</ul>
<p><img src="http://thevrjump.com/assets/img/articles/aframe-system/aframe-example.jpg" alt="figure01" /></p>
<p><em>Representación abstracta del patrón del sistema de entidades y componentes por Ruben Mueller de <a href="http://thevrjump.com/">The VR Jump</a>.</em></p>
<p>En A-Frame:</p>
<ul>
<li>Una entidad está representada por <code class="highlighter-rouge"><a-entity></code>. Es el bloque de construcción básico que comprende todo dentro de una escena.</li>
<li>Un componente está representado por un atributo HTML (por ejemplo <code class="highlighter-rouge"><a-entity engine></code>).</li>
<li>las propiedades de un componente se pasan a través de una cadena en un atributo HTML donde se analiza más adelante.</li>
<li>Si un componente tiene una única propiedad para definir, entonces se parece a un atributo HTML normal (e.g. <code class="highlighter-rouge"><a-entity visible="false"></code>).</li>
<li>Si un componente tiene más de una propiedad para definir, entonces las propiedades pasan a través de una sintaxis similar a los estilos CSS en línea (por ejemplo, <code class="highlighter-rouge"><a-entity engine="cylinders: 4; horsepower: 158; mass: 200"></code>).</li>
</ul>
<p>Tomando <code class="highlighter-rouge"><a-cube></code> por ejemplo, nosotros podemos descomponerlo en los componentes geometría (forma) y material (aspecto):</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="c"><!-- Forma actual de <a-cube> --></span>
<span class="nt"><a-entity</span>
<span class="na">geometry=</span><span class="s">"primitive: box; depth: 2; height: 10; width: 4"</span>
<span class="na">material=</span><span class="s">"color: #FFF; src: url(texture.png)"</span><span class="nt">></span>
</code></pre>
</div>
<p>Los desarrolladores pueden escribir componentes para hacer casi cualquier cosa y compartir con otros desarrolladores de plug-and-play. Vamos a configurar y asociar más componentes para formar una entidad más compleja:</p>
<p><img src="http://imgur.com/ARrDX4m.gif" alt="figure02" /></p>
<p>En un patrón de ECS, casi toda la lógica y el comportamiento deben ser encapsulados dentro de los componentes para fomentar la modularidad y la reutilización.</p>
<h3 id="construyendo-una-escena-interactiva">Construyendo una Escena Interactiva</h3>
<p>Veamos un ejemplo de construcción de una escena donde el flujo de trabajo gira en torno a los componentes de la escritura. Construiremos una escena interactiva en la que podemos disparar rayos láser a los enemigos que nos rodean. Podemos utilizar los componentes estándar que se suministran con A-Frame, o usar componentes que los desarrolladores de A-Frame han publicado para el ecosistema. Mejor aún, podemos escribir nuestros propios componentes para hacer lo que queramos!</p>
<p>Si quieres seguir, hay varias formas de codificar con A-Frame:</p>
<ul>
<li>Jugando en <a href="http://codepen.io/team/mozvr/pen/BjygdO?editors=100">CodePen</a>.</li>
<li>Tomando el <a href="https://github.com/aframevr/aframe-boilerplate">Boilerplate</a>.</li>
<li>Incluyendo el <a href="https://aframe.io/releases/0.1.2/aframe.min.js">JS compilado</a>.</li>
<li><a href="https://www.npmjs.com/package/aframe">Instalando desde npm</a>.</li>
<li>Juega con el <a href="http://codepen.io/team/mozvr/pen/PNoWEz/?editors=1000">ejemplo terminado en CodePen</a>.</li>
</ul>
<p>Vamos a comenzar añadiendo un objetivo enemigo:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/wGBLeB/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/wGBLeB/">Laser Shooter - Step 1</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<p>Esto crea una escena estática básica donde el enemigo te mira fijamente incluso a medida que se mueve alrededor. Podemos utilizar los componentes A-Frame del ecosistema para hacer algunas cosas interesantes.</p>
<h3 id="uso-de-componentes">Uso de componentes</h3>
<p>El <a href="https://github.com/aframevr/awesome-aframe#components">repositorio awesome-aframe</a> es un lugar excelente para encontrar componentes que la comunidad ha creado para habilitar nuevas características. Muchos de estos componentes se inician desde el <a href="https://github.com/ngokevin/aframe-component-boilerplate">Component Boilerplate</a> y debe proporcionar estructuras en la carpeta <code class="highlighter-rouge">dist/</code> de sus repositorios. Tomemos el <a href="https://github.com/ngokevin/aframe-layout-component">diseño del componente</a>, por ejemplo. Podemos agarrar la construcción, colocarlo en nuestra escena e inmediatamente podrá utilizarse un sistema de diseño 3D para colocar automáticamente las entidades. En lugar de tener un enemigo, vamos a tener diez enemigos colocados en un círculo alrededor del jugador:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/bpNPjp/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/bpNPjp/">Laser Shooter - Step 2</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<p>Es desordenado en el marcado tener la entidad enemiga duplicada diez veces. Podemos colocarlo en la <a href="https://github.com/ngokevin/aframe-template-component">plantilla del componente</a> para limpiar eso. También podemos utilizar el <a href="https://aframe.io/docs/core/animation.html">sistema de animación</a> de A-Frame para tener enemigos de marchando en un círculo alrededor de nosotros.</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/JXoQBm/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/JXoQBm/">Laser Shooter - Step 3</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<p>Mezclando y combinando los componentes de diseño y plantilla, ahora tenemos diez enemigos que nos rodea en un círculo. Vamos a activar el juego escribiendo nuestros propios componentes.</p>
<h3 id="escribiendo-componentes">Escribiendo componentes</h3>
<p>Los desarrolladores confortables con JavaScript y three.js puede escribir componentes para añadir apariencia, comportamiento y funcionalidad a las entidades. Como hemos visto, estos componentes pueden ser reutilizados y se comparten con la comunidad. No todos los componentes tienen que ser compartidos; pueden ser ad-hoc o one-off.</p>
<p>Los componentes consisten en datos que son definidos por el esquema y se pueden pasar a través de HTML, y los métodos del ciclo de vida, que definen cómo se utilizan los datos para modificar la entidad a la que está asociado. Los métodos de ciclo de vida por lo general interactúan con three.js, el DOM y las APIs de A-Frame. Mi anterior post del blog sobre <a href="http://ngokevin.com/blog/aframe-component">Cómo escribir un componente de VR</a> entra en más detalle sobre el uso de la API del componente para registrar un componente.</p>
<p>Para la escena, queremos ser capaces de disparar rayos láser a los enemigos para hacerlos desaparecer. Vamos a necesitar componentes para crear láseres al hacer clic, para generar clics, para impulsar los láseres, y para verificar si un láser golpea a un enemigo.</p>
<h4 id="componente-spawner">Componente spawner</h4>
<p>Vamos a empezar por ser capaces de crear láseres. Queremos ser capaces de generar una entidad láser que comienza en la posición actual del jugador. Vamos a crear un componente spawner que escuchará un evento en la entidad, y cuando se emite este caso, vamos a generar una entidad con un <a href="https://aframe.io/docs/core/mixin.html">mixin</a> predefinido de componentes:</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">AFRAME</span><span class="p">.</span><span class="nx">registerComponent</span><span class="p">(</span><span class="s1">'spawner'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">schema</span><span class="p">:</span> <span class="p">{</span>
<span class="na">on</span><span class="p">:</span> <span class="p">{</span> <span class="na">default</span><span class="p">:</span> <span class="s1">'click'</span> <span class="p">},</span>
<span class="na">mixin</span><span class="p">:</span> <span class="p">{</span> <span class="na">default</span><span class="p">:</span> <span class="s1">''</span> <span class="p">}</span>
<span class="p">},</span>
<span class="cm">/**
* Add event listener to entity that when emitted, spawns the entity.
*/</span>
<span class="na">update</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">oldData</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">on</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">spawn</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="p">},</span>
<span class="cm">/**
* Spawn new entity with a mixin of componnets at the entity's current position.
*/</span>
<span class="na">spawn</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">entity</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'a-entity'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">matrixWorld</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">object3D</span><span class="p">.</span><span class="nx">matrixWorld</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">position</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Vector3</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">rotation</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'rotation'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">entityRotation</span><span class="p">;</span>
<span class="nx">position</span><span class="p">.</span><span class="nx">setFromMatrixPosition</span><span class="p">(</span><span class="nx">matrixWorld</span><span class="p">);</span>
<span class="nx">entity</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'position'</span><span class="p">,</span> <span class="nx">position</span><span class="p">);</span>
<span class="c1">// Have the spawned entity face the same direction as the entity.</span>
<span class="c1">// Allow the entity to further modify the inherited rotation.</span>
<span class="nx">position</span><span class="p">.</span><span class="nx">setFromMatrixPosition</span><span class="p">(</span><span class="nx">matrixWorld</span><span class="p">);</span>
<span class="nx">entity</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'position'</span><span class="p">,</span> <span class="nx">position</span><span class="p">);</span>
<span class="nx">entity</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'mixin'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">mixin</span><span class="p">);</span>
<span class="nx">entity</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'loaded'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">entityRotation</span> <span class="o">=</span> <span class="nx">entity</span><span class="p">.</span><span class="nx">getComputedAttribute</span><span class="p">(</span><span class="s1">'rotation'</span><span class="p">);</span>
<span class="nx">entity</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'rotation'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">x</span><span class="p">:</span> <span class="nx">entityRotation</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="nx">rotation</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span>
<span class="na">y</span><span class="p">:</span> <span class="nx">entityRotation</span><span class="p">.</span><span class="nx">y</span> <span class="o">+</span> <span class="nx">rotation</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span>
<span class="na">z</span><span class="p">:</span> <span class="nx">entityRotation</span><span class="p">.</span><span class="nx">z</span> <span class="o">+</span> <span class="nx">rotation</span><span class="p">.</span><span class="nx">z</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">sceneEl</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">entity</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre>
</div>
<h4 id="componente-click-listener">Componente click-listener</h4>
<p>Ahora necesitamos una manera de generar un evento de clic sobre la entidad del jugador con el fin de generar el láser. Sólo podríamos escribir un controlador de eventos JavaScript en una secuencia de contenidos, pero es más reutilizable el escribir un componente que puede permitir a cualquier entidad escuchar clics:</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">AFRAME</span><span class="p">.</span><span class="nx">registerComponent</span><span class="p">(</span><span class="s1">'click-listener'</span><span class="p">,</span> <span class="p">{</span>
<span class="c1">// When the window is clicked, emit a click event from the entity.</span>
<span class="na">init</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre>
</div>
<p>Desde el HTML, podemos definir el mixin del láser y fijar los componentes spawner y click-listener al jugador. Cuando hagamos clic, el componente spawner generará un laser de partida frente a la cámara:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/jqEjvB/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/jqEjvB/">Laser Shooter - Step 4</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<h4 id="componente-projectile">Componente projectile</h4>
<p>Ahora los láseres se generan en frente de nosotros cuando hacemos clic, pero necesitamos disparar y viajar. En el componente spawner, tuvimos el punto láser en la rotación de la cámara, y hemos rotado 90 grados alrededor del eje X para alinearlo correctamente. Podemos añadir un componente projectile para que el láser viaje directamente en la dirección de enfrente (su eje Y local en este caso):</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">AFRAME</span><span class="p">.</span><span class="nx">registerComponent</span><span class="p">(</span><span class="s1">'projectile'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">schema</span><span class="p">:</span> <span class="p">{</span>
<span class="na">speed</span><span class="p">:</span> <span class="p">{</span> <span class="na">default</span><span class="p">:</span> <span class="o">-</span><span class="mf">0.4</span> <span class="p">}</span>
<span class="p">},</span>
<span class="na">tick</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">object3D</span><span class="p">.</span><span class="nx">translateY</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">speed</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre>
</div>
<p>Luego conecte el componente projectile al mixin del láser:</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><a-assets></span>
<span class="c"><!-- Attach projectile behavior. --></span>
<span class="nt"><a-mixin</span> <span class="na">id=</span><span class="s">"laser"</span> <span class="na">geometry=</span><span class="s">"primitive: cylinder; radius: 0.05; translate: 0 -2 0"</span>
<span class="na">material=</span><span class="s">"color: green; metalness: 0.2; opacity: 0.4; roughness: 0.3"</span>
<span class="na">projectile=</span><span class="s">"speed: -0.5"</span><span class="nt">></a-mixin></span>
<span class="nt"></a-assets></span>
</code></pre>
</div>
<p>El laser ahora se disparará como un proyectil al hacer clic:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/YqPmzK/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/YqPmzK/">Laser Shooter - Step 5</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<h4 id="componente-collider">Componente collider</h4>
<p>El último paso es añadir un componente collider, así podemos detectar cuando el láser golpea una entidad. Esto lo podemos hacer usando <a href="http://threejs.org/docs/index.html#Reference/Core/Raycaster"> Raycaster de three.js</a>, dibujando una raya (línea) de un extremo del láser al otro, luego comprobar continuamente si uno de los enemigos están intersectando el rayo. Si un enemigo se intersecta con nuestra línea, entonces se está en contacto con el láser, y usamos un evento para decirle al enemigo que fue golpeado:</p>
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">AFRAME</span><span class="p">.</span><span class="nx">registerComponent</span><span class="p">(</span><span class="s1">'collider'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">schema</span><span class="p">:</span> <span class="p">{</span>
<span class="na">target</span><span class="p">:</span> <span class="p">{</span> <span class="na">default</span><span class="p">:</span> <span class="s1">''</span> <span class="p">}</span>
<span class="p">},</span>
<span class="cm">/**
* Calculate targets.
*/</span>
<span class="na">init</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">targetEls</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">sceneEl</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">targets</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">targetEls</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">targets</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">targetEls</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">object3D</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">object3D</span><span class="p">.</span><span class="nx">updateMatrixWorld</span><span class="p">();</span>
<span class="p">},</span>
<span class="cm">/**
* Check for collisions (for cylinder).
*/</span>
<span class="na">tick</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">t</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">collisionResults</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">directionVector</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sceneEl</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">sceneEl</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">mesh</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">getObject3D</span><span class="p">(</span><span class="s1">'mesh'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">object3D</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">object3D</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">raycaster</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">vertices</span> <span class="o">=</span> <span class="nx">mesh</span><span class="p">.</span><span class="nx">geometry</span><span class="p">.</span><span class="nx">vertices</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">bottomVertex</span> <span class="o">=</span> <span class="nx">vertices</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">clone</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">topVertex</span> <span class="o">=</span> <span class="nx">vertices</span><span class="p">[</span><span class="nx">vertices</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">].</span><span class="nx">clone</span><span class="p">();</span>
<span class="c1">// Calculate absolute positions of start and end of entity.</span>
<span class="nx">bottomVertex</span><span class="p">.</span><span class="nx">applyMatrix4</span><span class="p">(</span><span class="nx">object3D</span><span class="p">.</span><span class="nx">matrixWorld</span><span class="p">);</span>
<span class="nx">topVertex</span><span class="p">.</span><span class="nx">applyMatrix4</span><span class="p">(</span><span class="nx">object3D</span><span class="p">.</span><span class="nx">matrixWorld</span><span class="p">);</span>
<span class="c1">// Direction vector from start to end of entity.</span>
<span class="nx">directionVector</span> <span class="o">=</span> <span class="nx">topVertex</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">sub</span><span class="p">(</span><span class="nx">bottomVertex</span><span class="p">).</span><span class="nx">normalize</span><span class="p">();</span>
<span class="c1">// Raycast for collision.</span>
<span class="nx">raycaster</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Raycaster</span><span class="p">(</span><span class="nx">bottomVertex</span><span class="p">,</span> <span class="nx">directionVector</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="nx">collisionResults</span> <span class="o">=</span> <span class="nx">raycaster</span><span class="p">.</span><span class="nx">intersectObjects</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">targets</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">collisionResults</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Tell collided entity about the collision.</span>
<span class="nx">target</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'collider-hit'</span><span class="p">,</span> <span class="p">{</span><span class="na">target</span><span class="p">:</span> <span class="nx">el</span><span class="p">});</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre>
</div>
<p>A continuación, asignamos una clase a los enemigos para designarlos como blancos, asociando animaciones que se activan al colisionar para hacerlas desaparecer, y finalmente asociar el componente collider al láser que se dirige a los enemigos:</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><a-assets></span>
<span class="nt"><img</span> <span class="na">id=</span><span class="s">"enemy-sprite"</span> <span class="na">src=</span><span class="s">"img/enemy.png"</span><span class="nt">></span>
<span class="nt"><script </span><span class="na">id=</span><span class="s">"enemies"</span> <span class="na">type=</span><span class="s">"text/x-nunjucks-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">a</span><span class="o">-</span><span class="nx">entity</span> <span class="nx">layout</span><span class="o">=</span><span class="s2">"type: circle; radius: 5"</span><span class="o">></span>
<span class="o"><</span><span class="nx">a</span><span class="o">-</span><span class="nx">animation</span> <span class="nx">attribute</span><span class="o">=</span><span class="s2">"rotation"</span> <span class="nx">dur</span><span class="o">=</span><span class="s2">"8000"</span> <span class="nx">easing</span><span class="o">=</span><span class="s2">"linear"</span> <span class="nx">repeat</span><span class="o">=</span><span class="s2">"indefinite"</span>
<span class="nx">to</span><span class="o">=</span><span class="s2">"0 360 0"</span><span class="o">><</span><span class="sr">/a-animation</span><span class="err">>
</span>
<span class="p">{</span> <span class="o">%</span> <span class="k">for</span> <span class="nx">x</span> <span class="k">in</span> <span class="nx">range</span><span class="p">(</span><span class="nx">num</span><span class="p">)</span> <span class="o">%</span><span class="p">}</span>
<span class="c"><!--</span> <span class="nx">Attach</span> <span class="nx">enemy</span> <span class="kr">class</span><span class="p">.</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">a</span><span class="o">-</span><span class="nx">image</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"enemy"</span> <span class="nx">look</span><span class="o">-</span><span class="nx">at</span><span class="o">=</span><span class="s2">"#player"</span> <span class="nx">src</span><span class="o">=</span><span class="s2">"#enemy-sprite"</span> <span class="nx">transparent</span><span class="o">=</span><span class="s2">"true"</span><span class="o">></span>
<span class="c"><!--</span> <span class="nx">Attach</span> <span class="nx">collision</span> <span class="nx">handler</span> <span class="nx">animations</span><span class="p">.</span> <span class="o">--></span>
<span class="o"><</span><span class="nx">a</span><span class="o">-</span><span class="nx">animation</span> <span class="nx">attribute</span><span class="o">=</span><span class="s2">"opacity"</span> <span class="nx">begin</span><span class="o">=</span><span class="s2">"collider-hit"</span> <span class="nx">dur</span><span class="o">=</span><span class="s2">"400"</span> <span class="nx">ease</span><span class="o">=</span><span class="s2">"linear"</span>
<span class="nx">from</span><span class="o">=</span><span class="s2">"1"</span> <span class="nx">to</span><span class="o">=</span><span class="s2">"0"</span><span class="o">><</span><span class="sr">/a-animation</span><span class="err">>
</span> <span class="o"><</span><span class="nx">a</span><span class="o">-</span><span class="nx">animation</span> <span class="nx">attribute</span><span class="o">=</span><span class="s2">"scale"</span> <span class="nx">begin</span><span class="o">=</span><span class="s2">"collider-hit"</span> <span class="nx">dur</span><span class="o">=</span><span class="s2">"400"</span> <span class="nx">ease</span><span class="o">=</span><span class="s2">"linear"</span>
<span class="nx">to</span><span class="o">=</span><span class="s2">"0 0 0"</span><span class="o">><</span><span class="sr">/a-animation</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/a-image</span><span class="err">>
</span> <span class="p">{</span> <span class="o">%</span> <span class="nx">endfor</span> <span class="o">%</span><span class="p">}</span>
<span class="o"><</span><span class="sr">/a-entity</span><span class="err">>
</span> <span class="nt"></script></span>
<span class="c"><!-- Attach collider that targets enemies. --></span>
<span class="nt"><a-mixin</span> <span class="na">id=</span><span class="s">"laser"</span> <span class="na">geometry=</span><span class="s">"primitive: cylinder; radius: 0.05; translate: 0 -2 0"</span>
<span class="na">material=</span><span class="s">"color: green; metalness: 0.2; opacity: 0.4; roughness: 0.3"</span>
<span class="na">projectile=</span><span class="s">"speed: -0.5"</span> <span class="na">collider=</span><span class="s">"target: .enemy"</span><span class="nt">></a-mixin></span>
<span class="nt"></a-assets></span>
</code></pre>
</div>
<p>Y ahí tenemos una escena interactiva básica completa en A-Frame que puede verse en VR. Empaquetamos potencia en componentes que nos permiten construir de forma declarativa escenas sin perder el control o la flexibilidad. El resultado: un rudimentario juego FPS que soporta la RV en última instancia, con <strong>sólo 30 líneas de código HTML</strong>:</p>
<iframe height="266" scrolling="no" src="//codepen.io/team/mozvr/embed/reaXNr/?height=266&theme-id=dark&default-tab=html,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href="http://codepen.io/team/mozvr/pen/reaXNr/">Laser Shooter - Final</a> by Mozilla VR (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.
</iframe>
<h3 id="comunidad">Comunidad</h3>
<p>La comunidad ha construido algunas grandes cosas con sólo la versión inicial de A-Frame. Echa un vistazo a lo que se ha compartido en <a href="http://aframevr.tumblr.com/">Made With A-Frame</a> y <a href="https://github.com/aframevr/awesome-aframe">Awesome A-Frame</a>.</p>
<p>Estamos todo el rato en el <a href="https://aframevr-slack.herokuapp.com/">Slack de A-Frame</a>, que actualmente cuenta con casi 350 personas. Juega con <a href="https://aframe.io/">A-Frame</a> y ven a decirnos lo que piensas! La realidad virtual está llegando, y no te la querrás perder.</p>
<p><a href="http://mozillaSv.github.io/tutoriales/construye-la-realidad-virtual-en-la-web-con-a-frame/">Construye La Realidad Virtual en La Web Con A-Frame</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on April 14, 2016.</p>
http://mozillaSv.github.io/tutoriales/mi-primera-app-con-nickel-rs-y-rust2016-03-02T15:37:21+00:002016-03-02T15:37:21+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<h1 id="mi-primera-app-con-nickel-y-rust">Mi primera app con Nickel y Rust</h1>
<p>Nickel.rs es un framework web para utilizar <a href="https://www.rust-lang.org/">Rust</a> y crear aplicaciones que podamos visualizar y correr en nuestro navegador web, en este tutorial veremos un ejemplo sencillo en el que crearemos un clásico “hello world” con rust y podremos correrlo en nuestro navegador Firefox, en un <a href="http://mozillasv.github.io/tutoriales/hola-mundo-con-rust/">tutorial pasado</a> vimos algunos detalles sobre rust, su instalación y también conceptos que pueden servir para dar tus primeros pasos en este grandioso lenguaje desarrollado por Mozilla.</p>
<hr />
<h2 id="iniciemos">Iniciemos</h2>
<p>Primero vamos a crear un proyecto con <a href="http://doc.crates.io/index.html">Cargo</a>, que es un administrador de paquetes para Rust, vamos a instalar lo necesario para que nuestra app funcione.</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>cargo new nickel-demo --bin <span class="o">&&</span> <span class="nb">cd </span>nickel-demo
</code></pre>
</div>
<blockquote>
<p><b>Nota:</b></p>
<ul>
<li>Con este comando hemos creado un directorio y también la estructura inicial de nuestro proyecto.</li>
</ul>
</blockquote>
<h4 id="-cargotoml"><i class="icon-file"></i> Cargo.toml</h4>
<p>El archivo Cargo.toml es el manifiesto que describe todas las dependencias de la aplicación y también le dice a Cargo cómo construir el proyecto.</p>
<div class="language-toml highlighter-rouge"><pre class="highlight"><code><span class="nn">[dependencies]</span>
<span class="py">nickel</span> <span class="p">=</span> <span class="s">"*"</span>
</code></pre>
</div>
<p>Nuestro archivo Cargo.toml debe tener la siguiente estructura:</p>
<div class="language-toml highlighter-rouge"><pre class="highlight"><code><span class="nn">[package]</span>
<span class="py">name</span> <span class="p">=</span> <span class="s">"my-demo"</span>
<span class="py">version</span> <span class="p">=</span> <span class="s">"0.0.1"</span>
<span class="py">authors</span> <span class="p">=</span> <span class="p">[</span><span class="s">"Your Name <your.name@somewhere.com>"</span><span class="p">]</span>
<span class="nn">[dependencies]</span>
<span class="py">nickel</span> <span class="p">=</span> <span class="s">"*"</span>
</code></pre>
</div>
<blockquote>
<p>Puedes editar el archivo y agregarle un nombre, una versión y el nombre del desarrollador.</p>
</blockquote>
<h4 id="-mainrs"><i class="icon-file"></i> main.rs</h4>
<div class="language-rust highlighter-rouge"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
<span class="nd">println!</span><span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Inicialmente nuestro archivo main.rs trae la sintaxis básica de un hola mundo, pero vamos a modificarlo con el siguiente código para poder ejecutarlo desde la web.</p>
<div class="language-rust highlighter-rouge"><pre class="highlight"><code><span class="err">#</span><span class="p">[</span><span class="n">macro_use</span><span class="p">]</span> <span class="k">extern</span> <span class="n">crate</span> <span class="n">nickel</span><span class="p">;</span>
<span class="k">use</span> <span class="nn">nickel</span><span class="p">::</span><span class="n">Nickel</span><span class="p">;</span>
<span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
<span class="k">let</span> <span class="k">mut</span> <span class="n">server</span> <span class="o">=</span> <span class="nn">Nickel</span><span class="p">::</span><span class="nf">new</span><span class="p">();</span>
<span class="n">server</span><span class="nf">.utilize</span><span class="p">(</span><span class="nd">router!</span> <span class="p">{</span>
<span class="n">get</span> <span class="s">"**"</span> <span class="k">=></span> <span class="p">|</span><span class="n">_req</span><span class="p">,</span> <span class="n">_res</span><span class="p">|</span> <span class="p">{</span>
<span class="s">"Hola Mozilleros!"</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="n">server</span><span class="nf">.listen</span><span class="p">(</span><span class="s">"127.0.0.1:6767"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<h4 id="-el-código"><i class="icon-pencil"></i> El código</h4>
<p>Con este sencillo ejemplo hemos creado una pequeña aplicación que podemos ejecutarla en nuestro navegador web, hemos creado la sintaxis que servirá para que Nickel pueda ejecutar un servidor local y poder mostrar nuestro hola mundo, genial no?<br />
Pero falta lo más interesante y es como vamos a ejecutar nuestra aplicación y utilizaremos los siguientes comandos:
(<i>recuerda que esto debes ejecutarlo dentro del directorio de tu aplicación</i>)</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>cargo build
</code></pre>
</div>
<hr />
<p><strong>Cargo Build:</strong>
Se encargará de descargar todas las dependencias necesarias para que nuestro proyecto funcione correctamente.</p>
<hr />
<p><strong>Cargo run:</strong>
Este comando se encargará de poner en marcha nuestra aplicación en el servidor y puerto que le especificamos en el nuestro archivo Cargo.toml</p>
<hr />
<p>Ahora tenemos nuestra app lista, solo debes abrir la siguiente dirección en tu navegador y listo!</p>
<div class="highlighter-rouge"><pre class="highlight"><code>http://localhost:6767
</code></pre>
</div>
<p>Genial! esto a sido todo, pero pronto habrá mucho más sobre Rust y veremos ejemplos un poco más complejos a medida de crear aplicaciones mucho más grandes.<br />
Puedes descargar este ejemplo <a href="https://github.com/mozillaSv/RustEjemploWeb">aquí</a>.</p>
<p>Documentación y enlaces que pueden interesarte:</p>
<ul>
<li><a href="https://www.rust-lang.org/">Rust</a></li>
<li><a href="http://rustbyexample.com/">Ejemplos con Rust</a></li>
<li><a href="http://nickel.rs/">Nickel.rs</a></li>
</ul>
<p><a href="http://mozillaSv.github.io/tutoriales/mi-primera-app-con-nickel-rs-y-rust/">Nickel.rs y Rust</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on March 02, 2016.</p>
http://mozillaSv.github.io/blog/mes-de-la-privacidad-en-la-red2016-01-28T15:46:10+00:002016-01-28T15:46:10+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<p>En nuestros esfuerzos para aumentar la alfabetización en la web y la autonomía de las futuras generaciones de ciudadanos en la web, mozilla continúa, el desarrollo de competencias con los intereses y los problemas que afectan a los estudiantes, tanto dentro como fuera de línea.</p>
<p>Enero es #PrivacyMonth, una <a href="http://www.educause.edu/focus-areas-and-initiatives/policy-and-security/educause-policy/community-engagement/data-privacy-day">campaña internacional</a> impulsada por la comunidad, y no hay mejor momento para enseñar y crear conciencia en torno a la privacidad en línea. Cuando la gente entiende más sobre la privacidad en línea y los pasos que pueden tomar para protegerla, estamos en una mejor posición para asegurar que la Internet continúa siendo un recurso mundial, público para todos.</p>
<blockquote>
<p>“Mes de privacidad es el primero de muchos pasos que vamos a tomar este año en un esfuerzo por capacitar a los usuarios de la web para proteger su privacidad y controlar su huella digital.” - <a href="https://reps.mozilla.org/u/ankitgadgil/">Ankit Gadgil, Mozilla Reps Council</a></p>
</blockquote>
<h2 id="cómo-puedes-involucrarte-en-privacymonth">¿Cómo puedes involucrarte en #PrivacyMonth?</h2>
<ul>
<li>Puedes enseñar a otros acerca de la privacidad con estos kit de enseñanza:
<ul>
<li><a href="https://teach.mozilla.org/activities/privacy-basics/">Aspectos básicos de privacidad: Contraseñas, rastreo y retención de datos</a>
<ul>
<li>Cuenta con 14 actividades, entre ellas <a href="https://chadsansing.github.io/curriculum-testing/expanded-privacy-curriculum/follow-your-trail.html">“Sigue Tu Camino de datos”</a>, una actividad práctica donde los alumnos exploran cómo se pueden recopilar grandes cantidades de datos sobre ellos a través de su movimiento en espacios reales y digitales.</li>
</ul>
</li>
<li><a href="https://d157rqmxrxj6ey.cloudfront.net/mozstacy/21938/">Aspectos básicos de privacidad: Seguimiento en línea 101</a>
<ul>
<li>Cuenta con 5 actividades, incluyendo <a href="https://chadsansing.github.io/curriculum-testing/expanded-privacy-curriculum/tracking-cookies.html">“Rastreo de cookies con LightBeam”</a>, una actividad para saber y entender quién te está viendo en línea mientras navegas por la web.</li>
</ul>
</li>
<li><a href="https://teach.mozilla.org/activities/protect-your-data/">Proteje tus datos</a>
<ul>
<li>Cuenta con 6 actividades, incluyendo <a href="http://mozilla.github.io/webmaker-curriculum/ProtectingYourData/session02-secure-passwords.html">“Dibuja contraseñas seguras”</a>, una actividad en la que los alumnos generan contraseñas, contraseñas pronunciables y aleatorias basadas en buenas prácticas.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Corre la voz en Facebook y Twitter. Asegúrate de utilizar los hashtags #PrivacyMonth y #Advocate4Privacy.</p>
</li>
<li>Únete a la conversación #PrivacyMonth en nuestro <a href="https://discourse.webmaker.org/t/january-privacy-month-campaign/450">foro de la comunidad</a>.</li>
</ul>
<p><em>Este es un artículo traducido, lee el artículo orginal <a href="https://blog.webmaker.org/teachable-moment-privacy-month">aquí</a>.</em></p>
<p><a href="http://mozillaSv.github.io/blog/mes-de-la-privacidad-en-la-red/">Mes de la Privacidad en la red</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on January 28, 2016.</p>
http://mozillaSv.github.io/eventos/mozdev-party2016-01-28T00:00:00+00:002016-01-28T00:00:00+00:00Mozilla El Salvadorhttp://mozillaSv.github.iomozillaelsalvador@gmail.com
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
a.link { border-bottom: none !important; }
a img.communities { width: 115px !important; margin: 10px; }
a img.sponsors { width: 115px !important; margin: 10px; }
p.center { text-align: center; }
</style>
<p>Ven y participa en el MozDev Party, donde podrás aprender sobre el desarrollo con tecnologías libres</p>
<h3 id="agenda">Agenda:</h3>
<p>– Ionic: “Back-End para móviles” <br />
– Mozilla: “¿Qué es el proyecto Open Badges de Mozilla?” <br />
– Nodebots: “Robótica sencilla con NodeJS” <br />
– Docker: “Dockerizando web apps”</p>
<p><strong>Fecha:</strong> Sábado 13 de Febrero de 2016<br />
<strong>Hora:</strong> de 9:00am - 4:00 pm<br />
<strong>Formulario de Registro:</strong> <a href="http://goo.gl/forms/5ajFbL3n9W">http://goo.gl/forms/5ajFbL3n9W</a> <br />
<strong>Evento en Facebook:</strong> <a href="http://on.fb.me/1X3mnRo">http://on.fb.me/1X3mnRo</a> <br />
<strong>Evento en Meetup:</strong> <a href="http://bit.ly/1R28Mcy">http://bit.ly/1R28Mcy</a> <br />
<strong>Lugar:</strong> Hub170<br />
<strong>Dirección:</strong> Calle Lorena y Calle Roma #170, San Salvador<br />
<strong>Como llegar:</strong> <br /></p>
<div class="embed-container"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.4023145238625!2d-89.22911168576049!3d13.694066502319666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f633047ec2877a7%3A0x3e44610a8c5c1e83!2sHub170!5e0!3m2!1ses!2sus!4v1454003062341" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe></div>
<h3 id="invita">Invita:</h3>
<p class="center"><a class="link" href="http://mozillasv.github.io/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1454003577/logos/mozsv.png" alt="Mozilla El Salvador" style="height:150px;" /></a></p>
<h3 id="comunidades-invitadas">Comunidades Invitadas:</h3>
<p class="center">
<a class="link" href="http://www.meetup.com/es-ES/Docker-El-Salvador/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1454003578/logos/docker-sv.png" alt="Docker El Salvador" class="communities" /></a>
<a class="link" href="https://github.com/ionicsv" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1454003578/logos/ionic-sv.png" alt="Ionic El Salvador" class="communities" /></a>
<a class="link" href="http://nodebots-sv.github.io/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1454003578/logos/nodebots-sv.png" alt="NodeBots El Salvador" class="communities" /></a></p>
<p><br /><br /></p>
<h3 id="patrocinadores">Patrocinadores:</h3>
<p class="center">
<a class="link" href="http://www.hub170.com/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1455560107/logos/hub170.png" alt="Hub170" class="sponsors" /></a>
<a class="link" href="https://webslinder.com/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1455559353/logos/webslinder.png" alt="Webslinder" class="sponsors" /></a>
<a class="link" href="http://facebook.com/LabCT-939901992733891/" target="_blank"><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1455560106/logos/LabCT.png" alt="LabCT" class="sponsors" /></a></p>
<p><a href="http://mozillaSv.github.io/eventos/mozdev-party/">MozDev Party</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on January 28, 2016.</p>
http://mozillaSv.github.io/tutoriales/hola-mundo-con-rust2016-01-14T15:57:37+00:002016-01-14T15:57:37+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<p>Rust es el nuevo lenguaje de programación que se centra en el rendimiento, la paralelización, y la seguridad de la memoria.</p>
<p>Con la construcción de un lenguaje a partir de cero más la integración de elementos de lenguaje de programación moderno, Rust es capaz de fusionar la sintaxis expresiva y flexibilidad de lenguajes de alto nivel con el control sin precedentes y el rendimiento de un lenguaje de bajo nivel.</p>
<p>Rust es desarrollado por Mozilla de una forma totalmente libre por lo cual podemos contribuir u opinar acerca de este lenguaje en su <a href="https://github.com/rust-lang/rust">Repositorio en Github</a>.</p>
<p>Rust nos permite crear aplicaciones desde la parte del cliente y también en el servidor, en cuanto a sintaxis podemos encontrar similitudes a otros lenguajes, con bloques de código delimitados por <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="p">}</span></code>, más estructuras de control como <code class="highlighter-rouge">if, for, do, while</code>.</p>
<p>En este post te mostramos como puedes instalar Rust en tu computadora y dar los primeros pasos para programar en este grandioso lenguaje, asi que ¡manos a la obra y veamos un poco de lo que debemos hacer!</p>
<h2 id="instalemos-rust">Instalemos Rust:</h2>
<p>Puedes instalar Ruts en una computadora con GNU/Linux, Mac o Windows con los siguientes comandos:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>curl -f -L https://static.rust-lang.org/rustup.sh -O
</code></pre>
</div>
<blockquote>
<p><strong>Nota:</strong> Este comando nos descarga rust en el directorio en que nos encontremos</p>
</blockquote>
<p>Luego para su instalación ejecutamos:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sh rustup.sh
</code></pre>
</div>
<p>Listo! Para asegurarnos que la instalación fue exitosa podemos comprobar con el siguiente comando, el cual nos mostrará la version de Rust instalada en nuestra computadora:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>rustc --version
</code></pre>
</div>
<blockquote>
<p><strong>Nota:</strong> Si lo instalas en windows puedes descargar el instalador apropiado en <a href="https://www.rust-lang.org/install.html">aquí</a>.<br />
Ten en cuenta que el instalador en windows no toma por defecto el PATH para que puedas utilizar Rust desde línea de comandos, para ello en la instalación debes hacer lo siguiente:<br />
– En el diálogo de la Instalación, haz clic en opciones avanzadas<br />
– Luego en “características del producto”<br />
– Seguido, la opción “añadir a PATH” e instalarlo en tu disco local.</p>
</blockquote>
<h2 id="hola-mundo">“Hola Mundo!”</h2>
<p>Ahora que ya tenemos Rust en nuestra computadora, creemos nuestro primer “Hola mundo” con Rust. Veamos la sintaxis y cómo ejecutaremos nuestro código:</p>
<ul>
<li>
<p>Creamos un directorio nuevo donde se guardará nuestro script de Rust y entramos a él:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>mkdir hello_MozSV
<span class="gp">$ </span><span class="nb">cd </span>hello_mozSV
</code></pre>
</div>
</li>
<li>
<p>Ahora creamos nuestro archivo fuente el cual contendrá el código, al que llamaremos <code class="highlighter-rouge">hello_mozSV.rs</code></p>
</li>
</ul>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>touch hello_MozSV.rs
</code></pre>
</div>
<blockquote>
<p>Se crea el archivo con extensión .rs ya que hace referencia a que es un archivo de Rust.</p>
</blockquote>
<p>Luego en el archivo que hemos creado escribiremos el siguiente código:</p>
<div class="language-rust highlighter-rouge"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
<span class="nd">println!</span><span class="p">(</span><span class="s">"Hola, Mozilleros de EL Salvador!"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Guardamos nuestro archivo y dentro del directorio ejecutamos:</p>
<p><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1452792886/MozSV/tuto.png" alt="figure01" /></p>
<p>Esto nos creará un archivo compilado que podremos ejecutar de la siguiente manera:</p>
<p><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1452792886/MozSV/tuto2.png" alt="figure02" /></p>
<blockquote>
<p>Es importante que tengamos en cuenta que por cada cambios que hagamos en nuestro script, primero debemos ejecutar el comando:<br />
<code class="highlighter-rouge">$ rustc nombre_del_archivo.rs</code><br />
Para que luego podamos ver los cambios con solo ejecutar<br />
<code class="highlighter-rouge">$ ./archivo</code></p>
</blockquote>
<p>Ahora veamos un poco de detalles de lo que acabamos de hacer.</p>
<p>Con el siguiente trozo de código se define una función con Rust, la función principal de todo programa en Rust:</p>
<div class="language-rust highlighter-rouge"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">main</span><span class="p">(){</span>
<span class="c">//content</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Las líneas de codigo que hacen todo el trabajo en un programa con Rust van dentro de esa función, en nuestro caso sería:</p>
<div class="language-rust highlighter-rouge"><pre class="highlight"><code><span class="nd">println!</span><span class="p">(</span><span class="s">"Hola, Mozilleros de EL salvador!!"</span><span class="p">);</span>
</code></pre>
</div>
<p>Pero existen detalles muy importantes que debemos tomar en cuenta como lo es el primero, a la hora de escribir codigo dentro de funciones <strong>debes usar sangría con cuatro espacios, no tabs</strong>, puedes ver como configurar algunos editores <a href="https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md">aquí</a>.</p>
<p>Lo segundo es la parte <code class="highlighter-rouge">println!( //content )</code>, esto se llama <strong>macro</strong> en Rust, que es como <a href="https://es.wikipedia.org/wiki/Metaprogramaci%C3%B3n">metaprogramación</a>, en esta parte no es necesario preocuparnos por esto, ya que iremos aprendiendolo poco a poco.</p>
<p>Lo tercero se trata del comando <code class="highlighter-rouge">$ rustc archivo.rs</code> que sirve para compilar nuestro programa como se mencionó anteriormente, <strong>debemos ejecutarlo cada vez que hagamos cambios en el archivo</strong>.</p>
<p>Con esto encontraremos dos archivos en nuestro directorio, uno con el código fuente de nuestro programa (source) y otro como un ejecutable (binario).</p>
<blockquote>
<p>El ejecutable podemos compartirlo con otras personas para que lo ejecuten sin la necesidad que tenga instalado Rust para poder usarlo.</p>
</blockquote>
<p>Listo! hemos creado nuestro primer programa con Rust, si quieres probar el codigo puedes copiarlo desde <a href="https://gist.github.com/EnriqueV/653a5dc6a2060d27b4d8">aqui</a> además también puedes ejecutarlo en <a href="https://play.rust-lang.org/">Rust Playground</a></p>
<p>¡Hasta la próxima!</p>
<p><a href="http://mozillaSv.github.io/tutoriales/hola-mundo-con-rust/">Hola Mundo Con Rust</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on January 14, 2016.</p>
http://mozillaSv.github.io/blog/firefox-developer-edition2016-01-03T00:11:26+00:002016-01-03T00:11:26+00:00Andrés Godínezhttp://mozillaSv.github.iopistilloagodinez@gmail.com
<p>Firefox Developer Edition es una versión de Firefox adaptada para desarrolladores, ha sido creada teniendo en cuenta el flujo de trabajo de muchos desarrolladores en la cual se puede desarrollar, testear, escalar y mucho más desde el mismo lugar, simplificando el proceso de desarrollo web, ya sea de aplicaciones web para escritorio o para aplicaciones web móviles.</p>
<p>Además usa un perfil separado de las otras versiones de Firefox instaladas en la computadora. Esto hace que se pueda intercambiar más facilmente entre las versiones liberadas o las betas de Firefox.</p>
<p>Al usar Firefox Developer Edition, se tiene acceso a las herramientas y a las características de la plataforma al menos 12 semanas antes de que lleguen a liberarse en el rama principal de Firefox. Todo esto debido a que Developer Edition sustituye al canal Aurora en el proceso de liberación de versiones de Firefox, por lo tanto las características se lanzan cada seis semanas, después de que se hayan estabilizado en Nightly builds.</p>
<p><img src="http://res.cloudinary.com/djpqkjsmr/image/upload/v1451785426/MozSV/screenshot-developer-edition.png" alt="Firefox Developer Edition" /></p>
<p>##Herramientas que ofrece</p>
<ul>
<li>
<p><strong>Borrador:</strong>
Un editor construido dentro de Firefox que te permite escribir, ejecutar JavaScript, inspeccionar objetos y guardar scripts.</p>
</li>
<li>
<p><strong>Editor de estilos:</strong>
Revisa, edita y crea estilos CSS para la página actual. (Los cambios son reflejados automáticamente en la página.)</p>
</li>
<li>
<p><strong>Editor de sombras:</strong>
Revisa y edita los vertex y fragmentos de sombras usado por WebGL.</p>
</li>
<li>
<p><strong>Audio Web:</strong>
Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.</p>
</li>
<li>
<p><strong>Inspector de página:</strong>
Revisa y modifica el HTML y CSS de la página. (Los cambios son reflejados automáticamente en la página.)</p>
</li>
<li>
<p><strong>Consola Web:</strong>
Mira mensajes de registro (logs), advertencias y errores CSS/JavaScript o de seguridad en una página web e interactua con la página usando JavaScript.</p>
</li>
<li>
<p><strong>Depurador:</strong>
Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose en una página.</p>
</li>
<li>
<p><strong>Monitor de red:</strong>
Mira las solicitudes de red hechas cuando una página está cargada.</p>
</li>
<li>
<p><strong>Inspector de Almacenamiento:</strong>
Inspecciona cookies, almacenamiento local, indexedDB y almacenamiento de sesión presente en una página.</p>
</li>
<li>
<p><strong>Barra de desarrollador:</strong>
Una interfaz de linea de comandos para el desarrollador.</p>
</li>
<li>
<p><strong>Capturar color:</strong>
Selecciona un color de la página.</p>
</li>
<li>
<p><strong>Seleccionar iframes:</strong>
Seleccionar un iframe en particular.</p>
</li>
<li>
<p><strong>WebIDE:</strong>
Es el reemplazo de App Manager. Al igual que App Manager, este permite ejecutar y debugear aplicaciones Firefox OS utilizando el Firefox OS Simulator o un dispositivo Firefox OS real. Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para Firefox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.</p>
</li>
<li>
<p><strong>Vista de diseño adaptable:</strong>
Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.</p>
</li>
<li>
<p><strong>Herramientas de rendimiento:</strong>
Diagnostica y arregla problemas de rendimiento.</p>
</li>
<li>
<p><strong>Valence:</strong>
Desarrolla y depura apps en múltiples navegadores y dispositivos.</p>
</li>
</ul>
<p><img src="https://mdn.mozillademos.org/files/10529/inspector.png" alt="Inspector" /></p>
<p><strong>Enlaces de interés:</strong></p>
<ul>
<li><a href="https://twitter.com/FirefoxDevTools">Firefox Developer Edition en Twitter</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools">Lo nuevo en Firefox Developer Edition</a></li>
</ul>
<p><a href="http://mozillaSv.github.io/blog/firefox-developer-edition/">Firefox Developer Edition</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on January 02, 2016.</p>
http://mozillaSv.github.io/tutoriales/mozilla-firefox-en-debian2015-09-08T21:08:34+00:002015-09-08T21:08:34+00:00Carlos Cárcamohttp://mozillaSv.github.iocarloscarcamo.m@gmail.com
<p>Como ya muchos sabemos, debian por defecto no trae Firefox sino un fork llamado Iceweasel, que no esta mal, pero como Mozilleros queremos en nuestro sistema el navegador Firefox así que vamos a instalarlo en Debian :)</p>
<p>Antes que nada mencionar que esta no es la única forma de instalar Mozilla Firefox en debian pero, esta es una de las formas más fáciles y rápidas de hacerlo.</p>
<p><strong>Nota:</strong> <em>en este tutorial estoy usando debian wheezy (old stable), pueda que este tutorial no funcione en debian Jessie (debian stable). Favor comentar abajo si funciona con Jessie.</em></p>
<p>Vamos a usar los repositorios de Linux Mint, procedamos de la siguiente manera:</p>
<p>Editamos el <strong>sources.list</strong></p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo nano /etc/apt/sources.list
</code></pre>
</div>
<p>Agregamos la siguiente linea:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code>deb http://packages.linuxmint.com debian import
</code></pre>
</div>
<p>Guardamos y actualizamos los repositorios</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo apt-get update
</code></pre>
</div>
<p>Si da un error como:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code>W: GPG error: http://packages.linuxmint.com debian Release: The following signatures couldnt be verified because the public key is not available: NO_PUBKEY 3EE67F3D0FF405B2
</code></pre>
</div>
<p>Vamos a importar el PUBKEY 3EE67F3D0FF405B2 como sigue:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo gpg --keyserver pgp.mit.edu --recv-keys 3EE67F3D0FF405B2
<span class="gp">$ </span>sudo gpg --export 3EE67F3D0FF405B2 > 3EE67F3D0FF405B2.gpg
<span class="gp">$ </span>sudo apt-key add ./3EE67F3D0FF405B2.gpg
<span class="gp">$ </span>sudo rm ./3EE67F3D0FF405B2.gpg
</code></pre>
</div>
<p>ahora volvemos a ejecutar</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo apt-get update
</code></pre>
</div>
<p>Listo! ya puedes instalar Mozilla Firefox en tu sistema</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo apt-get install firefox
</code></pre>
</div>
<p>Ahora tendrás instalado tanto Firefox como Iceweasel y podrás usarlos sin problemas, pero no trates de usarlos al mismo tiempo porque te dirá que ya estas ejecutando una instancia de Firefox. Si únicamente quieres tener Firefox en tu sistema, puedes remover Iceweasel</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo apt-get remove iceweasel
</code></pre>
</div>
<p>Por ultimo, si no vas a usar los repositorios de Linux Mint, recuerda quitar o comentar la linea en el <strong>sources.list</strong> y actualizar de nuevo tus repositorios con <code class="highlighter-rouge">sudo apt-get update</code> para tener todo como antes.</p>
<p><strong>Nota final:</strong> Con lo anterior también podemos instalar <a href="https://www.mozilla.org/en-US/thunderbird/">thunderbird</a> igual como instalamos Firefox:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>sudo apt-get install thunderbird
</code></pre>
</div>
<p><a href="http://mozillaSv.github.io/tutoriales/mozilla-firefox-en-debian/">Instalar Mozilla Firefox en Debian</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on September 08, 2015.</p>
http://mozillaSv.github.io/blog/firefox-hello2015-09-07T18:16:03+00:002015-09-07T18:16:03+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<p>Firefox Hello te permite hacer llamadas y videollamadas de forma gratuita y directamente desde el navegador. Lo único que necesitas es un micrófono, una webcam (opcional) y la última versión de Firefox para poder llamar a todos tus amigos que tengan navegadores que admiten WebRTC: Firefox, Chrome u Opera.</p>
<p>Firefox hello es un servicio de videollamadas listo para usarse desde el primer momento que abras tu navegador Mozilla Firefox, sin tener la obligación de crear cuentas o registrarte; es una herramienta de comunicación muy fácil de usar, basta con solo hacer un click en el botón hello de nuestra barra de herramientas del navegador y se abrirá una menú con un botón azul que dice “iniciar una nueva conversación” y se desplegará una ventana en la parte inferior derecha de tu navegador, en dicha ventana podrás observar los botones para activar/desactivar el micrófono y webcam. Algo muy importante que debemos conocer de firefox hello es que las videollamadas se comparten a través de enlaces para eso veremos dos botones azules que tienen las funciones de: enviarlo a traves de correo o copiarlo al portapapeles del sistema y por último en la zona central veremos la opción de ponerle un nombre a la conversación esto es algo de mucha utilidad ya que en futuras sesiones podremos buscar la conversión y acceder nuevamente a ella en caso contrario las que no tengan un nombre se borraran.</p>
<h2 id="qué-puedo-hacer-con-firefox-hello">¿Qué puedo hacer con firefox hello?</h2>
<p>Podemos realizar conversaciones por video llamada o chat de voz desactivando el video, además de eso es importante mencionar que la conversaciones son completamente seguras ya que utiliza las políticas de privacidad de Mozilla; cabe mencionar que firefox hello hasta el momento solo cuenta con el servicio de conversación para dos personas, también para iniciar una videollamada se debe hacer exclusivamente del navegador Firefox sin embargo, la persona invitada podrá conectarse desde otro navegador que soporte WEBRTC como Chrome u Opera.
Puedes usar firefox desde sistemas Windows, Gnu/linux y android.</p>
<p><strong>Video:</strong>
https://www.youtube.com/watch?v=TEPq4xFGzG0</p>
<p><strong>Enlaces de interés:</strong></p>
<ul>
<li>https://www.mozilla.org/es-ES/firefox/hello/</li>
<li>https://support.mozilla.org/es/kb/experimento-webrtc-de-firefox</li>
</ul>
<p><a href="http://mozillaSv.github.io/blog/firefox-hello/">Firefox Hello</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on September 07, 2015.</p>
http://mozillaSv.github.io/blog/lightbeam-para-firefox2015-08-25T20:53:06+00:002015-08-25T20:53:06+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<p><a href="https://www.mozilla.org/en-US/lightbeam/">LigthBeam</a> es un complemento para tu navegador Firefox con el que puedes ver el historial de tu navegación de forma gráfica, además de analizar quién está recopilando nuestros datos y cómo se produce el seguimiento a través de los sitios web que visitamos.</p>
<p>Hay muchas razones por las cuales somos rastreados o nos dan un seguimiento a través de la red; algunas de estas razones pueden ser válidas y otras en definitiva no lo son, es por ello que nuestra privacidad se vuelven de mucha importancia más cuando día a día hacemos uso de gran manera de el internet.</p>
<h2 id="conozcamos-un-poco-de-lightbeam">Conozcamos un poco de LightBeam</h2>
<p>Lightbeam es la <strong>evolución de un complemento denominado Collusion</strong>, un proyecto que comenzó un año atrás, en un intento de conocer cómo los sitios web a los que nos conectamos directamente gestionan la experiencia del visitante y rastrean sus datos, pero en el que Lightbeam va un poco más adelante y nos muestra la forma en como los sitios que visitamos tambien interactuan con otros sitio de terceros.</p>
<p>En la siguiente imagen se observa el historial de navegación de una forma gráfica:</p>
<p><img src="http://i.imgur.com/69D1bev.png" alt="LigthBeam" /></p>
<h2 id="funciones-de-ligthbeam">Funciones de LigthBeam</h2>
<p><strong>Graph</strong>: gráfica de actividad diaria, semanal, reciente o de los últimos diez sitios.</p>
<p><strong>List</strong>: tabla con información de los sitios visitados y los que realizan seguimiento.</p>
<p><img src="http://i.imgur.com/MGJA1BY.png" alt="List" /></p>
<p>Los datos obtenidos puedes guardarlos con la opción “save data”, la cual descarga un archivo .json con los datos de los sitios que has visitado, además de eso también puedes compartir esos datos, el objetivo es conocer de manera universal las herramientas y formas de rastreo utilizadas en la web.</p>
<p><strong>La interfaz de usuario es muy original (parte de la información se muestra con una pequeña animación)</strong> y trabajar con ella es agradable. Las distintas opciones están situados en una columna a la izquierda de la pantalla. Cada uno de estos cuenta con sus propios controles, situados en la zona inferior de las vistas. Los filtros, que se pueden ocultar para maximizar el área visual, matizan o resaltan la información visual.</p>
<p>Puedes descargar Ligthbeam desde <a href="https://addons.mozilla.org/en-US/firefox/addon/lightbeam/">Mozilla AddOns</a> la información que nos brinda el complemento es muy importante y nos permite contribuir a conocer la web de una mejor forma además de poder confiar en las webs que visitamos o simplemente escapar de las que envían nuestros datos a terceros.</p>
<p><a href="http://mozillaSv.github.io/blog/lightbeam-para-firefox/">Lightbeam Para Firefox</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 25, 2015.</p>
http://mozillaSv.github.io/blog/b2gdroid2015-08-22T00:20:33+00:002015-08-22T00:20:33+00:00Eduardo Valenciahttp://mozillaSv.github.iokalienrique40@gmail.com
<p>Como a muchos que vamos conociendo el sistema para móviles de mozilla nos ha interesado mucho poder probarlo y saber lo novedoso que es, así también nos gustaría poder conocerlo sin tener que comprar un nuevo móvil con el sistema ya que en caso poseemos un android y poder conocer Firefox OS antes de comprar un dispositivo nos servirá de mucha ayuda para decidir en hacer un cambio o no. Es por ello que te presentamos <a href="https://people.mozilla.org/~fdesre/b2gdroid/">B2gdroid</a> es una aplicación de tipo experimental que ayuda al usuario a usar GAIA (la interfaz de usuario de firefox os), como una pantalla de inicio alternativa, con ello puedes no solo tener el aspecto de firefox os en tu móvil sino también explorar una opción casi exacta lo que sería tener un firefox os en tu manos, en la que puedes entrar directamente al Marketplace y descargar las aplicaciones.
¿Como podemos disfrutar de esto? es facil y rapido!</p>
<ul>
<li>
<p>Primero solo debes habilitar la opción “Orígenes desconocidos” esta opción la encuentras en el menú : ajustes > seguridad > orígenes desconocidos.</p>
</li>
<li>
<p>Descargar el apk de B2gdroid, puedes descargarlo en el siguiente enlace: <a href="https://people.mozilla.org/~fdesre/b2gdroid/">b2gdroid</a></p>
</li>
<li>
<p>Instala el archivo apk en tu dispositivo.</p>
</li>
<li>
<p>Busca la opción de inicio en tu móvil (es como que instales un nuevo launcher), y listo veras como firefox os comienzan a funcionar!</p>
</li>
</ul>
<p>Tendras algo como esto:</p>
<p><img src="https://people.mozilla.org/~fdesre/b2gdroid/screenshot.png" alt="GAIA" /></p>
<p><a href="http://mozillaSv.github.io/blog/b2gdroid/">B2gdroid</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 21, 2015.</p>
http://mozillaSv.github.io/blog/hackeando-el-mundo-real-con-javascript2015-08-21T23:48:23+00:002015-08-21T23:48:23+00:00Richard Armuelleshttp://mozillaSv.github.io
<p>Javascript ha dejado de ser una simple tecnología auxiliar para crear bonitos efectos en sitios web, es más que eso. En el último <a href="http://ecsl2015.softwarelibre.ca">Encuentro Centroamericano de Software Libre</a> puede demostrar el poder de las tecnologías web actuales y de cómo podemos apoyarnos en ellas para hackear nuestro entorno.</p>
<p>Teniendo conciencia de que estamos rodeados de dispositivos con los que podemos interactuar de diferentes formas y que a su vez cuentan con un tamaño cada vez más pequeño, es una interesante idea utilizar nuestros smartphones como plataformas de desarrollo más que como simples medios para consumir información, todo esto apoyándonos del poder de la web abierta para lograr nuestros fines.</p>
<p>Llevo tiempo siguiendo el trabajo de <a href="http://janjongboom.com/">Jan Jongboom</a>, desarrollador de IoT para Telenor Digital. Su trabajo consiste en el uso de sensores en nuestros teléfonos para lograr nuevas formas de interacción todo a través de las capacidades que ofrece Firefox OS como plataforma de desarrollo para el Internet de las Cosas más que como plataforma móvil.</p>
<p>Mis dos primeros ejemplos presentados en el ECSL (el timbre para puertas y el theremin), se basan en sus propios ejemplos presentados en el JSConf Asia, de allí tomé la idea de <strong>conectar mis ejemplos a un servidor Node.js con websockets</strong>, primero porque aporta algo adicional y segundo porque va contra la norma de los “web stacks” basados en diferentes tecnologías por algo completamente hecho en Javascript.</p>
<p>Mi tercer ejemplo “art generative” obedece a mi interés por la música, por mezclar la generación de sonidos con el uso de sensores. Es un campo nuevo que apenas se está desarrollando y de hecho mi inspiración fue el proyecto <a href="http://mimugloves.com/">Mi.mu Gloves</a> el cual se sirve de una serie de sensores, cámaras y tecnologías para lograr que el artista tenga a su disposición una nueva forma de componer música. Me gustaría mucho lograr lo mismo pero a través del poder de la web. Hay mucho por desarrollar, webapis por mejorar y estándares por aprobar, pero en Mozilla estamos convencidos de que la web abierta es el camino para lograr nuevas experiencias.</p>
<p>Puedes ver, copiar, modificar y distribuir el material utilizado en mi <a href="https://github.com/kurai021/ECSL_2015">conferencia</a>, enviame tus preguntas y comentarios a mi correo y no olvides pasarte por el blog de <a href="http://mozillapanama.org/">Mozilla Panamá</a>.</p>
<p><a href="http://mozillaSv.github.io/blog/hackeando-el-mundo-real-con-javascript/">Hackeando El Mundo Real Con Javascript</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 21, 2015.</p>
http://mozillaSv.github.io/blog/vii-ecsl-honduras-20152015-08-12T18:50:28+00:002015-08-12T18:50:28+00:00Carlos Cárcamohttp://mozillaSv.github.iocarloscarcamo.m@gmail.com
<p>El pasado 7 y 8 de agosto se celebró en la ciudad de San Pedro Sula en Honduras el <a href="http://ecsl2015.softwarelibre.ca">VII ECSL</a>, evento que reúne a personas activistas del Software Libre de la región centroamericana el cual que se viene celebrando desde el 2009 y que año tras año viene creciendo y fomentando una filosofía que involucra aspectos éticos con el manejo de la información y desarrollo tecnológico a nivel mundial.</p>
<figure>
<a href="http://i.imgur.com/nDNyPx8.jpg?1">
<img src="http://i.imgur.com/nDNyPx8.jpg?1" alt="image" />
</a>
<figcaption>
Foto grupal, ECSL Hoduras 2015
</figcaption>
</figure>
<p>Mozilla no podía faltar a este encuentro, Mozilleros de diferentes países como Nicaragua, Panamá, Costa Rica, Honduras, El Salvador e incluso Argentina se hicieron presentes al encuentro para hablar y promover algunas de las tantas tecnologías de Mozilla.</p>
<p>Durante el evento, Mozilla estuvo organizando el Mozilla Party donde se impartieron charlas y talleres de temas variados como por ejemplo: HTML5, Firefox Developer Edition, Firefox OS, Mozilla Thunderbird, entre otras interesantes charlas.</p>
<p>Conocimos las nuevas características del nuevo y mejorado Navegador Firefox gracias a Ivan Zeledon de Nicaragua, aprendimos como crear firmas digitales y encriptar mensajes en thunderbird con Ibel Zuniga de Nicaragua, HTML5 gracias a David Gonzalez también de Nicaragua, vimos algunas interesantes características y cómo desarrollar aplicaciones interactivas con sensores en el Firefox OS gracias a Richard Armuelles de Panamá y Maneras de Colaborar con Mozilla y Firefox con Jorge Villalobos desde Costa Rica.</p>
<p>El Salvador también tuvo su participación de la mano del compañero <a href="http://enriquev.github.io/">Eduardo Valencia</a> quien habló sobre La seguridad en la red y cómo diferentes sitios web invaden y comparten nuestros datos privados en internet. Eduardo habló también sobre algunas excelentes herramientas y complementos para Firefox que pueden ser de gran utilidad para proteger nuestra privacidad como por ejemplo: <a href="https://addons.mozilla.org/en-Us/firefox/addon/ghostery/">Ghostery</a>, <a href="https://www.mozilla.org/es-ES/lightbeam/">Lightbeam</a> entre otras.</p>
<p>Desde Argentina, <a href="https://twitter.com/deimidis">Guillermo Movia</a>, Community Manager de Mozilla para Latinoamérica, también se hizo presente luego de un cansado viaje desde Argentina hasta Honduras, pese al retraso en su vuelo, Guillermo se incorporó al evento en la tarde del 7 de agosto y compartió con los demás Mozilleros y comunidad de software libre en general.</p>
<figure>
<a href="http://i.imgur.com/npHThil.jpg?1">
<img src="http://i.imgur.com/npHThil.jpg?1" alt="image" />
</a>
<figcaption>
Comunidad Mozilla
</figcaption>
</figure>
<p>La agenda de Mozilla para el evento constaba de charlas en el Mozilla Party y reunión general de coordinación con las comunidades de Mozilla de cada país. Cada comunidad habló de cómo están trabajando en su país, los retos que tienen para el futuro cercano y cómo atacar los posibles problemas que se puedan tener. Como miembros de Mozilla El Salvador y activistas del software libre en general, sin duda aprendimos mucho de la forma en que los demás compañer@s Mozilleros están trabajando en sus países para promover el software libre y atraer a más personas a este y pensamos poner en práctica las experiencias adquiridas de los demás compañer@s Centroamericanos.</p>
<p>El evento estuvo lleno de charlas, talleres y mesas de diálogo con temas variados desde robótica con hardware libre, hasta <a href="http://www.laprensa.hn/honduras/866845-410/buscan-replicar-programas-de-salud-de-el-salvador">Los programas de software libre en los sistemas de información del ministerio de Salud en El Salvador</a>. También tuvimos la oportunidad de conocer a <a href="https://en.wikipedia.org/wiki/Alexandre_Oliva">Alexandre Oliva</a> de Brasil quien trabaja como desarrollador en el compilador <a href="https://en.wikipedia.org/wiki/GNU_Compiler_Collection">GCC</a> desde 1993 hasta la fecha, Alex además mantiene el proyecto <a href="https://en.wikipedia.org/wiki/Linux-libre">Libre Linux</a> un fork del Kernel Linux puramente Libre.</p>
<figure>
<a href="http://i.imgur.com/T6Yx2Up.jpg?1">
<img src="http://i.imgur.com/T6Yx2Up.jpg?1" />
</a>
<figcaption>
Charla: Copiar y Compartir en Legítima Defensa Sociedad versus Industria de los Estados Unidos de Panico por Alexandre Oliva
</figcaption>
</figure>
<p>El próximo año, la sede del evento será el país hermano de Nicaragua, los compañer@s Mozilleros de Nicaragua estarán colaborando junto con otras comunidades en la organización de la octava edición del ECSL. Esperamos poder asistir y compartir de nuevo esta experiencia.</p>
<p>Para finalizar, agradecemos a Mozilla por la oportunidad que nos dio de poder asistir a este excelente evento en el que pudimos aprender mucho y que nos motiva a seguir trabajando difundiendo las tecnologías libres y la web abierta para todos y todas.</p>
<p><a href="http://mozillaSv.github.io/blog/vii-ecsl-honduras-2015/">VII Encuentro Centroamericano de Software Libre</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on August 12, 2015.</p>
http://mozillaSv.github.io/eventos/maker-party-el-salvador2015-07-11T00:00:00+00:002015-07-11T00:00:00+00:00Mozilla El Salvadorhttp://mozillaSv.github.iomozillaelsalvador@gmail.com
<p>Siempre queriendo mostrar tu lado creativo, ven a la PRIMERA MAKER PARTY de El Salvador. ÚNETE a la comunidad de Mozilla El Salvador y aprende sobre una la Web abierta y de todos. VEN SE PARTE DE LA FIESTA.</p>
<p>Sabias que desde su inauguración en 2012, La maker party se ha convertido en una de la fiesta de mayor celebración en Mozilla donde hacer y aprender acerca de la web es sobre lo que trata, aprender acerca de remezclar el uso de papel y tijeras con el conocimiento sobre HTML y más, es así como gente de todas las edades y de todos los orígenes se unen para explorar con alegría la cultura, la mecánica y la ciudadanía de la web.</p>
<p>¿Y tú que esperas para ser parte de un día de charlas y actividades guiadas al crecimiento de tú conocimiento en el desarrollo de un web para todos?, ¡Te Esperamos!</p>
<p><strong>Fecha:</strong> Domingo 19/07/2015<br />
<strong>Hora:</strong> de 9:00am - 4:00 pm<br />
<strong>Lugar:</strong> Centro Cultural de España en El Salvador<br />
<strong>Dirección:</strong> Calle La Reforma #166 Colonia San Benito, San Salvador<br />
<strong>Como llegar:</strong> <br /></p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.4151150636326!2d-89.23326174999998!3d13.693290000000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f63303a0eb80e1f%3A0xb030fd94193c0d9f!2sLa+Casa+Tomada!5e0!3m2!1sen!2s!4v1437003201167" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
<p><a href="http://mozillaSv.github.io/eventos/maker-party-el-salvador/">Maker Party El Salvador</a> was originally published by Mozilla El Salvador at <a href="http://mozillaSv.github.io">Mozilla El Salvador</a> on July 11, 2015.</p>