Tous les articles dans Webdesign

32 Articles

HTML5 : orgueil et préjugés (Un petit point sur… )

html5

Quand on travaille dans l’univers du Web, que l’on soit marketing, rédacteur, journaliste, CEO digital et j’en passe (et je passe évidemment consultant, développeur…) on se DOIT de connaître le HTML !

Devenir riche avec WordPress #2 : Comprendre WordPress

WordPress nécessite de connaitre PHP/MySQL – PHP4 mais attention, la PHP5 arrive dans un an! et quelques notions d’environnement LAMP ou WAMP. A défaut de posséder ces notions, WordPress est un très bon moyen pour les acquérir ! WordPress étant plutôt souple et permissif, il est réellement très simple à prendre en main. Voici les concepts de base à aborder.

Documentation

Surtout, avec l’expérience de publication de WordPress,  il y a de très fortes chances que vous trouviez la fonction utile au bon moment en cherchant dans le codex (la documentation WordPress). C’est un autre point fort de WordPress, la communauté est tellement forte que l’on en oublierai presque la documentation ultra fournie et concise par défaut.

Il faut partir du principe de base (et c’est très confortable) que la fonction que l’on cherche à obtenir existe déjà ! Il faut alors chercher dans les tags, qui sont les fonctionnalités natives de WordPress (remonter les derniers commentaires) et en étudier les attributs (nombre à remonter, sous quel format etc.).
Sinon, se retourner vers les plugins pour une utilisation plus poussée.

Le petit plus consiste à avoir une feuille de référence ou « cheat sheet » qui donne une vue sur toute ses fonctionnalités : voir ici ou encore là.

Créer un site avec WordPress

WordPress est un rêve pour un Webdesigner. Tous les domaines de compétences sont représentés : Projet, Design, Intégration(HTML/CSS), Développement (PHP/SQL/JavaScript)… Il y a suffisamment de tutoriaux selon le domaine à aborder et son niveau – le tout est de s’y mettre!

Si vous souhaitez aller assez loin et faire « propre », je conseillerai ces excellentes vidéos, dont une :

mais là encore, que se soit pour débuter, créer un plugin ou un thème s’intéresser d’abord au CODEX WordPress, plus fourni en anglais !

Pour les plus avancés, un oeil sur la BDD :


Utilisation de la photographie en webdesign

La photo reste l’un des moyens les plus efficaces pour communiquer avec les exigences sociales modernes.

L’ère de la photographie numérique a largement contribué à l’essor du Web Design. De nombreux sites web utilisent la photographie comme une médiane entre les services, les produits, les contenus et leurs visiteurs. Voici quelques exemples.

Bing

Creative People

aedas

Brent Stirton journalist

ccccelt.org

Bottle Bell Photography

[+] – 20 sites utilisant la photographie comme première source de design.

[+] – 40 sites.

Sitemap, diagramme et storyboard (scénarimage)

Si vous souhaitez un plan du site propre et gagner sur l’intégration ou simplement pour présenter une arborescence, Slickmap propose un CSS rapidement personnalisable – pour 3 niveaux en tout cas.

slickmap

Dans le même registre Lovely Charts propose une application Flex (toute mimi l’interface…) digne d’un Flow Charter ou d’un Microsoft Visio, pour la création de diagramme et autres schémas types.

flowchart

sitemap

Un dernier outil complémentaire pour la création de story-board et bien tendance (iTunes like) : Balsamiq Mockup.

Utiliser WordPress comme CMS

Il y a certains points qu’il faut absolument penser avant de se décider à concevoir un site Web où WordPress serait utilisé comme CMS.
Devlounge a publié « Les choses à considérer lors de l’utilisation de WordPress comme un CMS », cet article doit absolument être lu par quiconque voulant utiliser WordPress comme CMS.
En substance :

  1. Lister les besoins pour déterminer ceux qui seront natifs, via plugins ou codés (hack) – certainement le cas pour des modules métiers.
  2. Lister les traductions nécessaires (surtout le Back Office) et les comparer à celles disponibles.
  3. Etablir une méthode pour garantir que les modifications ne seront pas écrasées à la mise à jour du noyau – et il faut pouvoir mettre à jour.
  4. Dresser une checklist de tests de compatibilité pour vérifier l’intégrité suite à une mise à jour.
  5. Analyser le type de contenu et sa proportion statique/Dynamique – utilisation de liveWriter.
  6. Conceptualiser la présentation pour la faire correspondre à un thème et à ses widgets.
  7. Réfléchir à la structure des permaliens – et du même coup aux catégories…

Quelques articles utiles :

  1. WordPress CMS Part 2: Theme Implementation
  2. How to Use WordPress for a Portfolio Site – Part 1 & Part 2
  3. How to use WordPress to run a magazine, news website
  4. Un article en français, histoire de.

A lire également, pour aller plus loin :

  1. (via) 101 Techniques for a Powerful CMS using WordPress
  2. Five Ways to Familiarize Clients with WordPress
  3. Don’t mess with my Toot Toot
  4. Using WordPress as CMS
  5. WordPress as a CMS (screencast)

Exemple d’utilisation sur le codex wordpress.

Les loaders font leur show

Il manque une galerie, dommage pour cet hommage.

prettyloaded

AJAX et les fenêtres modales.

Avec l’apparition des anti-popups dans nos navigateurs, les vrais-faux popups ou fenêtres modales connaissent un très grand succès.
Scriptaculous a connu son essor grâce à cette technique, puis Lightbox (quasi en même temps que la thickbox, greybox et autre modalbox) a su alléger la sauce avec jQuery en ne gardant que le framework Prototype. Videobox est son équivalent pour les vidéos via les Mootools et le SwfObject. Et c’est là que iBox reprend le système en autorisant divers media et n’oublie pas de proposer une astuce pour les navigateurs sans javascript – accessibilité donc…

