Découvrez 5 sites avec une navigation et un concept original #104 Pour ce 104ème numéro nous avons sélectionné pour vous une série d'expériences originales, beaucoup d'interactions et des idées astucieuses pour réaliser des présentations efficaces. Bonne lecture ! Google I/O 2014 - Experiment Pour l'occasion de sa septième Google I/O qui est une conférence annuelle de deux jours organisée par le célèbre moteur de recherche, nous avons pu découvrir une expérience originale créée pour l'évènement. Google a réalisé une expérience visuelle, sonore et interactive afin de découvrir les possibilités de son navigateur. L'expérience est à vivre sur Chrome pour un rendu optimal : www.google.com/events/io/experiment Personal Brand Institute Une jolie expérience interactive avec le site Personal Brand Institute qui fait preuve de beaucoup de finesse pour sa présentation et dans les effets utilisés. Omnisense Un projet original et de qualité avec le site Omnisense qui nous propose de découvrir une nouvelle technologie pour l'avenir de l'Homme. Epic Exit
Écrire ses propres plugins avec jQuery Pour ce premier article de 2014, je vais aborder un outil que n’importe quel développeur web ou intégrateur a déjà dû utiliser. Je veux parler de jQuery. En effet, jQuery est présent sur une très grande majorité de sites Web, il est présent par défaut dans des frameworks comme Ruby on Rails et possède une très importante base de plugins et d’utilisateurs. Avant de commencer Il existe une controverse concernant l’utilisation inconditionnelle de jQuery et le fait que cette dernière tend à favoriser l’ignorance de JavaScript. C’est à dire que beaucoup de développeurs ne connaissent que jQuery pour tout ce qui concerne le DOM, la propagation d’événements, la sélection d’éléments, les manipulation de propriétés, etc. Attention, l’article est rédigé par une ce des personnes. Partager et réutiliser Il m’arrive souvent d’avoir à intégrer du code fourni par un intégrateur. Oui, mais non ! Un plugin jQuery vu de l’extérieur Voilà comment s’utilisent une majorité des plugins jQuery : jQuery et pas $
Photo Booth Strips with Lightbox A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly. View demo Download source In today’s tutorial we’ll show you how to create some cute looking photo strips and integrate Lightbox 2, one of the most popular and widely used lightbox scripts. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture we will show the larger version using jQuery Lightbox 2. Please note that we might use some new CSS properties that don’t work in older browsers. The amazing images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). Lightbox 2 is by Lokesh Dhakar and you can find the script and examples of usage here: Lightbox 2 The Markup Let’s first write the HTML for the four photo strips. As you can see, we use the “rel” attribute for the Lightbox 2 script.
95 Inspiring Websites of Web Design Agencies Fresh, innovative, creative, minimalist ... What's your style? You probably won't have a better chance to show off all your potential if it's not by designing a website for your own agency or web studio. It's time to push all those ideas and concepts forward, those a client would never understand or that would probably end up spoiling in the end. Now you have no excuses, it's time to surprise your clients, your competitors, and why not, the world. At Awwwards, we're eager to see the results of all your efforts and talent and that's why we've prepared this article, so it serves you as inspiration for your next site.
Responsive Email Framework We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time on other things, like building amazing products. Email marketing is good for your business. Common UI Patterns to Build Faster You can use these UI patterns in your designs to quickly get your email into shape. Emails that work in all of the major clients, even Outlook There’s no need to worry about inconsistent spacing and odd rendering issues with your layouts. View our compatibility chart → The ZURB Email Stack will make you an email pro Upgrade your email workflow to save time be more efficient. Learn more about the ZURB Email Stack → Inlining CSS is was a pain It used to be that every time you had to make a change to your email, you had to copy the contents, open the inliner in your browser, paste it in and inline. Check out our web inliner →
18 Cool jQuery Plugins that will make you WOW! 18 Cool jQuery Plugins that will make you WOW! jQuery was released in January 2006. 6 years later, it still holds its position as best JavaScript library due to its simplicity. Well, I believe it will be even stronger in the future because of its large community of contributing developers. Thanks to this community, so that’s why we have a lot of amazing and cool jQuery plugins out there. This post roundup 18 amazing and cool jQuery plugins that will make you WOW! If you were looking for an ordinary and practical jQuery plugin, then this post might NOT suit you. =) Please do visit my other jQuery plugins posts: Zoomooz jQuery Plugin by Janne Aukia Zoomooz jQuery Plugin Zoomooz.js is a powerful jQuery plugin for making your web page element zoomable. jQuery Quicksand Plugin by Jacek Galanciak jQuery Quicksand Plugin jQuery Quicksand is an awesome jQuery plguin which used to sort and filter items through beautiful shuffling animation. Isotope jQuery Plugin by David DeSandro Isotope jQuery Plugin
Les sites web incontournables (juillet 2013) Résumons ce nouvel épisode des webdesigns incontournables en une phrase : le mois de juillet a été riche en gros sites expérientiels ! Les marques ont sorti les gros moyens pour créer des sites beaux, interactifs et accrocheurs. Petite sélection… Comme chaque mois, les incontournables ont pour but de rassembler les sites qui ont fait le tour des galeries design. Repoussant toujours plus loin les limites de technologies web, les 25 sites présentés dans cette sélection représentent un florilège des tendances actuelles. Hashima Island Storing the Goods BeoplayH6 Grischek Faithfuliremain Nique Woodhouse Context AD The Town That Came In From the Cold The Congress Movie Cube Slam Everest Sonia By Sonia Rykiel Culture.fr Designers Friend Instnt Kettle Cuisine Tellerand Land Cloquo 100 ans de tour Your Tour Drug Bless America Knock Knock Factory FI Airline Made By Mog Alors beau soleil en juillet sur le monde du webdesign ?
App Store Optimisation However, I do believe ASO is worth investing a little time in, because honestly, it has got to be better than just randomly picking your keywords without doing any research. First of all, I'd advise against paying anyone to do it for you, as it's something you can easily do yourself and you'll probably never recoup the cost. Over the past few months I've been doing a lot of research into ASO with the aim of improving Clear’s position in search results, but before we get into that, here's Wikipedia's definition for ASO: App store optimization (ASO) is the process of improving the visibility of a mobile app (such as an iPhone, iPad, Android, or Windows Phone app) in an app store (such as iTunes or Google Play for Android). App store optimization is closely related to search engine optimization. I think that sums it up fairly well. Why Search Matters Apple regularly makes changes to try and improve the search algorithm on the App Store. Can ASO Help? App Title Snobbery ASO Cheat Sheet
The Ultimate Roundup of Amazing Free Social Media Icon Packs We hope you have enjoyed our last collection of web and user interface icons. This time you are going to get a good and quality collection of social media icons. This list will be very useful for bloggers,web designers and graphic designers to promote their articles and their services. The usage license is described for some icon packs here.If you need more information about the icons usage you can get from their source page. To promote your blog or articles in social media world you need a creative and unique icons and i am sure you will find your most favorite and suitable icons here to include them in your blog or website. 1. A clean set of icons from chethstudios.Re-distribution not allowed! 2. Just another contribution from chethstudios. 3.3D Social media icons This 3D Social Media Icon Pack comes with 20 icons which include your favorite social media websites such as Digg, StumbleUpon, Twitter and lot more from dawghouse design studio.Get the license details of usage from source.
50 Beautiful and Creative Portfolios Advertisement A creative and well-designed portfolio is able to attract potential clients and indirectly increase your sales. So, it is important for every designer to have an outstanding portfolio. So, are you in the progress of redesigning your portfolio? Nathan Sanders Graphik Vincent Mazza Brad Colbow naro B.N.Weiss Nine Lion Design Meomi Cloud House Rockatee @bcandullo Mediocore osvaldas Thibaud’s portfolio foxie’s graphic design Freelenz Pikaboo Jeffrey Sarmiento Phunk’n Creative Taufiq Ridha Digital Mash Web Design Berkshire David Hellmann Sawyer Hollenshead Estúdio Alice Artgeex The Alamo Basement Dean Oakley iwit.nl Camellie Timothy van Sas Nile Inside Gourami Design Berit Sømme Danny Blackman Kevadamson Pamponeo Marko Prljić Portfolio Pavel Maček EMOTIONS by Mike vanityclaire Jay Hafling Noel Design Dumbwaiter Design Gummisig Ronnie Wright Square Factor 84colors Enila.fr Alessandro Cavallo Eric Johansson
Tuto AngularJS Source: Ultimate guide to learning AngularJS in one day par Todd Motto Qu’est-ce qu’AngularJS ? Angular est un framework MVC/MVVM côté client, développé en JavaScript, ce qui est obligatoire pour faire une application moderne à page unique (ou même un site internet). C’est un grand bond vers le futur de HTML et vers ce que HTML5 apporte. Terminologie Angular a une courbe d’apprentissage assez courte qui consiste principalement à appréhender la terminologie et la “pensée MVC”. Vous avez probablement déjà entendu parler de MVC. Modèle structure donnée représentant une entité de l’application, généralement transmise en JSON. Vous pouvez accéder à cette information de deux façons. Vue La vue est simple, c’est votre HTML et/ou la sortie générée. Contrôleur Comme son nom l’indique, cette couche contrôle des choses. Mettre en place un projet AngularJS (l’essentiel) Tout d’abord, nous devons mettre en place le minimum vital d’un projet Angular. Un peu de HTML avec les déclarations ng-* : Contrôleurs <!