background preloader

31 outils en ligne simples et efficaces pour les travailleurs du web

31 outils en ligne simples et efficaces pour les travailleurs du web

Comment devenir un web-designer professionnel (étape par étape) Bonjour, Dans cet article, je vais vous parler des erreurs que la plupart des webmasters et webdesigners commissent dans la création du thème de leurs sites web. Je vais parler du choix de couleurs et comment les bien choisir, qui peuvent donner de l’inspiration aux visiteurs de votre site dès la première seconde. Pour savoir ces astuces, lisez bien et attentivement cet article ! Comment peut-on savoir si un design est professionnel ou non ? Pour mieux comprendre, je vais utiliser deux images différentes, la première est un exemple d’un site-web qui n’est pas professionnel, dans la deuxième image, une impression d’écran d’un site-web professionnel. NON-Professionnel Voici une impression d’écran d’un site-web que j’ai trouvé en cherchant dans le moteur de recherche Google, seulement pour ne pas parler d’un site d’un webmaster que j’ai choisi cet exemplaire. Comme vous remarquez, le design est plein de couleurs, un mélange entre le jaune, rouge, vert, marron, rose… Professionnel Un zoom :

LESS : Changez la façon d’écrire vos CSS Il est vrai qu’écrire ses feuilles de style n’est pas vraiment la partie la plus intéressante lorsque vous développez un site Web, il arrive souvent d’écrire plusieurs fois le même code un peu partout et le changement d’une couleur par exemple se fait généralement en parcourant chacune de nos feuilles de styles à la recherche de son code hexadécimal. C’est laborieux, compliqué et pénible. Existe-t’il un outil ou un langage qui nous permette de les écrire d’une façon plus dynamique, plus intéressante et surtout plus pratique ? c’est le sujet de ce billet en présentant le langage Less qui nous permet de générer des feuilles de style d’une façon nouvelle, à ne pas confondre avec les expressions CSS qui permettent elles aussi de dynamiser un peu l’écriture des feuilles de style, d’ailleurs celles-ci sont à proscrire. Expressions CSS Au lieu d’utiliser ceci : Préférez cela : Less.css En se basant sur la syntaxe de CSS, il évite de devoir complètement réapprendre un nouveau langage. Fichier .less

4 ressources pour bien débuter en webdesign adaptatif | Blog Loriskumo Le responsive webdesign (webdesign adaptatif en français) est bien plus qu’en tendance, c’est l’avenir du web dans bien des cas. Si vous ne vous êtes pas encore lancé dans cette aventure voici quelques ressources pour débuter. Responsive Web Design de Ethan Marcotte Merci A Book Apart pour l’image L’ouvrage parfait si ce n’est indispensable pour débuter. 143 pages qui vous introduiront le sujet, puis vous aideront à débuter. Disponible directement chez A Book Apart → Screenfly Un moyen simple de tester les tailles d’écrans. Screenfly par QuirkTools→ Adaptive Images On a beau prévoir une mise en page mobile, si l’utilisateur doit charger en 3G des images prévues à la base pour un grand écran d’ordinateur en WiFi, son expérience peut s’en trouver gâchée. Adaptives Images → CSS Elastic Videos chez Web Designer Wall Si l’on peut aisément avoir des images fluides dans notre design adaptatif, il en est autre chose pour les vidéos. CSS: Elastic Videos → Ma petite collection Mon Pearltrees: Responsive →

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Création d'un design étape par étape - Etape n°1 : Le code xhtml Titre de page, d'article... Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique cum. His ex altera definitionem, in sumo eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in alterum torquatos consetetur vel. Autre titre de page ou d'article, c'est selon ! Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Sous titre à cet article Lorem ipsum no sit altera forensibus, vix ea veniam fierent molestie. Autre sous-titre Mel etiam oportere ex. Retour à Alsacreations 5 outils en ligne pour tester vos sites Si vous êtes web designer ou développeur Web, alors vous devez savoir à quel point il est important de s’assurer que le produit final est dépourvu de tous bugs ou erreurs. Les cinq sites que voue je vais décrire dans la suite de cet article, vont aider les développeurs et les concepteurs de sites Web à valider et vérifier le code du site Web et ce, afin de déceler toute sorte d’erreurs. Le W3C Markup Validation Service permet aux utilisateurs de valider leurs sites Web soit en fournissant un lien en ligne vers le fichier HTML, XHTML, SMIL, MathML ou soit par le téléchargement du fichier, dans le même format que mentionné précédemment. Si vous avez juste besoin de vérifier une partie spécifique du code, vous pouvez manuellement coller votre portion de code depuis l’onglet « Validate by Direct Input » pour le valider. Note : Un autre service, W3C CSS Validation Service, va réaliser à l’identique le traitement offert par le service « Markup », mais concernant la CSS.

