How to create a parallax scrolling website using Skrollr.js | Tutorial Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago. You will learn how to create a simple parallax scrolling website using Skrollr.js plugin. If you haven’t seen the demo already, go and check it out. View Demo Download Files Introduction To develop a parallax scrolling website can be a bit scary especially if you do it for the first time, but as you know the practice makes perfect. Please note, that this tutorial is suitable for a more advanced developers and attached files are the final files. 1. As a first step we need to include Skrollr.js preferably before the closing body tag. Initiate the Skrollr inside of the _main.js file. Now lets have a look at the markup and Skrollr settings of the individual slides. 2. Section height – 100% of the viewport, resized on page load Background animationThe background image of .bcg is animating from the initial position (data-center) 50% 0px to 50% -100px. 3. 4. 5.
Top 10 Programming Fonts les études eye tracking Qu’est ce que l’eye tracking ? L’eye tracking, ou oculométrie, est la mesure du mouvement des yeux. Miratech applique cette technologie aux tests utilisateurs sur les interfaces digitales (sites web, applis mobiles) et aux études consommateurs sur les interfaces offline (publicité, affichage, packaging…) Dans notre laboratoire, nous organisons des séances de tests individuels sur un panel de participants pour déterminer où se pose leur regard sur l’interface. Grâce à l’eye tracking, nous mesurons les zones qui sont vues, lues, utilisées ou ignorées. Les avantages de l’eye tracking Des résultats fiables L’eye tracking ne ment pas : les mouvements du regard sont inconscients et reflètent précisément les processus cognitifs engagés dans un contexte réel d’utilisation. Les méthodes uniques et les analyses mesurées de l’eye tracking renseignent avec pertinence sur l’utilisabilité d’une interface, les comportements, les erreurs et les attentes des utilisateurs. Une analyse précise Le dispositif
Backbone.js Sublime Text 2 + Zen Coding = w00t ! Pour faire mon boulot d’intégrateur, j’ai toujours préféré coder sur un que sur un IDE complexe. A chaque fois que j’essaye de me mettre à Eclipse ou Aptana, je trouve que ça ne me convient pas vraiment. Ça fait donc quelque temps que me suffit largement. Et puis j’ai commencé à entendre les louanges de sur Twitter… alors je l’ai essayé… Première impression : c’est beau ! Oui, il faut être un peu atteint pour trouver un éditeur de code *beau*, mais bon… Et c’est rapide… Comparé à d’autres éditeurs que j’ai pu tester, je trouve Sublime Text 2 vraiment réactif et il laisse toujours la main à l’utilisateur (même pendant une recherche dans les dossiers). Quelques fonctions pratiques Rechercher un fichier En tapant , on effectue une recherche dans tous les fichiers du projet. La recherche fonctionne un peu comme la « awesome bar » de Firefox. En ajoutant vous ouvrez le fichier en plaçant le curseur directement à . Changer le layout de l’éditeur Édition multicurseurs (attention, c’est génial !)
Métamoteur Un article de Wikipédia, l'encyclopédie libre. Construction d'un métamoteur Schéma général d'un métamoteur Un métamoteur (ou méta-moteur) ou un méta-chercheur est un moteur de recherche qui puise ses informations à travers plusieurs moteurs de recherche généralistes. Un métamoteur élimine les résultats similaires ; par exemple, si Google et Yahoo! Quelques métamoteurs[modifier | modifier le code] Notes et références[modifier | modifier le code] Portail de l’informatique 8 outils à connaitre absolument si vous êtes webdesigners - Retrouvez ici les derniers outils (script jQuery, framework CSS...) publiés spécialement dédiés aux webdesigners professionnels. Les journées des webdesigners sont parfois trop courtes pour réaliser tous les projets à réaliser, surtout quand vous travaillez en tant que freelance. Pour gagner du temps il est primordial de connaitre toutes les astuces pour optimiser vos plannings. L’une de ces astuces que j’utilise quotidiennement c’est d’user des différents outils que le web proposent (et proposent souvent gratuitement). Pour vous aider je vous propose 8 outils nouvellement publiés. Effet 3D sur texte en CSS Voici un article pour réaliser un superbe effet d’animation 3D sur un simple texte, et tout cela simplement en CSS ! Garder un bloc toujours visible Avec ces différents scripts jQuery vous pourrez créer des blocs qui restent visible à l’écran mais qui se positionnent sur certains points précis. Framework Metro UI CSS Salatore Font Combiner stickUp Animated SVG Icons CSS Modal Box
Initializr - Start an HTML5 Boilerplate project in 15 seconds! Ecrire pour le web Optimisez votre positionnement dans les pages de résultats de Google PréambuleINTRODUCTION1. Les rétroliens2. PréambuleTraduction autorisée d'un billet de Dave Davies, intitulé Search Engine Optimization for Google (où l'on voit que l'anglais synthétise résolument plus que le français, 5 mots contre 10 !) Cet article, troisième partie d'une série de quatre billets consacrés à l'optimisation des sites Web auprès des trois moteurs de recherche majeurs, nous donne quelques conseils sur l'optimisation de notre positionnement dans les pages de résultats de Google. Pour positionner notre site aux meilleures places sur Google, de même que sur les principaux autres moteurs, différents facteurs doivent être pris en compte. les rétroliens Ancienneté des liens Emplacement des liens Texte d'ancrage et format des liens Pertinence des sites qui pointent vers le vôtre PageRank l'ancienneté le contenu le comportement dans les résultats [Début] 1. 3. 4. P.S. Ressources pertinentes
Templates email gratuits Templates email gratuits Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! publié le Lu 7 966 fois. Petite ressource du week-end trouvée durant la semaine par un collègue de travail (ouais moi je bossais, ce sont mes collègues qui ne sont pas sérieux :p) : des templates HTML/CSS/PSD pour vos emailing.Il y a de très jolies graphismes de toutes les sortes avec des intégrations optimisées pour la majorité des plateformes mail. Découvrez donc ces templates ainsi que leur créateur sur le site de CampaignMonitor.com. De nombreux styles à télécharger parmi une centaine de template : Et… voilà c’est tout. Enjoy ! Liens utiles : - CampaignMonitor.com - MailChimp.com À propos de Geoffrey Intégrateur et designer web, fondateur de Creative Juiz, il a trouvé marrant et juste de partager ses recherches, astuces et ressources sur les sujets comme CSS, HTML, JavaScript, PHP, WordPress, etc. grâce aux articles que vous trouverez sur ce blog. Laisser un commentaire
SVG Fallback, Vertical Rhythm, CSS Project Structure Advertisement Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS1, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. We’ll take all kinds. If you’re interested in exploring more Q&A, there’s a bunch more in my author archive2. CSS Project Structure Stephen Beiler asks: “Could you please explain your strategy for building CSS? These days I’m using Sass3 for all my projects. I use this feature heavily while organizing and structuring CSS for a project. On my recent redesign of CSS-Tricks, I ended up with 28 .scss files, most of which were modular bits only ever @imported into bigger style sheets. When To Use OOCSS Michael Winczewski asks: “Chris, what do you think of OOCSS? I think it’s fantastic. Ren Walker asks: Sure. if (!
Recherche Internet : mots clés & allongement des requêtes Dans un billet signalé par Tom sur l'augmentation de la longueur moyenne des requêtes, le blogueur conclut : Il semble donc de plus en plus pertinent de vouloir baser sa stratégie de référencement naturel, voire même d’achat de mots-clés, sur des expressions longues, dans la mesure où celles-ci sont appelées à non seulement devenir plus populaires, mais à fournir une information plus qualifiée aux internautes… et par conséquent à offrir les meilleurs taux de conversion et de satisfaction en cas de réelle pertinence. Chose que j'annonçais déjà en ... janvier et octobre 2006, dans deux billets respectivement intitulés « Les co-occurrences, ou l'avenir de la recherche sur le Web » et « Booster son blog : mots clés et optimisation », où j'observais ce qui suit : Pourtant, avec l'accroissement exponentiel du Web, il semble bien que les requêtes sur 1 ou 2 mots clés diminuent fortement et laissent la place aux recherches sur 3, 4 mots et plus. avec 34,37% des requêtes à 4 mots et plus…
5 alternatives à Notepad++ pour Mac Notepad++ est sans aucun doute le meilleur éditeur de code source pour Windows. Le problème, c’est qu’il n’existe pas pour Mac ! Débarqué récemment sur Moutain Lion, il m’a fallu quelques temps pour retrouver mes bonnes vieilles habitudes. 1. Certainement l’une des meilleures solutions gratuites, TextWrangler se démarque avec quelques options comme : une interface agréable qui vous permet de travailler en plein écran, une organisation des fichiers en cours d’édition dans une barre latérale, des couleurs différentes en fonction des balises. 2. Logiciel gratuit qui propose une interface simple grâce à une navigation par onglets et plus de 60 langages de programmation. 3. gedit L’éditeur de texte officiel de l’environnement GNOME qui supporte aussi les caractères Unicode, la surbrillance pour divers langages de programmation, un outil de recherche et de remplacement, la création automatique de fichiers de sauvegarde. 4. 5. Et vous, quelle alternative à Notepad++ utilisez-vous sur Mac ?