Le défilement parallaxe

Pour ajouter un effet de profondeur aux sites Web, les designers Web ont recours à une méthode utilisée depuis longtemps dans le domaine du jeu vidéo : le défilement parallaxe.

Celui-ci consiste à faire bouger différents plans à différentes vitesses pour créer un effet de profondeur et de mouvement. Par exemple, au premier plan un personnage bougerait rapidement, au second plan une forêt lointaine bougerait à vitesse moyenne et finalement au troisième plan des nuages bougeraient à vitesse lente. Tout ceci dans le bus de créer un effet de profondeur.

Le mouvement peut être associé au défilement du site (scroll) ou au mouvement de la souris et est exploité de différentes façons. Vous en trouvez aussi des exemples sur le site de ProWeb au moyen des icônes de médias sociaux qui se chevauchent dans l'arrière-plan et dans la bannière présentant les services dans le haut de la page.

Cet effet, bien utilisé, offre de multiples possibilités au designer Web. À noter qu'il faut garder la lisibilité, la facilité de navigation et le temps de chargement en tête lors de l'utilisation d'un tel effet dans un site Web.

Source :
Définition du défilement parallaxe
http://fr.wikipedia.org/wiki/D%C3%A9filement_parallaxe

Six tendances prévues pour 2013 (anglais)
http://smashinghub.com/web-design-trends-in-2013.htm

Explication des effets de parallaxe
http://design.ikomeo.fr/les-effets-de-parallaxe-webtrends

Liens intéressants :
21 exemples de défilement parallaxe (anglais)
http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

30 sites contenants un effet parallaxe (anglais)
http://www.awwwards.com/20-great-websites-with-parallax-scrolling.html

On peut se passer de Visio ?

Les outils de quand t'a pas Visio

http://www.gliffy.com/
Bon éditeur online, sauve juste en image, fait en Flash (html5 en preview).
Plusieurs beaux modèles de base.
Permet la collaboration, et sauver xml.

http://www.diagram.ly/
Un peu moins beau que gliffy mais html5.
A (entre autres) des templates uml et des clipart.
Permet de sauver en xml (et de réouvrir ailleurs ce même fichier...) mais pas de collaborer.
Il parait qu'on peut ouvrir des fichiers Visio également !

https://bubbl.us/
Vous avez besoin très rapidement de mettre vos idées sur un canvas ?  Ça relie des bulles ensembles (juste à survoler les bulles et peser sur les petits icônes qui apparaissent autours.

Go analyse go !

Ici un lien vers des alternative (que je ne recommende pas particulièrement...)

Savoir s'adapter, de plus en plus vrai sur le Web!

Vous avez fort probablement déjà été obligé de « zoomer » (redimensionner) ou « scroller » (faire défiler) pour pouvoir consulter un site Web sur un mobile. Ceci est dû au fait que ces sites ont été conçus pour un écran d'ordinateur.

Ce problème peut être évité grâce au « responsive design » (conception adaptative ou réactive).

Cette méthode consiste à permettre à la mise en page d'un site Web de s'adapter aux divers appareils et à leur résolution d'écran respective.

Le site ainsi conçu changera de disposition selon la taille d'écran de l'appareil sur lequel il est affiché. Au moyen de CSS et de JavaScript, la dimension et la disposition des images, titres, textes et autres éléments pourra se modifier et permettre d'accéder à l'information du site de façon agréable. Ce type de design fluide s'oppose au design fixe de la méthode habituelle.

Il existe aussi un autre moyen de créer un site adapté aux divers appareils; il s'agit de faire plusieurs versions d'un même site. Ces versions séparées seront de diverses tailles et seront pensées pour faciliter la vie de l'utilisateur. Sur un appareil mobile par exemple, on pourrait trouver des options de géolocalisation ou de recherche de restaurants à proximité. L'utilisateur d'ordinateur de bureau, celui qui consulte un site sur sa tablette le soir bien assis dans son sofa et celui qui navigue sur son cellulaire en se déplaçant, n'ont pas les mêmes besoins.

Voici une comparaison de chacune des méthodes :

Responsive design (conception réactive) :

• Une seule version doit être développée
• Intégration plus complexe (compatibilité avec les navigateurs, CSS et code HTML plus poussé).
• Conception du site en blocs modulables.
• Maintenance plus facile
• Adapté pour les sites informatifs
• Moins de latitude dans le design (nottamment au niveau des images et de la disposition)

Versions séparés :

• Utilisation adaptée à l'appareil sur lequel il est consulté
• Couteux en temps et en argent lors de la conception
• Maintenance plus difficile
• Design plus facile car adapté au média visé

La conception du site débutera par la version mobile pour téléphones intelligents, comportant moins d'éléments et étant plus limitée. Elle se poursuivra jusqu'à la version la plus complexe, soit la version pour ordinateur de bureau ou portable.

Par Serge Bilodeau

Sources :

Explication détaillée du concept de « responsive design » (conception réactive)

http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/

Tendances du design Web pour 2012 – bref résumé du « responsive design » (conception réactive)

http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/

https://www.axialdev.com/blogue/2012/06/design-les-tendances-web-pour-2012/#.UDvd-dZlSAp

http://webdesignledger.com/tips/web-design-trends-in-2012

Définition du « Responsive Web Design » (conception réactive)

http://fr.wikipedia.org/wiki/Responsive_Web_Design

Tendance Web 2012: les menus fixes

Le Web et les technologies s'y rattachant évoluent rapidement ce qui entraîne de nouveaux styles graphiques et de nouvelles idées. On voit apparaitre des pages plus longues, ce qui est particulièrement vrai pour les blogues, et l'utilisation du 'scroll' est de plus en plus commun.

Cette façon de « designer » les sites a entraîné une utilisation de plus en plus fréquente de la navigation en position fixe.

En effet, les menus sont de plus en plus ancrés dans le haut d'une page et restent ainsi accessibles en tout temps alors que le contenu défile sous celui-ci.

Les barres latérales de réseaux sociaux et autres informations pertinentes sont souvent fixés à gauche de l'écran. Elles sont facilement repérables et ne nuisent en rien au contenu et au visuel du site, particulièrement depuis l'avénement des écrans panoramiques.

Liens intéressants:

11 exemples de menu fixe

http://webdesigncrowd.com/11-inspirational-fixed-position-menus/

21 exemples de menu fixe

http://webdesignledger.com/inspiration/21-examples-of-fixed-position-menus-in-web-design

Le module d'extension "Sticky Social Bar" pour votre Blogue

http://codecanyon.net/item/sticky-social-bar/1675421

Exemple d'utilisation du "Sticky Social Bar"

http://codecanyon.net/item/sticky-social-bar/full_screen_preview/1675421

Tutoriel pour installer 'Sharebar' dans Wordpress

http://www.youtube.com/watch?v=rENOWwm4B0o

Sources:

Article sur les tendances Web en 2012

http://webdesignledger.com/tips/web-design-trends-in-2012

Article sur les tendances Web en 2012

http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/

Site de tutoriels

http://autourdututo.fr/

Pour tous les fans de gadgets

Aller faire un tour sur ce site la.
http://iwanties.com/category/tech/page/10

Petite nouvelle techno du vendredi, si ça continue va falloir faire de l'optimisation sur des micro résolution pour les sites web :p  Dommage que le prix de vente soit si élevé sinon il y en aurait une panoplie sur le marché.   http://www.imwatch.it/ca-en/

Filtrer par une NavigationProperty "many to many" avec un EntityDatasource

Amateurs d'EntityDataSource, voici un truc pour VOUS !

Dans une relation de plusieurs à plusieurs, quand on veut faire un "select * from x inner join y where y.id = @id" il nous dit souvent :

"To extract a property of a collection element, use a subquery to iterate over the collection."

Pour palier à ce petit inconvénient il suffit de mettre

Where="EXISTS(SELECT Produits.ProduitId FROM it.Produits WHERE Produits.ProduitId = @id)"

Comme ça on utilise une sous requête comme il faut !
mais on n'a pas plus accès à la propriété à la multiplicity = * (many)...

Joyeux Codage !

PS. De plus, en VB ! Une belle manière d'accéder à sa NavigationProperty :

Dim listeDeProduitBois = CType((From p In db.Produits
From b In p.Bois1
Where b.BoisId = x.BoisId
Select p), ObjectQuery(Of Produits)).Include("Descriptions")

"Imports System.Data.Objects" pour le "ObjectQuery".

PS2. Un autre beau where (dans un beau tutorial): @PersonID IN (SELECT VALUE instructor.PersonID FROM it.People AS instructor)

découverte du jour (Révolution Tactile)

Bonjour à tous,
La découverte de la journée vient de Pinterest et est une toute nouvelle innovation pour les écrans tactiles de ce monde.  Je vous laisse aller voir le vidéo et vous faire votre propre idée.

http://vimeo.com/43431035

Gestion du temps avec une Pomme

L'autre jour nous avons vu le video de Scott Hanselman sur sa vision de la productivité,

Voici une précision sur la technique Pomodoro (livre gratuit online...) (wiki).
Basé sur le précepte que des pauses régulières favorisent l'agilité intellectuelle.

1. planifier la journée (todo liste, ordonner le travail, planifier des morceaux de 25 minutes)
2. Chronométrer 25 minutes (si dérangement écrire et reporter*, si fini avant -> réviser, si pas fini prend ta pause et on recommence !)
3. Prendre une pause de 5 minutes (faire un X sur une feuille, repos, assimiler le contenu, repos, écrire ce qui a été fait sur une feuille de records)

On ajoute les choses à faire (urgentes et/ou imprévues) à la fin de la todo liste.  On note les dérangements interne par une apostrophe et les externes par un dash.

On peut estimer avec des cases vides le nombre de pomodoro que ça prendra pour une longue tâche (mais plus que 5 on devrait pouvoir diviser cette tâche en items sous-jacents).

Feuille de records : on note la tâche, l'heure de début, le réel, l'estimé et des champs "différence 1, 2, 3, etc"  (en nbr de pomodoro).

À la fin de la journée on peut faire un post mortem en analysant la longueur réelle des tâches.

*aviser – négocier – mettre à l'horaire – rappeler
Feuille résumée

WEB
Compteurs
Idem, style "24"
GO ou tomato

Windows
KeepFocused a l'air le meilleur car il reste à l'écran et permet d'entrer des commentaires txt.
FocusBooster stylisé, reste à l'écran, a même le tic-tak et la pause d'inclus !  (celui que j'utilise présentement)

Un blog pour tous

Voici le nouveau blog de ProWeb qui se veut un endroit de partage des connaissances.  L'entreprise grossit et le blog semble l'outil le mieux désigné pour répondre à ce besoin tout en donnant un peu de crédibilité à l'entreprise (j'espère ;-)

Les commentaires sont ouvert à tous alors partagez le avec vos amis dans le domaine.

J'ai pris Blogger pour ne pas réinventer la roue et j'ai aimé l'expérience avec mon perso.

PS la mise en page est à venir...