Mon premier site: les 10 erreurs à éviter | Le Site Internet Des fichiers trop lourd Il est très important de faire attention à la taille des fichiers que l’on utilise sur son site. . Hors l’internaute s’attend à avoir l’information rapidement, si votre page ne s’affiche pas immédiatement ou presque vous perdrez beaucoup de visiteurs. Attention à ne pas tomber dans un piège: tester l’affichage de son site chez soi n’est pas représentatif de l’expérience que vivra un autre internaute. Si vos fichiers sont déjà stockés sur votre ordinateur une page pourra se charger rapidement chez vous alors que le visiteur, lui, devra télécharger ces fichiers, ce qui prend plus de temps. De plus tout le monde n’a pas la même connection internet. Il est possible de tester le poids des pages de son site sur www.websiteoptimization.com/ . Les images L’erreur fréquente du débutant consiste à prendre une photo avec son appareil photo et à l’utiliser telle quelle sur son site. Les blogs et CMS font souvent ce travail sur les photos automatiquement. Les autres fichiers

20 outils pour aider les jeunes développeurs à créer leur site internet Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web. Poser les bases de son projet : Choisir son CMS : Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Créer sa charte graphique : Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. Créer une maquette : Composer une grille : Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Prévoir ses espaces publicitaires Choisir ses icônes Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. La recherche de la typographie idéale est une quête de longue haleine. Développer son site : Débuter en HTML5 : Innover grâce à la CSS3 : Tester et débugger :

Conception d'un site web Cette page présente quelques considérations sur la conception de sites web. Certaines sont énoncées par des spécialistes et d'autres sont plus personnelles. Je ne prétends pas détenir la Vérité Absolue; je me propose simplement de vous faire profiter de mon expérience en tant que webmaster et surfeur. 1. Il convient tout d'abord d'apporter une précision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constituée d'un certain nombre de pages web. 1. Quel est l'objectif visé? 2. Un éditeur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, .... 3. Structurez, hiérarchisez votre site! Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation. 4. Deux principes de base - La page d'accueil est la plus importante - Navigation dans le site - Les pages doivent être lisibles - Apparence graphique Deux principes de base Le plus important, ce sont les visiteurs! 5. 6. 7.

10 conseils d’ergonomie basés sur des études de recherche Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses. Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. 1. L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. À la base, cette idée semble tout à fait logique, car, bien entendu, un utilisateur sera frustré s’il passe beaucoup de temps à cliquer ici et là pour trouver ce qu’il cherche. Mais pourquoi une limite arbitraire de trois clics ? Source: User Interface Engineering 2. Le Dr. Source : Alertbox 3. 4. 5. 6. 7.

Les sites de référence dans le webdesign Sources d'inspiration et compiles de Webdesign Css Nous vous proposons de découvrir ici des sites qui ne manqueront pas de vous apporter de l'inspiration pour construire le vôtre. Css-design est une large vitrine de sites web classés par catégories où les designs sont très riches et très variés. Il y en a pour tous les goûts! En voici d'autres du même genre: Cssmania, Bestwebgallery, Mydesignaward, Webcreme, Cssimpress, Cssburst Si vous cherchez des idées pour présenter un formulaire, un lecteur vidéo ou encore une boutique E-commerce etc... Technique CSS et autres éléments de Webdesign Un aspect plus technique pour mieux comprendre l'articulation Css + XHTML et autres éléments du webdesign. Css 4 design est un site intéressant et agréable à lire pour mieux comprendre le Css. Alsacreations est certainement un incontournable pour celui qui cherche à approfondir la technique du Css. Webdesign.2803 nous propose de nombreux trucs et astuces sur le webdesign et autres techniques d'intégration.

Related: