Enlaces y recursos javascript

Enlaces y recursos

Formato para agregar recursos a este archivo:

Número

#Tags

Descripción

Enlace

1

#nodejs #online #editor

Permite compilar y ejecutar scripts de node.js online, consola incluida

http://www.tutorialspoint.com/execute_nodejs_online.php

http://www.node-console.com/script/code

2

#firefoxOS #html5 #javascript #miriadax

Videos del curso anterior de HTML5, Javascript y FirefoxOS apps

https://www.youtube.com/user/FirefoxOSHTML5/playlists

3

#firefoxOS #html5 #javascript #miriadax

Transparencias y recursos del curso anterior de HTML5, Javascript y FirefoxOS apps

https://mega.co.nz/#F!hNNhGKzQ!J2k6CoyghvoJN8-6-pCDAA

4

#firefoxOS #html5 #javascript #miriadax

Scripts del curso anterior de HTML5, Javascript y FirefoxOS apps con posibilidad de ejecutar y modificar

http://vishub.org/categories/43

5

#firefoxOS #html5 #javascript #miriadax

Prácticas obligatorias del curso anterior de HTML5, Javascript y FirefoxOS apps

http://bit.ly/1HbXfhm

http://bit.ly/1Pt92Sl

6

#framework #IoT #cylon #robótica #nodejs

Framework para programar dispositivos de hardware (robótica, Internet de las Cosas, Arduino…)

http://cylonjs.com/

7

#IoT #tessel #robótica #nodejs

Placa programable en nodejs para proyectos de Internet de las Cosas

https://tessel.io/

8

#general #ebook

Biblioteca Libre online (ebooks gratuitos)

http://www.etnassoft.com/biblioteca/

http://www.wowebook.com/

http://it-ebooks.info/

9

#javascript #tutorial #ebook

Programación en Javascript, desde introducción hasta aplicaciones

http://eloquentjavascript.net/

http://it-ebooks.info/book/705/

10

#unix #tutorial #linux

Guía básica de UNIX y Linux

http://www.ee.surrey.ac.uk/Teaching/Unix/

11

#javascript #tutorial #video

Videotutoriales sobre programación en Javascript

12

#ubuntu #virtualbox #vm

Instalación de Ubuntu 14.04 desde Windows con una máquina virtual en VirtualBox

13

#software #virtualbox #vm

Descarga de VirtualBox

https://www.virtualbox.org/wiki/Downloads

14

#software #ubuntu

Descarga de Ubuntu versión de escritorio

http://www.ubuntu.com/download/desktop

15

#software #nodejs

Descarga de Node.js (código fuente e instalador)

https://nodejs.org/

16

#software #mongodb

Descarga de MongoDB

https://www.mongodb.org/

17

#cloud9 #online #editor #ubuntu

IDE montado en un espacio de trabajo de Ubuntu en la nube. Permite el uso de comandos de linux.

https://c9.io/

18

#software #vm

Crea y configura ambientes de desarrollo portables, ligeros y reproducibles en varios equipos.

https://www.vagrantup.com/

19

#API #RESTful #JSON

Permite construir y gestionar de una forma cómoda las peticiones a servicios REST (Post,Get,etc)

https://www.getpostman.com/

20

#Regex

Editor y conversor de expresiones regulares

http://www.regexr.com/

21

#git #svn

Control de versiones

https://github.com/

https://gitlab.com/users/sign_in (repositorios privados)

https://www.sourcetreeapp.com/ (Muy Buen cliente GUI para manejar repositorios Git )

22
#nodejs #tutorial #ebook
El libro para principiantes de node.js

http://www.nodebeginner.org/index-es.html

23
#nodejs #eclipse
Integración de node.js al espacio de trabajo de eclipse

http://www.nodeclipse.org/updates

24
#web #nodejs #video #tutorial
Videos de codigofacilito.com sobre programación web, incluye node.js

https://www.youtube.com/playlist?list=PLpOqH6AE0tNjh_agCrY02NISwODL2XBWL

25
#manual #node #koans #pdf #github
-Libro de Introducción a node.js a tráves de Koans