Fenêtre modale

Il existe aujourd’hui une foule de scripts souvent basés sur Prototype.js. D’expérience, il faut toujours un peu trituré le CSS ou le javascript pour être sûr d’être crossbrowser et d’obtenir le résultat voulu (positionnement, animation…) surtout quand il s’agit d’y ajouter du Flash ou de faire dialoguer la modale avec son parent… bref pour les plus techniques d’entre nous allez donc jetez un œil sur ce comparatif très exhaustif :

Comparatif de clones Lighbox

Au passage notons deux excellents plugins wordpress qui utilisent le système lightbox : la version WordPress de iBox et le gestionnaire de formulaires des plus poussés j’ai nommé cForms II.

Enfin, le framework ASP.NET AJAX a encore … à faire à ce sujet.

Bravo si vous avez cliqué et lu tous les liens de cet article… :-)

Face.book.ous

Je remarque en ce moment tout plein de petits scripts prenant exemple sur les patterns ergonomiques de Facebook… Après la pagination voici l’auto complétion (celui-ci en moo tools). Techniquement c’est sympathique toujours…

Input Facebook

Wedesignippon

Des animations design du japonais Takashi Okada, un portfolio moderne et parfois… conceptuel !

Takashi

Des tendances du webdesign pour 2008

Regard sur les nouvelles tendances webdesign de 2008
Les choses ont nettement évolué depuis l’an dernier ; le tout « Web 2.0 » commence à passer de mode.
On remarque plus de couleurs riches et des textures plus rugueuses – une bonne nouvelle pour le salaire des graphistes qui vont surement être plus sollicités. Les formes sont plus généreuses : moins de coins arrondis -dommage pour le CSS 3… Et surtout ce super effet du reflet dans l’eau commence à décliner. Allons-y pour examiner quelques tendances à contre-trendy.

webdesign : formes 2008

1) Le retour de la mascotte et du Cartoon
Has been la secrétaire parlant dans un casque-téléphone, on peut aujourd’hui sans complexe utiliser un personnage de dessin animé pour atteindre le même effet. Une tendance qui demande des compétences aiguës en graphisme et exige une utilisation ingénieuse sur un site boursier ou corporate

2) Des tourbillons, des bavures, des arabesques : la palette s’envole !
Les formes chaotiques et complexes viennent donner du piquant à la toile claire et aseptisée du Web 2.0, faisant la part belle aux formes vectorisées de bonne qualité.

  • Rawnet
  • TaDesign
  • Høy puls
  • imloušekStudio
  • 3) Non aux bordures
    L’arrivée des illustrations précédentes et le meilleur support de CSS dans les navigateurs a pour effet de briser les limites, les bordures sont brisées, les cadres embellis.

    4) Le RSS sans complexe
    L’utilisation des fils RSS se démocratise et son icône s’affiche comme un élément honorifique… et on le comprend.

    5) Des couleurs riches sur des fonds sombrent
    Les teintes habituelles web 2,0 ont atténuées un peu vers un ensemble de teintes terreuses,. Les rouges foncés et les teintes brunes sont un choix populaire. De pair avec l’omniprésence d’un fond gris foncé, elles sont aujourd’hui favorisées par un grand nombre de sites.

    bordures 2008

    [+] – see

     

    Pagination web : bonnes pratiques

    paginationSouvent délaissée mais tellement usitée, la pagination est – en tous cas devrait être – le composant le plus cliqué. C’est elle qui peut amener l’internaute à en « en savoir plus » ou peut le frustrer.
    Quelle que soit la technologie employée :

    1. Il faut préférer mettre en relief le composant plutôt que de le fondre dans le décor par souci esthétique.
    2. Adapter au nombre de pages. Inutile d’afficher du n°1 jusqu’au n°351 sur plusieurs lignes.
    3. Etre accessible : tabkeys ou balise title sur les liens et utiliser des couleurs accessibles et contrastées.
    4. Fournir les grandes zones cliquables et espacer les liens.
    5. Ne pas utiliser de souligner.
    6. Identifier la page actuelle.
    7. Fournir des liens Suivant et Précédent.
    8. Placer des liens Premier et Dernier.

    » Voir la gallerie de pagination sur smashingmagazine.

    Second Life on a Branding Spree

    Un monde virtuel qui s’attire de plus en plus les critiques de la communauté quant à l’intrusion de publicités et des sociétés privées qui y voient une manne grandissante.
    Nonobstant cette montée de mécontentements, allant jusqu’à provoquer des attaques terroristes – et oui comme dans la vraie vie… il y a donc les entreprises qui importent leur marque dans ce monde et d’autres encor qui profitent de ces marques pour faire valoir la leur.
    Ainsi, peut-on découvrir l’Apple store :

    Mais ne nous y fions pas… il ne s’agit pas comme les rumeurs le suggèrent de l’implantion de Mac ou encore d’une création d’un geek Mac’Addict… Mais bien d’une publicitée pour une société de réalisation 3D.
    Pour vous y rendre SURL.
    Quant à savoir ce qu’en pense la marque de la Pomme mystère. Elle bénéficie quand même d’une introduction dans le monde virtuel sans rien débourser et d’une finition … « meilleure que la moyenne ».

    De nombreux tutoriaux apparaissent pour construire « son monde » dans Second life, mais on ne construit pas un univers 3D comme on pouvait autrefois créer un site HTML en plaquant un fond fushia et des gifs animés… aussi ce genre de « prestataires » a un avenir assuré, s’il s’accorde le droit d’améliorer le rendu 3D du monde, vraiment rédibitoire pour le moment.

    ouvrir