Blog de diseño y desarrollo de páginas y aplicaciones web.

Archivo de la categoría: JavaScript

3

Obtener una dirección desde Google Maps

Obtener una dirección desde Google Maps

Posted on por

Hoy vamos a trabajar con la API de Google Maps.

En primer lugar, vamos a montar un mapa en el que, al hacer click, Google de forma automática nos proporcione la dirección de la posición elegida. Ésto dará otra nueva funcionalidad a nuestra página web haciéndola más atractiva y dinámica.

Ya sabéis nuestra teoría, “con lo que cuesta que lleguen, hay que hacer que los usuarios se queden”, y no hay mejor forma que proporcionar al usuario de nuestra página web herramientas para que interaccione con nuestro proyecto.

Para ello, trabajaremos en Java Script (jQuery) y tenemos una función que monta un mapa de Google Maps pasándole como parámetros una latitud, una longitud y un zoom.

A continuación, añadimos la función autocompletar, al que al pasarle un marcador de Google (marker) intenta obtener la dirección física que le corresponde, con todos sus datos (calle, número, código postal, municipio, provincia, comunidad autónoma y país)

Como podéis ver, esta función hace una consulta a la función consultaGoogle. Esta función es bidireccional, y puede obtener la dirección dándole unas coordenadas o viceversa.

De nuevo, esta función (como no podía ser de otra manera) requiere de un último fragmento de código. Éste es php y es consultado por ajax. Se le envía la consulta y él, según los parámetros recibidos, envía la petición a Google vía CURL, la procesa (es más fácil trabajar con arrays y json en php que en Java Script en mi humilde opinión) y nos devuelve el resultado.

Y es así de sencillo (sobre todo si cogéis estas funciones ya desarrolladas)

¡Esperamos que os sea de utilidad!

VN:F [1.9.22_1171]
Rating: 4.1/5 (8 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

Esta entrada fue publicada en APIS de Google, Google Maps, JavaScript, Php y etiquetada , , , por DGCmedia. Guarda enlace permanente.

12

Personalizar los alert en Java Script

Personalizar los alert en Java Script

Posted on por

Volvemos con Java Script, para mostraros cómo personalizar todos los alerts de una página web de forma fácil.

Finalmente, se puede personalizar su aspecto con las siguientes líneas de CSS.

Como podéis ver, extremadamente fácil y rápido. Ahora, al utilizar la función alert(“Hola”) de Java Script, tendréis un mensaje personalizado. Pero ¡ojo!, este alert no detiene la ejecución del código (algo que sí hace el alert original)

Podéis probarlo rellenando de forma incorrecta el formulario de contacto del sidebar derecho.

VN:F [1.9.22_1171]
Rating: 3.8/5 (23 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 12 votes)

Esta entrada fue publicada en JavaScript, jQuery y etiquetada , , , por DGCmedia. Guarda enlace permanente.

0

Ajax en JQuery

Ajax en JQuery

Posted on por

Os vamos a explicar una función completita de Ajax a través de JQuery, que esperamos, os sirva de ayuda.

Como podéis ver, tiene bastantes opciones.

  • statusCode: permite controlar si hay algún tipo de error, para gestionarlo como deseemos en la propia página web.
  • type: indicamos cómo vamos a enviar los datos (POST o GET).
  • url: añadimos la URL que va a recibir los datos.
  • dataType: el formato en el que el archivo que procese la petición nos va a responder. Puede ser XML, Json, o texto sin formato.
  • data: finalmente, los datos que queremos enviar, en formato jSON. Indicar, que podemos usar la función $(‘form’).serialize() para que automáticamente, todos los datos de un formulario se traduzcan a este lenguaje estructurado.

En este caso, nuestro “procesador” de datos nos devolverá un json con una variable mensaje, que mostramos en un alert.

 

VN:F [1.9.22_1171]
Rating: 4.0/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Esta entrada fue publicada en JavaScript, jQuery y etiquetada , , , por DGCmedia. Guarda enlace permanente.

0

DGCmedia renueva su página web (escritorio y móvil) y blog

DGCmedia renueva su página web (escritorio y móvil) y blog

Posted on por

Por fin! No podía ser que dedicándonos a desarrollar páginas web, la nuestra estuviese en un estado tan lamentable. Gracias a un periodo de pausa entre proyecto y proyecto, contamos con una web a la altura de las que acostumbramos a hacer a nuestros queridos clientes.

Técnicamente, está desarrollada sobre nuestro gestor de contenidos, DGCcms, que nos permite gestionar todo fácilmente. Añadir clientes, tecnologías, páginas y servicios en minutos (o segundos)

Web multidispositivo
Además, cuenta con un sistema de url´s amigables (¡sólo faltaba!), realizada en HTML5 conforme al futuro estándar de la W3C (es válida en su tester) y muestra de una forma atractiva nuestros trabajos pasados y las tecnologías utilizadas en sus respectivos desarrollos.

El blog también ha pasado por chapa y pintura, y a pesar de ser un WordPress de toda la vida, está completamente integrado en el funcionamiento de la web, siendo todos los contenidos (header, sidebar y footer) los mismos que los de la web matriz.

Versión móvil de nuestra web

Por último, jQuery mobile nos ha facilitado las cosas a la hora de hacer una versión móvil del portal. Aunque nuestra web está optimizada de por sí para el funcionamiento en dispositivos móviles sin ningún problema (es muy ligera, rápida y sin contenidos incompatibles) hemos creído oportuno que los móviles más antiguos también puedan entrar en ella sin tener que esperar.

Esperemos que os guste, la disfrutéis y la compartáis con vuestros amigos.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Esta entrada fue publicada en CMS, DGCcms, Diseño Web, HTML, HTML5, JavaScript, jQuery Mobile, Lenguajes, Nuestros trabajos, Php, Wordpress y etiquetada , , , , , , , , por DGCmedia. Guarda enlace permanente.

12

Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C

Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C

Posted on por

Parece ser que a Twitter, Facebook, LinkedIn y Google les importa poco que sus botones de tweet/follow, me gusta, share y +1 validen en la W3C.

Para el correcto funcionamiento de una web, no suele tener importancia, pero como desarrolladores web, nos gusta que nuestro sitio cumpla los estándares establecidos.

Por ello, hemos desarrollado unas funciones que permiten validar nuestras páginas y agilizar el tiempo de carga. Esperamos un tiempo y creamos los elementos que contienen el botón en cuestión. El código del botón de LinkedIn sería el siguiente:

En el head, añadimos el siguiente fragmento de código JavaScript:

Luego, donde queremos crear el botón, llamamos a la función declarada anteriormente.

A continuación, incluimos el código de los botones de las redes sociales principales que validan perfectamente en la W3C.

En el head:

Y en donde queramos llamar a los botones…

Para Twitter, la función tiene un parámetro booleano compartir, en el que se indica si se trata del botón de compartir o el de seguir.

Esperamos que haya sido de ayuda y gracias a Moisés por conseguir algo que a muchos, nos ha quitado horas intentando validar nuestras páginas en la W3C

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Esta entrada fue publicada en Estándares W3C, Facebook, Google Plus, HTML, JavaScript, Lenguajes, LinkedIn, Php, Redes Sociales, Twitter y etiquetada , , , , , por DGCmedia. Guarda enlace permanente.

Contacto

Su nombre*

E-Mail*

Asunto*

Mensaje*

Captcha
Otro Captcha

Captcha*