http://www.eternoalumno.com/introduccion-a-node-js/

-Código de los ejemplos ( versión reducida del protocolo RTP, clon de Twitter, juego Top Memory,etc)

https://github.com/arturomtm/nodejskoans

26
#hosting #php #mysql
Alojamiento Gratuito. Sin publicidades en las páginas.

http://www.hostinger.es/hosting-gratis

Publicado en JAVASCRIPT | Deja un comentario

Status code SERVER

Status code

Publicado en Sin categoría | Deja un comentario

MVC with slim framework example

<ol>

<li><a href=”https://github.com/xsanisty/SlimStarter”>Slim example</a></li>

<li><a href=”http://help.slimframework.com/discussions/questions/1127-new-to-slim-need-some-mvc-coding-samples-to-develop-my-first-project-using-slim-framework-and-mvc”>MVC forum</a></li>

</ol>

Publicado en frameworks, PHP | Deja un comentario

Enlaces interesante y complementaria android

Enlaces interesantes y documentación complementaria

Creación de themes, colores, y drawables para aplicaciones

- http://romannurik.github.io/AndroidAssetStudio/

El mayor foro técnico sobre desarrollo en Android

- http://stackoverflow.com/questions/tagged/android

Librerías para incluir en proyectos

- http://www.androidviews.com/

Página oficial de Android Developer en Google Plus

- https://plus.google.com/+AndroidDevelopers/posts

Página con tutoriales y recursos para el desarrollo Android

- http://www.vogella.com/tutorials/android.html

Página web sobre Java, recursos, tutoriales, noticias

- http://www.javahispano.org/

Página de una de las librerías para SQLite en Android más importantes

- http://greendao-orm.com/

Pagina oficial de Android

- http://www.android.com

Página oficial del plugin oficial de Android para Eclipse

- http://developer.android.com/tools/sdk/eclipse-adt.html

Código de cientos de librerías, aplicaciones y recursos para el desarrollo Android

- https://github.com/android

Google Play política de aplicaciones https://play.google.com/intl/ALL_es/about/developer-content-policy.html

Notificaciones push en Android http://androidsensei.net/notificaciones-push-en-android-sin-sudor-ni-dolor-ni-lagrimas-con-parse/#.U4cfaJR_vms

Diseño de interfaces en Android https://www.slideshare.net/slideshow/embed_code/11674633?rel=0#

Desarrollo de interfaces dinámicas en Android con XML http://www.ibm.com/developerworks/ssa/xml/tutorials/x-andddyntut/

Como subir aplicaciones a Google Play https://support.google.com/googleplay/android-developer/answer/113469?hl=es

Publicado en ANDROID | Deja un comentario

Página web android developers

Android developers

Publicado en ANDROID | Deja un comentario

Pagina JORGE SANCHEZ

pagina web jorge sanchez.net

Publicado en Sin categoría | Deja un comentario

Bootstrap template

Bootstrap template

Publicado en bootstrap | Deja un comentario

pagina jorgesanchez.net

JorgeSanchez.net

Publicado en Sin categoría | Deja un comentario

PRESTAMOS DE LIBROS ELECTRONICOS EBIBIBLIO

Enlace a los presamos de libros electronicos ebiblio

Publicado en Sin categoría | Deja un comentario

Libros arduino a descargar

Libros a descargar

Publicado en ARDUINO | Deja un comentario

pdfs a descargar ISSU

ISSU

Publicado en Sin categoría | Deja un comentario

PDFS a descargar

PDFS a descargar

Publicado en Sin categoría | Deja un comentario

PROYECTOS SLIM

  1. 1
  2. 2
Publicado en FRAMEWORK PHP SLIM | Deja un comentario

SLIM

SLIM

Publicado en FRAMEWORK PHP SLIM | Deja un comentario

CODEACADEMY

PROGRAMACION INTERACTIVA

Publicado en Sin categoría | Deja un comentario

Programación

Code.org

Publicado en Sin categoría | Deja un comentario

REDES

REDES

Publicado en Sin categoría | Deja un comentario

CURSO DE MS-DOS

m dos by Charles Salcedo

Publicado en Sin categoría | Deja un comentario

REDES

Portal sobre redes

Publicado en Sin categoría | Deja un comentario

ingles pagina buena

http://englishpreintermediate.weebly.com/grammar.html

https://elt.oup.com/student/englishfile/preint3/grammar/file02/grammar02_a01?cc=global&selLanguage=en

Publicado en INGLES, Sin categoría | Deja un comentario

Crear una página separada para post in wordpress

como crear una página separa for post in wordpress

Publicado en wordpress | Deja un comentario

cheatsheet html5 attributes

https://www.w3.org/2009/cheatsheet/

Publicado en HTML5 | Deja un comentario

Exportar datos de em-client a thunderbird

Exportar dtos de correo de em-cliente a thunderbird

 

 

Export data from em-client to thunderbird

Publicado en servidores de correo | Deja un comentario

migrar wordpress de remoto a local

http://www.wpbeginner.com/wp-tutorials/how-to-move-live-wordpress-site-to-local-server/

Publicado en wordpress | Deja un comentario

Curso html5 parte 1 offline

W3C_HTML5 parte 1 curso offline

Publicado en Sin categoría | Deja un comentario

Example pages well structured with microdata

Examples of well structured pages with Microdata

Here, we propose a few links to Web pages that were created by students of previous editions of this course (from W3C’s W3DevCampus classrooms).

The students had to create a Web page to introduce themselves, with some information including: name, job, employer, location, etc., and of course enrich the page with microdata. They also had to follow the best practices concerning the new structural elements, headings, etc.

Click on these pages and look at the source code…

FIRST EXAMPLE

Visit the online page: http://output.jsbin.com/wozoye

Structure:

picture of the first about me page example. Shows the table of content

Microdata:

microdata from the example page

SECOND EXAMPLE

Visit the online page: http://output.jsbin.com/buriqi/35

Example page, shows table of content

THIRD EXAMPLE

Visit the online page: http://www.webbem.nl/

Third page example

Publicado en HTML5 | Deja un comentario

Example: fill a form’s address fields automatically

INTRODUCTION

In the previous example, we used the results returned by the Google reverse geocoding service, without going into detail.

In this section, we will see how we can get the different parts of the responses (city, street, zip code, country, etc.) The reverse geocoding service tries to guess what is the “best” address that matches the longitude and latitude, but sometimes the first guess is not the best one.

HOW TO PARSE THE GOOGLE REVERSE GEOCODING RESULTS?

What are the Google reverse geocoding results exactly?

A common question is: how to have a robust code for parsing the Google reverse geocoding, to properly get the city, street, country, etc.

Depending on your location/country and on the geolocation method used by your browser (GPS on phone, IP, WiFi, 3G, etc.), some of the data might not be available (i.e., no street). So, there is no guarantee that all candidate addresses will get the same defined properties. For example, the first result may give a defined city, but the third result may not.

Look at this line of code from the last example from the previous page - the example that showed the address when you clicked on the button:

  1. // Display address as text in the page
  2. myAddress.innerHTML=”Adress: “ + results[0].formatted_address;

 

At line 2, we get the first address returned by the Google reverse geocoding service, and use theformatted_address property. Let’s suppose that it contained the best address, formatted as a string. We chose to use it and showed it in the page by setting myAddress.innerHTML with its value (myAddress pointed to the <p id=”address”></p> element in the page).

Let’s examine the detailed results

We add a console.dir(results) in the code, to see a structured view of the results in dev. tools console:

devtool console shows details about results

Once we get the results, we can get the different parts:

