background preloader

Tutoriel sur l’API Google Maps avec la géolocalisation HTML5

Tutoriel sur l’API Google Maps avec la géolocalisation HTML5
Ce tutoriel vient en complément au Tutoriel de géolocalisation en HTML5, et vous apprendra à exploiter les informations de géolocalisation que vous y avez obtenu sur une carte Google Maps. Nous allons réaliser une application qui affiche votre position sur une carte et trace votre parcours en suivant vos déplacements. L’API Google Maps Tout d’abord, il est essentiel de bien comprendre ce qu’est une API. en téléchargeant une bibliothèque de fonctions pour l’inclure sur son siteen récupérant une donnée précise en construisant une URL (Google Charts)En incluant directement la bibliothèque en ligne Concernant Google Maps, on est dans ce dernier cas, c’est à dire qu’on va directement inclure la bibliothèque Google Maps dans notre Javascript. Inclure Google Maps Pour inclure les fonctions Google Maps dans notre application, nous ajoutons une balise script dans la partie head de notre page : Concernant les autres paramètres je vous invite à aller lire la documentation officielle (en anglais). Related:  TutorielsHTML5

PHP QR Code - QR code generator, an LGPL PHP library Produits eXo Platform est la première et unique plateforme d'expérience utilisateur (UXP, pour "User eXperience Platform") optimisée pour le Cloud, et conçue pour développer et déployer des sites web transactionnels, gérer des contenus web, créer des sites intranet, des gadgets et des tableaux de bord. eXo Platform permet aux entreprises d’optimiser leurs infrastructures Java existantes au travers d'outils familiers et adaptés aux nouvelles technologies tels que les réseaux collaboratifs d’entreprise, les wikis ou les forums. Un Portail d'Entreprise En utilisant eXo Platform, vous bénéficiez d’un portail d’entreprise permettant de déployer et d’organiser des applications sous la forme de portlets ou de gadgets. Intranets Sociaux et Sites Internet eXo Platform vous permet de développer des intranets sociaux et des sites internet contenant de la gestion de contenus, des workflows, des espaces de travail, des wikis, des forums, des flux d'activités et autres. Une Plateforme Intégrée Prêt pour le Cloud

Tutoriel de géolocalisation en HTML5 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres

30+ jQuery Plugins For Scrolling Effects With CSS Animation - ninodezign.com One of the trendiest techniques to have fun with is scrolling. A bit of website animation can be fun and enticing to new visitors, animated page elements do not offer major alterations on content, but can provide a more extraordinary user experience. Many website developers use different ways of scrolling to make their websites more alluring and interesting to their viewers so that they don’t get bored. To save all the web developers lots of time and trouble of searching for such JQuery plugins of scrolling effects we bring you 30+ jQuery plugins for scrolling effects with CSS animation. These plugins will help you get some amazing scrolling animation on your website with no time. 1 – Animated Scroll Effects Demo Download 2 – AnimateScroll Demo Download AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to. Demo Download 4 – Wow.js Advantages:

Webdesign Mag CSS Triangle You can make them with a single div. It's nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. Examples Dave Everitt writes in: For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width Floating, Fixed Position Social Icons - Andre Bulatov We’re All Social! I’ve searched for floating social icons multiple times, for a variety of projects. We’re all social nowadays and we want to show that and link to our profiles in a cool way. I gave up googling for this and just created my own. In this post, I’ll share the code for my Floating, Fixed Position Social Icons with you. The Code The code for this is going to be pretty simple. The HTML – Foundation Markup Code For This Floating Social Doo-dad The HTML for this is pretty basic. *If you want to know how I did this code formatting in WordPress, check out my post about syntax highlighting. The CSS – Styling The JavaScript – Functionality This javascript is responsible for smooth auto-positioning with the window size. As mentioned earlier in the post, I will update the JS later, when I learn how to do API calls to social networks to grab the “share” or “like” counts and to report them live right on the Floating Social Links widget. Update 1:

aliaz - moi, version Web Automatic Table of Contents Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons: It's easier - write the JavaScript once and it can create the Table on Contents on every page you need it.It's more reliable - the JavaScript isn't subject to authoring errors.It's still accessible - A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn't ruin the page) and nearly all screen readers run JavaScript. This kind of thing has been done many times and many ways. HTML: Headers and IDs A long page of different parts you wish to link to could be marked up a bunch of ways. <article><h3 id="question-one">Title of Question</h3><! A link like this: A list in that <nav>? Demo Share On

CSS3 : Transformations 2D CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l'apparence d'un élément grâce à un ensemble fonctions 2D : Syntaxe La syntaxe est simple d'emploi. transform: function(value); Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. transform : function1(value1) function2(value2) function3(value3); La propriété transform-origin transform-origin: 50% 50%;

Nico{V}BiostylArt

Related: