Overblog
Suivre ce blog Administration + Créer mon blog

Dreaminvasion

Suivez-le blog

Recherche

Articles récents

Mes derniers tweets

Catégories

Publié le Rédigé par
Catégories : CSS 3, Mobile, Responsive, Développement Web
4 outils pour valider le responsive design de vos pages

Tout bon Front-dev se doit de connaitre les Media Queries et gérer le responsive design. Quel site n'est pas responsive de nos jours ?
Ok... Honte à moi, je n'ai pas eu le temps d'adapter le thème de ce blog ;)

Et comme je dois m'y coller bientôt, autant me préparer à tester l'apparence de mon blog sur différentes résolutions d'écran et simuler son comportement sur des devices mobiles.

Passons aux choses sérieuses et découvrons ces 4 outils qui vous seront d'une grande utilité.

Responsivetest.net

Surement mon outil préféré pour tester les pages en responsive.
Il vous propose des preset d'écran et d'ordinateur : Macbook Pro, iPad, iPhone, PC, ...

Responsivetest.net

Am I Responsive Design

Vous permet de voir d'un seul coup d'oeil à quoi ressemble votre site sur iPhone, iPad, iMac et Mac book pro

ami.responsivedesign.is

Responsive Design Bookmarklet

RWD est un bookmarlet très pratique pour tester rapidement une page. Vous remarquerez que cet outil simule également le mode paysage des téléphones mobiles et tablettes.

Responsive Design Bookmarklet

Responsinator.com

Responsinator.com teste uniquement votre site sur un gabarit iPhone 4.

Responsinator.com
Lire la suite

Publié le Rédigé par
Catégories : IDE, Développement Web

Netbeans 7.3 vient tout juste de sortir, j'avais déjà évoqué les nouveautés de cette version dans l'article "NetBeans 7.3 sort en RC et intègre Easel, une plateforme pour le développement". Une version qui semble donner plus d'importance aux languages web et plus précisément à l'intégration de HTML5 et des frameworks JS et CSS comme AngularJS, Bootstrap, HTML 5 BoilerPlate, Symfony2, Doctrine2 et Twig

Quoi de neuf pour les développeur web ?

La release information de la 7.3 nous donne quelques indications pour les développeurs web qui souhaiterait tester Netbeans (ou qui l'utilise déjà) :

Project Easel: HTML5 Application Development

  • HTML5 Application project with JavaScript testing support
  • JavaScript Editor significantly improved
  • Page inspector and visual CSS style editor
  • JavaScript Debugger
  • Embedded WebKit browser; deep integration with Chrome

PHP

  • Parsers for Namespaced Annotations (Symfony 2, Doctrine 2, etc.)
  • Basic Composer Integration (Dependency Manager for PHP)
  • Twig Code Completion (with documentation)
  • Smarty Braces Matching for Related Tags
  • Smarty Parser Errors of Unmatched Tags

Des tutoriels et screencast pour découvrir Netbeans 7.3

Commençons par un tour de présentation de cette nouvelle version en vidéo.

Lire la suite

Publié le Rédigé par
Catégories : Javascript, Développement Web

Piecon est une bibliothèque JavaScript qui va vous permettre de modifier le favicon de chargement des pages par défaut.
Pour ce faire vous pouvez afficher un camembert animé à l'emplacement du favicon qui sera automatiquement remplacé par votre favicon une fois le chargement de la page terminé.

Developpez.com

Piecon : Afficher le pourcentage de chargement de la page dans la favicon
Lire la suite

Publié le Rédigé par
Catégories : Javascript, Jeux vidéo, Développement Web
Comment développer Street Fighter II en Javascript

Voici un article qui nous explique comment créer une courte démo de Street Fighter II en javascript. On y apprend surtout l'animation des sprites. Il n'y a pas la gestion de l'audio, dommage.

Enfin juste pour le fun je vous invite à tester la démo sur codepen.io

Build a Street Fighter Demo with CSS Animations and JavaScript

Build a Street Fighter Demo with CSS Animations and JavaScript

I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated ...

http://davidwalsh.name/street-fighter

Lire la suite

Publié le Rédigé par
Catégories : Développement Web
Choisir la taille de police[ Usaddict: Ressources sur l'ergonomie des interfaces (le blog Usabilis)]

Choisir la taille de police[ Usaddict: Ressources sur l'ergonomie des interfaces (le blog Usabilis)]

http://www.ergonomie-interface.com/methodes-process-techniques/choisir-taille-police/

Une bonne réflexion sur le choix des tailles de police à utiliser en fonction des résolutions d'écran, de la densité en pixel et de la distance de lecture. Un article à lire si vous êtes front-end.

Lire la suite

Publié le Rédigé par
Catégories : Responsive, Développement Web
This awesome experiment in responsive typography uses face detection to adjust font size

This awesome experiment in responsive typography uses face detection to adjust font size

Responsive design has recently become a buzzword, and for good reason: it captures the idea of displaying your content beautifully on each and every device. Responsive typography has also received attention, and various techniques have emerged to encourage type legibility across devices: like displaying different font weights to compensate for Retina displays.

http://tnw.to/t11K

Lire la suite

Publié le Rédigé par
Catégories : Responsive, Framework, Développement Web
Cool Kitten - Un framework responsive pour créer des sites parallax - La Ferme du web

Cool Kitten - Un framework responsive pour créer des sites parallax - La Ferme du web

Cool Kitten est un framework permettant de créer des sites web responsive utilisant la technique de parallax scrolling. Vous avez sans doute déjà vu ces sites de marques ou de créatifs dont les backgrounds s'animents lorsque vous scrollez la page de votre navigateur.

http://www.lafermeduweb.net/billet/cool-kitten-un-framework-responsive-pour-creer-des-sites-parallax-1517.html

Lire la suite

Publié le Rédigé par
Catégories : Javascript, BDD, Développement Web

JSDB.io - The Database of JavaScript Libraries

JavaScript Database is a collection of the best clientside javascripts for modern web development

http://www.jsdb.io

Une belle liste de frameworks JS triée par usage. Trouvé via HumanCoders (http://0z.fr/JO5wl)

Lire la suite

Publié le Rédigé par
Catégories : IDE, Développement Web
NetBeans 7.3 sort en RC et intègre Easel, une plateforme pour le développement HTML5 et JavaScript dans un environnement Java

NetBeans 7.3 sort en RC et intègre Easel, une plateforme pour le développement HTML5 et JavaScript dans un environnement Java

NetBeans 7.3, la prochaine mise à jour majeure de l'environnement de développement open source pour Java, C, C++, PHP, HTML, JavaScript, etc. est disponible en Release Candidate (RC).Cette moutur...

http://www.developpez.com/actu/51590/NetBeans-7-3-sort-en-RC-et-integre-Easel-une-plateforme-pour-le-developpement-HTML5-et-JavaScript-dans-un-environnement-Java/

On apprend que Netbeans 7.3 intégrera Easel une plateforme de développement HTML5, Javascript, ainsi qu'un débugger JS basé sur le projet Nashorn (moteur d’exécution JavaScript développé en Java). Enfin nous allons pouvoir développer du JS dans Netbeans sans qu'il consomme tout notre CPU et RAM.

Lire la suite

Publié le Rédigé par
Catégories : Javascript, Développement Web
Améliorer la précision GPS en Javascript

Xavier Raffin qui travaille sur l'application Tisséo mobile (réseau de transport en commun à Toulouse), nous fait un retour d'expérience très intéressant sur la précision des coordonnées GPS fourni par l'API JS sur les terminaux mobiles dans son article "Améliorer la précision GPS en Javascript"

Lire la suite
1 2 > >>