Here is an example of how we can parse such a field. Notice that each field is tested to see if it exists. The results are stored in the variables defined at line 1.

  1. var country, postalCode, state, route, streetNumber, locality, areaLvl1,areaLvl2;
  2.  function parseResult(result) {
  3.      for(i in result){
  4.          console.log(“type = “ + result[i].types[0] + ” long_name = “ +
  5.                      result[i].long_name);
  6.          if(result[i].types[0] == ’postal_code’)
  7.              postalCode = result[i].long_name;
  8.          if(result[i].types[0] == ’country’)
  9.              country= result[i].long_name;
  10.          if(result[i].types[0] == ’street_number’)
  11.              streetNumber= result[i].long_name;
  12.          if(result[i].types[0] == ’route’)
  13.              route= result[i].long_name;
  14.          if(result[i].types[0] == ’locality’)
  15.              locality= result[i].long_name;
  16.          if(result[i].types[0] == ’state’)
  17.              state= result[i].long_name;
  18.          if(result[i].types[0] == ’administrative_area_level_2′)
  19.              arealLvl2= result[i].long_name;
  20.          if(result[i].types[0] == ’administrative_area_level_1′)
  21.              areaLvl1= result[i].long_name;
  22.      }
  23.      // added this for debugging in the console
  24.     console.log(“postalCode = “ + postalCode);
  25.     console.log(“country = “ + country);
  26.     console.log(“streetNumber = “ + streetNumber);
  27.     console.log(“route = “ + route);
  28.     console.log(“locality = “ + locality);
  29.     console.log(“Administrative area level 1 “ + areaLvl2);
  30.     console.log(“Administrative area level 2 “ + areaLvl1);
  31.  }

 

A FORM THAT AUTO FILLS THE ADDRESS INPUT FIELDS

Example at JS Bin

for with address fields automatically filled

It’s very hard to create a single code that will work in all situations and in all countries, since postal addresses are formatted differently depending on the country. A decoder that works well 99% of the time in the UK may be wrong for Australia, for instance. So, it’s just a “guess system”, and in real life, if you create a Web site and would like to help the user with completing a form, just fill in the country, city, postal code, and suggest the rest, propose a small icon for deleting the street input field content, etc. You could also add a drop down menu that offers not only the first guess but the second and third, etc.

Source code extract:

  1.  function showOnGoogleMap(latlng) {
  2.    …
  3.    // Display address as text in the page
  4.    myAddress.innerHTML=”Adress: “ + results[0].formatted_address;
  5.    // Call the function that parses the results and fills
  6.    // the input fields
  7.    parseResult(results[0].address_components);
  8.    …
  9.  }
  10.  var country, postalCode, state, route, streetNumber, locality, areaLvl1,areaLvl2;
  11.  function parseResult(result) {
  12.     for(i in result){
  13.        // Let’s print all the data we can collect from the reverse geocoder,
  14.        // Look at the debug console to see what we get…
  15.        console.log(“type = “ + result[i].types[0] + ” long_name = “ +
  16.                                result[i].long_name);
  17.        if(result[i].types[0] == ’postal_code’)
  18.           postalCode = result[i].long_name;
  19.        …
  20.        // fill input fields now, check if variables are undefined
  21.        if((route != undefined) && (streetNumber != undefined)) {
  22.           console.log(“let’s fill the street”);
  23.           document.querySelector(“#address1″).value = streetNumber + ” “ +route;
  24.        }
  25.        if(locality != undefined) {
  26.           console.log(“let’s fill the city”);
  27.           document.querySelector(“#address2″).value = locality;
  28.        }
  29.        if(country != undefined) {
  30.           console.log(“let’s fill the country”);
  31.           document.querySelector(“#country”).value = country;
  32.        }
  33.        …
  34.     }
  35.  }
  36.  </script>

 

This example is rather long and we have only shown an extract of the source code. Take your time and look at the online example.

Publicado en GOOGLE MAPS | Deja un comentario

Google maps tutor

Practical examples: use the geolocation API together with Google Maps

This section presents some examples of how to get a static map (a picture), using the Google Static Map API, how to display an interactive map using the Google Map JavaScript API and even how to get an estimation of a physical address from the longitude and latitude, using the Google Reverse Geocoding JavaScript API.

The following three examples increase in complexity, but most of the code is reused and adapted without even reading the Google documentation about the different APIs.

EXAMPLE 1 (EASY):  HOW TO GET A STATIC IMAGE MAP CENTERED ON YOUR LONGITUDE AND LATITUDE

Online example available on JS Bin, or try it here in your browser:

Click the button to get your position:

It also illustrates the use of the error callback from the previous section. The Google Map API is used to get an image centered at the longitude and latitude collected with the HTML5 Geolocation API.

Source code extract:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id=”demo”>Click the button to get your position:</p>
  5. <button onclick=”getLocation()”>Try It</button>
  6. <div id=”mapholder”></div>
  7. <script>
  8. var x=document.getElementById(“demo”);
  9. function getLocation() {
  10.    if (navigator.geolocation) {
  11.       navigator.geolocation.getCurrentPosition(showPosition,showError);
  12.    } else{
  13.       x.innerHTML=”Geolocation is not supported by this browser.”;
  14.    }
  15. }
  16. function showPosition(position) {
  17.    // Google map API needs the latitude and longitude separated by a comma
  18.    var latlon=position.coords.latitude+”,”+position.coords.longitude;
  19.    // Google map API URL that returns an image centered on the longitude and latitude
  20.    var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
  21.                +latlon+”&zoom=14&size=400×300&sensor=false”;
  22.    document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘ />”;
  23.  }
  24.  function showError(error) {
  25.     …
  26.  }
  27. </script>
  28. </body>
  29. </html>

 

The magic occurs at line 23, where we use the Google Static Map API.

EXAMPLE 2 (A BIT MORE COMPLICATED…) THAT SHOWS HOW TO DISPLAY AN INTERACTIVE GOOGLE MAP CENTERED ON THE CURRENT POSITION

This example is just given “as is”, as there are so many possibilities for rendering a map with the Google Map API. However, we think having such a basic example might be useful.

Online example at JS Bin

google map

Source code of the example:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <!– for position display –>
  7. <div id=”myposition”></div>
  8. <!– for gmap display –>
  9. <div id=”map” style=”width:640px;height:480px”></div>
  10. <!– get gmap API –>
  11. <script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
  12. <script>
  13. // Default position
  14. var centerpos = new google.maps.LatLng(48.579400,7.7519);
  15. // default options for the google map
  16. var optionsGmaps = {
  17.     center:centerpos,
  18.     navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL},
  19.     mapTypeId: google.maps.MapTypeId.ROADMAP,
  20.     zoom: 15
  21. };
  22. // Init map object
  23. var map = new google.maps.Map(document.getElementById(“map”), optionsGmaps);
  24. if(navigator.geolocation) {
  25.     // callback function, called by getCurrentPosition() in case of success
  26.     function drawPosition(position) {
  27.        var infopos = ”Got position : <br>”;
  28.        infopos += ”Latitude : “+position.coords.latitude +”<br>”;
  29.        infopos += ”Longitude: “+position.coords.longitude+”<br>”;
  30.        infopos += ”Altitude : “+position.coords.altitude +”<br>”;
  31.        document.getElementById(“myposition”).innerHTML = infopos;
  32.        // Make new object LatLng for Google Maps
  33.        var latlng = new google.maps.LatLng(position.coords.latitude,
  34.                                            position.coords.longitude);
  35.        // Add a marker at position
  36.        var marker = new google.maps.Marker({
  37.                              position: latlng,
  38.                              map: map,
  39.                              title:”You are here”
  40.        });
  41.        // center map on longitude and latitude
  42.        map.panTo(latlng);
  43.     }
  44.     // callback function, called by getCurrentPosition() in case of error
  45.     function errorPosition(error) {
  46.        …
  47.     }
  48.     navigator.geolocation.getCurrentPosition(drawPosition,errorPosition);
  49. } else {
  50.     alert(“Geolocation API not supported by your browser”);
  51. }
  52. </script>
  53. </body>
  54. </html>

 

EXAMPLE 3 (ADVANCED) SHOWS HOW TO GET A PHYSICAL ADDRESS FROM THE LONGITUDE AND LATITUDE

This is another example that obtains an address from longitude and latitude. It uses the Google Reverse Geocoding JavaScript API. For those of you who are really interested to know how this API works, please read the Google documentation and tutorials.

Without going into detail, the below example might be useful to copy/paste/adapt for trying to pre-fill a form where one is asked for an address. Geolocation is useful for guessing the country, city, zip code, street, etc. Some examples that use this feature will be given in the next section of the course.

Online example at JS Bin.

Reverse geocoder example

Source code of the example:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3.  <head>
  4.     <script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script>
  5.  <script>
  6.  // p elements for displaying lat / long and address
  7.  var displayCoords, myAddress;
  8.  // used with the google apis
  9.  var geocoder;
  10.  var map;
  11.  var infowindow = new google.maps.InfoWindow();
  12.  var marker;
  13.  // Called when the page is loaded
  14.  function init() {
  15.     displayCoords=document.getElementById(“msg”);
  16.     myAddress = document.getElementById(“address”);
  17.     geocoder = new google.maps.Geocoder();
  18.     // In order to show something even before a user clicks on the button
  19.     var latlng = new google.maps.LatLng(34.0144, -6.83);
  20.     var mapOptions = {
  21.        zoom: 8,
  22.        center: latlng,
  23.        mapTypeId: ’roadmap’
  24.     }
  25.     map = new google.maps.Map(document.getElementById(‘map_canvas’),mapOptions);
  26.  } // end of init()
  27.  // Called when the button is clicked
  28.  function getLocation() {
  29.     if (navigator.geolocation) {
  30.        navigator.geolocation.getCurrentPosition(showPosition);
  31.     } else {
  32.        displayCoords.innerHTML=”Geolocation API not supported by your browser.”;
  33.     }
  34.  }
  35.  // Called when a position is available
  36.  function showPosition(position) {
  37.     displayCoords.innerHTML=”Latitude: “ + position.coords.latitude +
  38.                             ”<br />Longitude: “ + position.coords.longitude;
  39.     // Display the map
  40.     showOnGoogleMap(new google.maps.LatLng(position.coords.latitude,
  41.                                            position.coords.longitude));
  42.  }
  43.  function showOnGoogleMap(latlng) {
  44.    // Ask google geocoder for an address once we get a longitude and
  45.    // a latitude. In fact, the reverse geocoder sends back an array of “guesses”
  46.    // i.e. not just one address object, but several. Each entry in this array
  47.    // has several properties such as street, city, etc. We use the “formatted_address”
  48.    // one here, but it might be interesting to get the detailed properties in other
  49.    // applications like a form with street, city, zip code etc.
  50.    geocoder.geocode({‘latLng’: latlng},reverseGeocoderSuccess);
  51.    function reverseGeocoderSuccess(results, status) {
  52.      if (status == google.maps.GeocoderStatus.OK) {
  53.         if (results[1]) {
  54.            map.setZoom(11);
  55.            marker = new google.maps.Marker({
  56.                                 position: latlng,
  57.                                 map: map
  58.                         });
  59.            infowindow.setContent(results[1].formatted_address);
  60.            infowindow.open(map, marker);
  61.            // Display address as text in the page
  62.            myAddress.innerHTML=”Adress: “ + results[0].formatted_address;
  63.         } else {
  64.            alert(‘No surface address found’);
  65.         }
  66.       } else {
  67.          alert(‘Geocoder failed due to: ‘ + status);
  68.       }
  69.     } // end of reverseGeocoderSuccess
  70.  } // end of showOnGoogleMap
  71.  </script>
  72.  </head>
  73.  <body onload=”init()”>
  74.  <title>HTML5 + Geolocalisation + Google Maps API Reverse Geocoding</title>
  75.  <p id=”msg”>Click the button to get your coordinates:</p>
  76.  <p id=”address”></p>
  77.  <button onclick=”getLocation()”>Where am I ?</button>
  78.  <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  79.  </body>
  80. </html>
Publicado en GOOGLE MAPS | Deja un comentario

GOOGLE MAPS API (Añadir google map api a tu sitio web)

Tutorial añadir google map api a tu sitio web

Publicado en GOOGLE MAPS | Deja un comentario