agence de service informatique, webdesign, graphisme et agence de communication partagé pour les PMEs au Luxembourg, France et Belgique https://www.noemiconcept.com/index.php/departement-communication/news-departement-com/tag/design.feed 2024-06-17T05:27:35Z Joomla! 1.5 - Open Source Content Management 2012-10-12T05:01:22Z 2012-10-12T05:01:22Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/205486-une-énorme-documentation-pour-les-technologies-web-webplatform.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/83bc65b33c7067b29c21f98f95e983dc_S.jpg" alt="Une énorme documentation pour les technologies Web - WebPlatform" /></div><div class="K2FeedIntroText"><p>WebPlatform est une communauté ouverte, soutenue par les géants de l'Internet, pour documenter les technologies du web.</p> <div style="text-align: center;"> </div><div class="K2FeedFullText"> <a target="_blank" title="WebDesign Une énorme documentation pour les technologies Web - WebPlatform" href="https://www.webplatform.org/"><img alt="Une_norme_documentation_pour_les_technologies_Web_-_WebPlatform" src="https://www.noemiconcept.com/images/stories/articles/Une_norme_documentation_pour_les_technologies_Web_-_WebPlatform.jpg" height="353" width="640" /></a></div> <p>Le site vise à fournir des informations exactes, mises à jour régulièrement, les références complètes et des tutoriels pour chaque partie du développement côté client et du design, avec les bugs révélés et expliqués.<br /><br />Il a déjà un contenu assez important pour des catégories telles que JavaScript, HTML, CSS, SVG, Canvas et plus encore.<br /><br />En plus de ce contenu, il y a aussi une FAQ où n'importe qui peut poser des questions relatives au web design ou au dev à une communauté active pour obtenir des réponses rapides.<br /><br />Pour la communauté de conception de sites Web et de developpement qui a grandi avec W3Schools, plateforme web est un autre incontournable signet.</p></div><div class="K2FeedTags"><ul><li>énorme</li><li>documentation</li><li>pour</li><li>technologies</li><li>web</li><li>WebPlatform</li><li>javascript</li><li>html</li><li>css</li><li>svg</li><li>FAQ</li><li>design</li><li>webDesign</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/83bc65b33c7067b29c21f98f95e983dc_S.jpg" alt="Une énorme documentation pour les technologies Web - WebPlatform" /></div><div class="K2FeedIntroText"><p>WebPlatform est une communauté ouverte, soutenue par les géants de l'Internet, pour documenter les technologies du web.</p> <div style="text-align: center;"> </div><div class="K2FeedFullText"> <a target="_blank" title="WebDesign Une énorme documentation pour les technologies Web - WebPlatform" href="https://www.webplatform.org/"><img alt="Une_norme_documentation_pour_les_technologies_Web_-_WebPlatform" src="https://www.noemiconcept.com/images/stories/articles/Une_norme_documentation_pour_les_technologies_Web_-_WebPlatform.jpg" height="353" width="640" /></a></div> <p>Le site vise à fournir des informations exactes, mises à jour régulièrement, les références complètes et des tutoriels pour chaque partie du développement côté client et du design, avec les bugs révélés et expliqués.<br /><br />Il a déjà un contenu assez important pour des catégories telles que JavaScript, HTML, CSS, SVG, Canvas et plus encore.<br /><br />En plus de ce contenu, il y a aussi une FAQ où n'importe qui peut poser des questions relatives au web design ou au dev à une communauté active pour obtenir des réponses rapides.<br /><br />Pour la communauté de conception de sites Web et de developpement qui a grandi avec W3Schools, plateforme web est un autre incontournable signet.</p></div><div class="K2FeedTags"><ul><li>énorme</li><li>documentation</li><li>pour</li><li>technologies</li><li>web</li><li>WebPlatform</li><li>javascript</li><li>html</li><li>css</li><li>svg</li><li>FAQ</li><li>design</li><li>webDesign</li><ul></div> 2014-11-19T06:27:11Z 2014-11-19T06:27:11Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/206543-webdesign-cadre-de-css-pour-la-conception-du-design-selon-google-material-ui.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/21e3561d41d54fa95b8335f110b4d935_S.jpg" alt="Cadre de CSS pour la conception du design selon Google - Material UI" /></div><div class="K2FeedIntroText"><p> <p>Material UI est un cadre CSS et un ensemble de composants qui implémentent les spécifications Design que Google avait proposé.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Cadre de CSS pour la conception du design selon Google - Material UI" href="https://material-ui.com/"><img alt="WebDesign Cadre de CSS pour la conception du design selon Google - Material UI" src="https://www.noemiconcept.com/images/stories/articles/WebDesign__Cadre_de_CSS_pour_la_conception_du_design_selon_Google_-_Material_UI.jpg" /></a></p> <p>Material UI&nbsp;est disponible en paquet de NPM (Node Packaged Modules).</p> <p>Le cadre de CSS est codé au format Less, vous aurez donc besoin de le compiler avant de l'utiliser.</p> <p>Les styles sont séparés en 2 moins de fichiers qui vous permet de remplacer toutes les variables définies dans le ficher custom-variables.less sans avoir à modifier les fichiers sources matérielles-ui directement.</p> </p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>cadre</li><li>css</li><li>pour</li><li>conception</li><li>design</li><li>selon</li><li>google</li><li>Material</li><li>UI</li><li>less</li><li>NPM</li><li>site</li><li>web</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/21e3561d41d54fa95b8335f110b4d935_S.jpg" alt="Cadre de CSS pour la conception du design selon Google - Material UI" /></div><div class="K2FeedIntroText"><p> <p>Material UI est un cadre CSS et un ensemble de composants qui implémentent les spécifications Design que Google avait proposé.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Cadre de CSS pour la conception du design selon Google - Material UI" href="https://material-ui.com/"><img alt="WebDesign Cadre de CSS pour la conception du design selon Google - Material UI" src="https://www.noemiconcept.com/images/stories/articles/WebDesign__Cadre_de_CSS_pour_la_conception_du_design_selon_Google_-_Material_UI.jpg" /></a></p> <p>Material UI&nbsp;est disponible en paquet de NPM (Node Packaged Modules).</p> <p>Le cadre de CSS est codé au format Less, vous aurez donc besoin de le compiler avant de l'utiliser.</p> <p>Les styles sont séparés en 2 moins de fichiers qui vous permet de remplacer toutes les variables définies dans le ficher custom-variables.less sans avoir à modifier les fichiers sources matérielles-ui directement.</p> </p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>cadre</li><li>css</li><li>pour</li><li>conception</li><li>design</li><li>selon</li><li>google</li><li>Material</li><li>UI</li><li>less</li><li>NPM</li><li>site</li><li>web</li><ul></div> 2012-04-23T12:51:59Z 2012-04-23T12:51:59Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/205241-outil-de-test-de-design-en-temps-réel-screenqueries.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/28962f987227967a21fa863168d19bad_S.jpg" alt="Outil de test de Design en temps réel - Screenqueri.es" /></div><div class="K2FeedIntroText"><p>Avec la multiplication d'appareils pouvant surfer sur le web, il est important de tenir compte de toutes les différentes résolutions possibles disponibles lors de la création/optimisation de votre page web.</p> </div><div class="K2FeedFullText"> <div style="text-align: center;"><a target="_blank" href="https://screenqueri.es/"><img alt="WebDesign_outil_de_test_en_temps_reel" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_outil_de_test_en_temps_reel.jpg" height="468" width="600" /></a></div> <p>Screenqueri.es est un projet web libre à utiliser et permetant de tester facilement les contraintes de tels dispositif en utilisant l'URL de votre page web et en sélectionnant le périphérique mobile ou une tablette.<br /><br />L'application charge le site et vous aider à voir "ce qui se passe" avec l'interface selectionnée. Et, vous n'êtes pas limité à des formats prédéfinis, mais peut changer la largeur / hauteur en jouant avec les règles prévues à cet effet.</p> <p>En outre, il est possible de changer l'orientation d'un simple clic.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>outil</li><li>test</li><li>design</li><li>iPad</li><li>Iphone</li><li>htc</li><li>URL</li><li>tablette</li><li>application</li><li>web</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/28962f987227967a21fa863168d19bad_S.jpg" alt="Outil de test de Design en temps réel - Screenqueri.es" /></div><div class="K2FeedIntroText"><p>Avec la multiplication d'appareils pouvant surfer sur le web, il est important de tenir compte de toutes les différentes résolutions possibles disponibles lors de la création/optimisation de votre page web.</p> </div><div class="K2FeedFullText"> <div style="text-align: center;"><a target="_blank" href="https://screenqueri.es/"><img alt="WebDesign_outil_de_test_en_temps_reel" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_outil_de_test_en_temps_reel.jpg" height="468" width="600" /></a></div> <p>Screenqueri.es est un projet web libre à utiliser et permetant de tester facilement les contraintes de tels dispositif en utilisant l'URL de votre page web et en sélectionnant le périphérique mobile ou une tablette.<br /><br />L'application charge le site et vous aider à voir "ce qui se passe" avec l'interface selectionnée. Et, vous n'êtes pas limité à des formats prédéfinis, mais peut changer la largeur / hauteur en jouant avec les règles prévues à cet effet.</p> <p>En outre, il est possible de changer l'orientation d'un simple clic.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>outil</li><li>test</li><li>design</li><li>iPad</li><li>Iphone</li><li>htc</li><li>URL</li><li>tablette</li><li>application</li><li>web</li><ul></div> 2015-11-03T06:10:56Z 2015-11-03T06:10:56Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/207024-webdesign-un-ensemble-de-composants-react-respectant-le-googles-material-design-react-toolbox.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/97a023ed877de0767c833f0193aaaf2a_S.jpg" alt="Un ensemble de composants React respectant le Google's Material Design - react-toolbox" /></div><div class="K2FeedIntroText"><p>react-toolbox est un ensemble de composants reprenant l'ensembles des directives proposées par Google dans son material Design.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Un ensemble de composants React respectant le Google's Material Design - react-toolbox" href="https://react-toolbox.com/#/"><img alt="WebDesign Un ensemble de composants React respectant le Googles Material Design - react-toolbox" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Un_ensemble_de_composants_React_respectant_le_Googles_Material_Design_-_react-toolbox.jpg" /></a></p> <p>Ces éléments utilisent la puissance des modules de feuilles de style CSS écrites en SASS.</p> <p>Cet ensemble est déjà bien complet puisque qu'il comprend des boutons, des boites à cocher, des boites de dialogues, des polices d'icônes .. etc</p> <p>Enfin, comme il est distribué sous <a target="_blank" title="licence MIT" href="https://fr.wikipedia.org/wiki/Licence_MIT">licence MIT</a>, vous pouvez l'utiliser pour vos projets de site web personnels ou professionnels, l'adapter à vos besoins, et surtout participer à son développement.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>ensemble</li><li>Composants</li><li>React</li><li>respectant</li><li>google</li><li>Material</li><li>design</li><li>reacttoolbox</li><li>site</li><li>web</li><li>licence</li><li>MIT</li><li>open</li><li>source</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/97a023ed877de0767c833f0193aaaf2a_S.jpg" alt="Un ensemble de composants React respectant le Google's Material Design - react-toolbox" /></div><div class="K2FeedIntroText"><p>react-toolbox est un ensemble de composants reprenant l'ensembles des directives proposées par Google dans son material Design.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Un ensemble de composants React respectant le Google's Material Design - react-toolbox" href="https://react-toolbox.com/#/"><img alt="WebDesign Un ensemble de composants React respectant le Googles Material Design - react-toolbox" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Un_ensemble_de_composants_React_respectant_le_Googles_Material_Design_-_react-toolbox.jpg" /></a></p> <p>Ces éléments utilisent la puissance des modules de feuilles de style CSS écrites en SASS.</p> <p>Cet ensemble est déjà bien complet puisque qu'il comprend des boutons, des boites à cocher, des boites de dialogues, des polices d'icônes .. etc</p> <p>Enfin, comme il est distribué sous <a target="_blank" title="licence MIT" href="https://fr.wikipedia.org/wiki/Licence_MIT">licence MIT</a>, vous pouvez l'utiliser pour vos projets de site web personnels ou professionnels, l'adapter à vos besoins, et surtout participer à son développement.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>ensemble</li><li>Composants</li><li>React</li><li>respectant</li><li>google</li><li>Material</li><li>design</li><li>reacttoolbox</li><li>site</li><li>web</li><li>licence</li><li>MIT</li><li>open</li><li>source</li><ul></div> 2010-03-23T15:45:11Z 2010-03-23T15:45:11Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/150-portfolio-design-web-event-video-et-print-de-noemiconcept.html Administrator olivier@noemiconcept.com

<div class="K2FeedIntroText"><div style="text-align: center;"><a href="https://www.noemiconcept.com/index.php/fr/departement-communication/portfolio"><img alt="logo-event-print" src="https://www.noemiconcept.com/images/stories/zoocatalog/event/logo-event-print.png" width="150" height="150" /><img alt="logo-webdesign" src="https://www.noemiconcept.com/images/stories/zoocatalog/sitesweb/logo-webdesign.png" width="150" height="150" /><img alt="logo-video" src="https://www.noemiconcept.com/images/stories/zoocatalog/video/logo-video.png" width="150" height="150" /></a><br /><a href="https://www.noemiconcept.com/index.php/fr/departement-communication/portfolio">Visitez le Portfolio Design, Web, Event, Video et Print de Noemi concept S.A. Département Communication</a></div></div><div class="K2FeedTags"><ul><li>Noemiconcept</li><li>portfolio</li><li>design</li><li>event</li><li>print</li><li>video</li><ul></div>

<div class="K2FeedIntroText"><div style="text-align: center;"><a href="https://www.noemiconcept.com/index.php/fr/departement-communication/portfolio"><img alt="logo-event-print" src="https://www.noemiconcept.com/images/stories/zoocatalog/event/logo-event-print.png" width="150" height="150" /><img alt="logo-webdesign" src="https://www.noemiconcept.com/images/stories/zoocatalog/sitesweb/logo-webdesign.png" width="150" height="150" /><img alt="logo-video" src="https://www.noemiconcept.com/images/stories/zoocatalog/video/logo-video.png" width="150" height="150" /></a><br /><a href="https://www.noemiconcept.com/index.php/fr/departement-communication/portfolio">Visitez le Portfolio Design, Web, Event, Video et Print de Noemi concept S.A. Département Communication</a></div></div><div class="K2FeedTags"><ul><li>Noemiconcept</li><li>portfolio</li><li>design</li><li>event</li><li>print</li><li>video</li><ul></div> 2012-03-09T07:20:12Z 2012-03-09T07:20:12Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/205180-suite-dîcones-pour-applications-web.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedIntroText"><p style="text-align: center;"><img width="800" height="600" src="https://www.noemiconcept.com/images/stories/articles/2012_03_09_teasing.png" alt="2012_03_09_teasing" /></p> <p>Les icônes (ou pictogrammes) existent depuis très longtemps, mais ceux qui sont spécifiquement conçus pour les applications Web font de plus en plus leur apparition ces derniers temps.<br /><br />Ils sont si souples et agréables à utiliser, chaque icône peut être redimensionnée, coloré, changé de sens et il est possible de leur donner style différent très facilement. Pas besoin de les pirater en utilisant les logiciels de retouche d'image généralement tout peut se faire à l'aide d'un CSS.<br /><br />Et ils permettent de donner un peu plus de style dès qu'ils sont utilisé dans les boutons, les menus, les listes ... etc</p> <p> </p> </div><div class="K2FeedFullText"> <br />Aujourd'hui vous trouverez des icones parfaits pour les applications web et peuvent renouveler vos anciens icones. Et en plus ils sont libres et gratuit.<br /><br /><a href="https://www.entypo.com/" target="_blank"><span style="background-color: #ffcc99;">Entypo (+ de 100 articles)</span></a> <p> </p> <p> </p> <p style="text-align: center;"><a href="https://www.entypo.com/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/entypo.jpg" alt="entypo" /></a></p> <p>Entypo est une police icône de haute qualité avec plus d'une centaine d'articles et disponibles dans une police OpenType, EPS vecteur et polices Web.<br /><br /><a href="https://fortawesome.github.com/Font-Awesome/" target="_blank"><span style="background-color: #ffcc99;">Font Awesome (+ de 150 articles)</span></a></p> <div style="text-align: center;"><a href="https://fortawesome.github.com/Font-Awesome/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/font_awesome.gif" alt="font_awesome" /></a></div> <p><br /><br />Font Awesome est conçu pour être utilisé avec Twitter Bootstrap mais peut aussi s'intégrer dans n'importe quel autre projet Web.<br /><br />Il y a plus de 150 articles, est livré avec différents formats de police, CSS et LESS inclus.<br /><br /><br /><a href="https://www.fontsquirrel.com/fonts/modern-pictograms" target="_blank"><span style="background-color: #ffcc99;">Modern Pictograms (+ de 90 articles)</span></a></p> <p style="text-align: center;"><a href="https://www.fontsquirrel.com/fonts/modern-pictograms" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/modern_pictograms.gif" alt="modern_pictograms" /></a></p> <p><br />Un ensemble de 90 + pictogrammes slicks qui peuvent être utilisés dans n'importe quelle taille (mais fonctionnent beaucoup mieux dans un format supérieur à 24px).<br /><br /><a href="https://somerandomdude.com/work/iconic/" target="_blank"><span style="background-color: #ffcc99;">Iconic (171 articles)</span></a></p> <p style="text-align: center;"><a href="https://somerandomdude.com/work/iconic/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/iconic.gif" alt="iconic" /></a></p> <p><br />Iconic est un ensemble impressionnant qui est disponible dans des formats raster, vecteur et de police.<br /><br />Il inclut même des scripts JSX et Python pour vous permettre de construire votre propre PNG, SVG et les fichiers de polices que vous souhaitez.<br /><a href="https://www.justbenicestudio.com/studio/websymbols/" target="_blank"><br /><span style="background-color: #ffcc99;">Web Symbols Typeface (+ de 75 articles)</span></a></p> <p style="text-align: center;"><a href="https://www.justbenicestudio.com/studio/websymbols/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/web_symbols_typeface.gif" alt="web_symbols_typeface" /></a></p> <p>Web Symbols est une poice faite uniquement d'icônes. Elle est construite avec de nombreuses icônes populaires, comme les réseaux sociaux ou les actions.<br /><br /><a href="https://icons.marekventur.de/" target="_blank"><span style="background-color: #ffcc99;">Raphaël Icon-Set via @font-face (+ de 100 articles)</span></a></p> <div style="text-align: center;"><a href="https://icons.marekventur.de/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/raphael-font_face_icon_set.gif" alt="raphael-font_face_icon_set" /></a></div> <p><br /><br />Voici le Raphaël Icon-Set converti en webfont. Il y a plus de 100 articles, très clairement conçus et tous adaptés pour les applications web.<br /><br /><a href="https://fontfabric.com/social-media-icons-pack/" target="_blank"><span style="background-color: #ffcc99;">Social Media Pictograms (74 articles)</span></a></p> <div style="text-align: center;"><a href="https://fontfabric.com/social-media-icons-pack/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/social_media_pictograms.jpg" alt="social_media_pictograms" /></a></div> <p><br /><br />Ces 74 icônes sont presque tous issu du domaine du réseau social.Selon si les lettres utilisées sont en majuscules ou en minuscules, ils apparaissent avec ou sans cercles.<br /><br /><a href="https://xperiments.es/blog/en/free-pulsarjs-fontface-iconfont/" target="_blank"><span style="background-color: #ffcc99;">PulsarJS @FontFace (73 articles)</span></a></p> <p> </p> <p style="text-align: center;"><a href="https://xperiments.es/blog/en/free-pulsarjs-fontface-iconfont/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/pulsarjs-font_face.gif" alt="pulsarjs-font_face" /></a></p> <p><br />Une police icône, avec 73 articles, conçu pour un développement d'application pour mobile, mais elle s'intégre parfaitement pour tout projet web.<br /><br /><br /><a href="https://www.heydonworks.com/a-free-icon-web-font" target="_blank"><span style="background-color: #ffcc99;">Heydings Icons (60 articles)</span></a></p> <p> </p> <p style="text-align: center;"><a href="https://www.heydonworks.com/a-free-icon-web-font" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/heydings_icons.gif" alt="heydings_icons" /></a></p> <p>Heydings Icons est une suite de 60 icônes qui sont tous de haute qualité.<br /><br /><a href="https://lucianmarin.com/peculiar/" target="_blank"><span style="background-color: #ffcc99;">Peculiar (45 articles)</span></a></p> <p style="text-align: center;"><a href="https://lucianmarin.com/peculiar/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/peculiar.gif" alt="peculiar" /></a></p> <p>Peculiar est un ensemble d'éléments simple qui sont tous construits avec HTML + CSS.<br /><br />La taille minimale qu'ils peuvent être utilisés est 16px et il y a 45 icônes.</p> <p> </p> <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow: hidden;"> <h3><a target="_blank" href="https://www.entypo.com/">Entypo</a> (100+ items)</h3> </div></div><div class="K2FeedTags"><ul><li>internet</li><li>design</li><li>web</li><li>open</li><li>Free</li><li>applications</li><li>Suite</li><li>îcones</li><li>pour</li><li>icons</li><li>source</li><li>gratuit</li><ul></div>

<div class="K2FeedIntroText"><p style="text-align: center;"><img width="800" height="600" src="https://www.noemiconcept.com/images/stories/articles/2012_03_09_teasing.png" alt="2012_03_09_teasing" /></p> <p>Les icônes (ou pictogrammes) existent depuis très longtemps, mais ceux qui sont spécifiquement conçus pour les applications Web font de plus en plus leur apparition ces derniers temps.<br /><br />Ils sont si souples et agréables à utiliser, chaque icône peut être redimensionnée, coloré, changé de sens et il est possible de leur donner style différent très facilement. Pas besoin de les pirater en utilisant les logiciels de retouche d'image généralement tout peut se faire à l'aide d'un CSS.<br /><br />Et ils permettent de donner un peu plus de style dès qu'ils sont utilisé dans les boutons, les menus, les listes ... etc</p> <p> </p> </div><div class="K2FeedFullText"> <br />Aujourd'hui vous trouverez des icones parfaits pour les applications web et peuvent renouveler vos anciens icones. Et en plus ils sont libres et gratuit.<br /><br /><a href="https://www.entypo.com/" target="_blank"><span style="background-color: #ffcc99;">Entypo (+ de 100 articles)</span></a> <p> </p> <p> </p> <p style="text-align: center;"><a href="https://www.entypo.com/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/entypo.jpg" alt="entypo" /></a></p> <p>Entypo est une police icône de haute qualité avec plus d'une centaine d'articles et disponibles dans une police OpenType, EPS vecteur et polices Web.<br /><br /><a href="https://fortawesome.github.com/Font-Awesome/" target="_blank"><span style="background-color: #ffcc99;">Font Awesome (+ de 150 articles)</span></a></p> <div style="text-align: center;"><a href="https://fortawesome.github.com/Font-Awesome/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/font_awesome.gif" alt="font_awesome" /></a></div> <p><br /><br />Font Awesome est conçu pour être utilisé avec Twitter Bootstrap mais peut aussi s'intégrer dans n'importe quel autre projet Web.<br /><br />Il y a plus de 150 articles, est livré avec différents formats de police, CSS et LESS inclus.<br /><br /><br /><a href="https://www.fontsquirrel.com/fonts/modern-pictograms" target="_blank"><span style="background-color: #ffcc99;">Modern Pictograms (+ de 90 articles)</span></a></p> <p style="text-align: center;"><a href="https://www.fontsquirrel.com/fonts/modern-pictograms" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/modern_pictograms.gif" alt="modern_pictograms" /></a></p> <p><br />Un ensemble de 90 + pictogrammes slicks qui peuvent être utilisés dans n'importe quelle taille (mais fonctionnent beaucoup mieux dans un format supérieur à 24px).<br /><br /><a href="https://somerandomdude.com/work/iconic/" target="_blank"><span style="background-color: #ffcc99;">Iconic (171 articles)</span></a></p> <p style="text-align: center;"><a href="https://somerandomdude.com/work/iconic/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/iconic.gif" alt="iconic" /></a></p> <p><br />Iconic est un ensemble impressionnant qui est disponible dans des formats raster, vecteur et de police.<br /><br />Il inclut même des scripts JSX et Python pour vous permettre de construire votre propre PNG, SVG et les fichiers de polices que vous souhaitez.<br /><a href="https://www.justbenicestudio.com/studio/websymbols/" target="_blank"><br /><span style="background-color: #ffcc99;">Web Symbols Typeface (+ de 75 articles)</span></a></p> <p style="text-align: center;"><a href="https://www.justbenicestudio.com/studio/websymbols/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/web_symbols_typeface.gif" alt="web_symbols_typeface" /></a></p> <p>Web Symbols est une poice faite uniquement d'icônes. Elle est construite avec de nombreuses icônes populaires, comme les réseaux sociaux ou les actions.<br /><br /><a href="https://icons.marekventur.de/" target="_blank"><span style="background-color: #ffcc99;">Raphaël Icon-Set via @font-face (+ de 100 articles)</span></a></p> <div style="text-align: center;"><a href="https://icons.marekventur.de/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/raphael-font_face_icon_set.gif" alt="raphael-font_face_icon_set" /></a></div> <p><br /><br />Voici le Raphaël Icon-Set converti en webfont. Il y a plus de 100 articles, très clairement conçus et tous adaptés pour les applications web.<br /><br /><a href="https://fontfabric.com/social-media-icons-pack/" target="_blank"><span style="background-color: #ffcc99;">Social Media Pictograms (74 articles)</span></a></p> <div style="text-align: center;"><a href="https://fontfabric.com/social-media-icons-pack/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/social_media_pictograms.jpg" alt="social_media_pictograms" /></a></div> <p><br /><br />Ces 74 icônes sont presque tous issu du domaine du réseau social.Selon si les lettres utilisées sont en majuscules ou en minuscules, ils apparaissent avec ou sans cercles.<br /><br /><a href="https://xperiments.es/blog/en/free-pulsarjs-fontface-iconfont/" target="_blank"><span style="background-color: #ffcc99;">PulsarJS @FontFace (73 articles)</span></a></p> <p> </p> <p style="text-align: center;"><a href="https://xperiments.es/blog/en/free-pulsarjs-fontface-iconfont/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/pulsarjs-font_face.gif" alt="pulsarjs-font_face" /></a></p> <p><br />Une police icône, avec 73 articles, conçu pour un développement d'application pour mobile, mais elle s'intégre parfaitement pour tout projet web.<br /><br /><br /><a href="https://www.heydonworks.com/a-free-icon-web-font" target="_blank"><span style="background-color: #ffcc99;">Heydings Icons (60 articles)</span></a></p> <p> </p> <p style="text-align: center;"><a href="https://www.heydonworks.com/a-free-icon-web-font" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/heydings_icons.gif" alt="heydings_icons" /></a></p> <p>Heydings Icons est une suite de 60 icônes qui sont tous de haute qualité.<br /><br /><a href="https://lucianmarin.com/peculiar/" target="_blank"><span style="background-color: #ffcc99;">Peculiar (45 articles)</span></a></p> <p style="text-align: center;"><a href="https://lucianmarin.com/peculiar/" target="_blank"><img width="480" height="193" src="https://www.noemiconcept.com/images/stories/articles/peculiar.gif" alt="peculiar" /></a></p> <p>Peculiar est un ensemble d'éléments simple qui sont tous construits avec HTML + CSS.<br /><br />La taille minimale qu'ils peuvent être utilisés est 16px et il y a 45 icônes.</p> <p> </p> <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow: hidden;"> <h3><a target="_blank" href="https://www.entypo.com/">Entypo</a> (100+ items)</h3> </div></div><div class="K2FeedTags"><ul><li>internet</li><li>design</li><li>web</li><li>open</li><li>Free</li><li>applications</li><li>Suite</li><li>îcones</li><li>pour</li><li>icons</li><li>source</li><li>gratuit</li><ul></div> 2015-02-04T06:54:01Z 2015-02-04T06:54:01Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/206649-webdesign-barre-de-progression-javascript-de-type-google-material-design-mprogress.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/5677c8077de330429e5ca40122ee2b57_S.jpg" alt="Barre de progression JavaScript de type Google Material Design - Mprogress" /></div><div class="K2FeedIntroText"><p>Mprogress.js est une barre de progression codée en JavaScript respectant les critères définis par Google dans "Material Design".</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Barre de progression JavaScript de type Google Material Design - Mprogress" href="https://lightningtgc.github.io/MProgress.js/"><img alt="WebDesign Barre de progression JavaScript de type Google Material Design - Mprogress" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Barre_de_progression_JavaScript_de_type_Google_Material_Design_-_Mprogress.jpg" /></a></p> <p>Elle utilise principalement les propriétés CSS3 et Pure.js et ne nécessite pas d'autres bibliothèques.</p> <p>Il est possible de diposer de 4 types de barres différentes.</p> <p>Et comme ce script est open source, vous pouvez l'inclure dans vos projets personnels comme professionnels.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>barre</li><li>progression</li><li>javascript</li><li>type</li><li>google</li><li>Material</li><li>design</li><li>Mprogress</li><li>CSS3</li><li>Pure</li><li>open</li><li>source</li><li>site</li><li>web</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/5677c8077de330429e5ca40122ee2b57_S.jpg" alt="Barre de progression JavaScript de type Google Material Design - Mprogress" /></div><div class="K2FeedIntroText"><p>Mprogress.js est une barre de progression codée en JavaScript respectant les critères définis par Google dans "Material Design".</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Barre de progression JavaScript de type Google Material Design - Mprogress" href="https://lightningtgc.github.io/MProgress.js/"><img alt="WebDesign Barre de progression JavaScript de type Google Material Design - Mprogress" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Barre_de_progression_JavaScript_de_type_Google_Material_Design_-_Mprogress.jpg" /></a></p> <p>Elle utilise principalement les propriétés CSS3 et Pure.js et ne nécessite pas d'autres bibliothèques.</p> <p>Il est possible de diposer de 4 types de barres différentes.</p> <p>Et comme ce script est open source, vous pouvez l'inclure dans vos projets personnels comme professionnels.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>barre</li><li>progression</li><li>javascript</li><li>type</li><li>google</li><li>Material</li><li>design</li><li>Mprogress</li><li>CSS3</li><li>Pure</li><li>open</li><li>source</li><li>site</li><li>web</li><ul></div> 2015-06-17T06:11:37Z 2015-06-17T06:11:37Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/206831-webdesign-polices-de-caractères-pour-rendre-vos-codes-sources-plus-beau-codeface.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/c99cabed998922b631d98b91db0d132f_S.jpg" alt="Polices de caractères pour rendre vos codes sources plus beaux - codeface" /></div><div class="K2FeedIntroText"><p>Codeface est une galerie de polices de caractères à espacement fixe pour les developpeurs.</p> </div><div class="K2FeedFullText"> <p style="text-align: center;"><a href="https://github.com/chrissimpkins/codeface" target="_blank" title="WebDesign Polices de caractères pour rendre vos codes sources plus beau - codeface"><img src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Polices_de_caractères_pour_rendre_vos_codes_sources_plus_beau_-_codeface.jpg" alt="WebDesign Polices de caractères pour rendre vos codes sources plus beau - codeface" /></a></p> <p>Il vous sera possible de trouver et de télécharger la pluspart des polices affichées dans ce projet.</p> <p>Vous pourrez ainsi choisir la police qui vous plaît le plus afin de mieux travailler.</p> <p>Enfin, il est conseillé de proposer les polices que vous utilisez, et si elles répondent aux critères de l'auteur, elle sera également affichée.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>polices</li><li>caractères</li><li>pour</li><li>rendre</li><li>vos</li><li>codes</li><li>sources</li><li>plus</li><li>beau</li><li>codeface</li><li>design</li><li>Free</li><li>libre</li><li>gratuit</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/c99cabed998922b631d98b91db0d132f_S.jpg" alt="Polices de caractères pour rendre vos codes sources plus beaux - codeface" /></div><div class="K2FeedIntroText"><p>Codeface est une galerie de polices de caractères à espacement fixe pour les developpeurs.</p> </div><div class="K2FeedFullText"> <p style="text-align: center;"><a href="https://github.com/chrissimpkins/codeface" target="_blank" title="WebDesign Polices de caractères pour rendre vos codes sources plus beau - codeface"><img src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Polices_de_caractères_pour_rendre_vos_codes_sources_plus_beau_-_codeface.jpg" alt="WebDesign Polices de caractères pour rendre vos codes sources plus beau - codeface" /></a></p> <p>Il vous sera possible de trouver et de télécharger la pluspart des polices affichées dans ce projet.</p> <p>Vous pourrez ainsi choisir la police qui vous plaît le plus afin de mieux travailler.</p> <p>Enfin, il est conseillé de proposer les polices que vous utilisez, et si elles répondent aux critères de l'auteur, elle sera également affichée.</p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>polices</li><li>caractères</li><li>pour</li><li>rendre</li><li>vos</li><li>codes</li><li>sources</li><li>plus</li><li>beau</li><li>codeface</li><li>design</li><li>Free</li><li>libre</li><li>gratuit</li><ul></div> 2014-06-30T06:10:24Z 2014-06-30T06:10:24Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/206341-design-selon-google-guide-matériels-et-ressources.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/d74ac2017192ae6a72848a2443340ead_S.jpg" alt="Design selon google, guide, matériels et ressources" /></div><div class="K2FeedIntroText"><p>Le principe de Google est de "se concentrer sur l'utilisateur et tout le reste suivra.".</p> </div><div class="K2FeedFullText"> <p style="text-align: center;"><a title="WebDesign Design selon google, guide, matériels et ressources" href="https://www.google.com/design/" target="_blank"><img src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Design_selon_google_guide_matériels_et_ressources.jpg" alt="WebDesign Design selon google guide matériels et ressources" /></a></p> <p>C'est pour cette raison qu'ils cherchent à creer de nouvelles expériences qui surprennent les utilisateurs.</p> <p>Google recherche toujours le meilleur design qui puisse marier la simplicité et les possibilités qu'offrent les technologies et les sciences.</p> <p>Google met en ligne un document régulièrement mise à jour regroupant les lignes directrices de design selon les évolutions mais également des éléments et des ressources qu'il est possible de télécharger gratuitement.</p></div><div class="K2FeedTags"><ul><li>design</li><li>selon</li><li>google</li><li>guide</li><li>matériels</li><li>ressources</li><li>webDesign</li><li>gratuit</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/d74ac2017192ae6a72848a2443340ead_S.jpg" alt="Design selon google, guide, matériels et ressources" /></div><div class="K2FeedIntroText"><p>Le principe de Google est de "se concentrer sur l'utilisateur et tout le reste suivra.".</p> </div><div class="K2FeedFullText"> <p style="text-align: center;"><a title="WebDesign Design selon google, guide, matériels et ressources" href="https://www.google.com/design/" target="_blank"><img src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Design_selon_google_guide_matériels_et_ressources.jpg" alt="WebDesign Design selon google guide matériels et ressources" /></a></p> <p>C'est pour cette raison qu'ils cherchent à creer de nouvelles expériences qui surprennent les utilisateurs.</p> <p>Google recherche toujours le meilleur design qui puisse marier la simplicité et les possibilités qu'offrent les technologies et les sciences.</p> <p>Google met en ligne un document régulièrement mise à jour regroupant les lignes directrices de design selon les évolutions mais également des éléments et des ressources qu'il est possible de télécharger gratuitement.</p></div><div class="K2FeedTags"><ul><li>design</li><li>selon</li><li>google</li><li>guide</li><li>matériels</li><li>ressources</li><li>webDesign</li><li>gratuit</li><ul></div> 2014-11-13T06:22:16Z 2014-11-13T06:22:16Z https://www.noemiconcept.com/index.php/fr/departement-communication/news-departement-com/206535-webdesign-un-cadre-de-developpement-de-sites-web-basé-sur-material-design-materialize.html Olivier Ruffin olivier.ruffin@noemiconcept.com

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/bb863cc562a20afe992e294b226b2c34_S.jpg" alt="Un cadre de développement de sites web basé sur Material Design - Materialize" /></div><div class="K2FeedIntroText"><p> <p>Materialize permet d'utiliser facilement et de creer votre propre site web avec les principes que propose <a target="_blank" title="WebDEsign Google avec Material Design" href="https://www.noemiconcept.com/index.php/en/departement-informatique/astuce-informatique/item/206341-design-selon-google-guide-mat%C3%A9riels-et-ressources.html">Google avec Material Design</a>.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Un cadre de developpement de sites web basé sur Material Design - Materialize" href="https://materializecss.com/"><img alt="WebDesign Un cadre de developpement de sites web basé sur Material Design - Materialize" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Un_cadre_de_developpement_de_sites_web_basé_sur_Material_Design_-_Materialize.jpg" /></a></p> <p>Vous pourrez ainsi développer un site web qui permettra à vos utilisateur d'avoir une expérience homogène de lecteur quelques soient la technologie ou leur moyen de navigation.</p> <p>Comme Materialize dispose déjà de nombreux éléments (typographie, grille, formulaire, boutons, barre de navigation ... etc), cela vous facilité et augmente votre développement.</p> <p>Enfin, comme il est open source, il est donc gratuit à utiliser pour vos projets personnels et professionnels et vous pouvez également contribuer à son développement.</p> </p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>cadre</li><li>développement</li><li>site</li><li>web</li><li>basé</li><li>sur</li><li>Material</li><li>design</li><li>Materialize</li><li>google</li><li>javascript</li><li>SASS</li><ul></div>

<div class="K2FeedImage"><img src="https://www.noemiconcept.com/media/k2/items/cache/bb863cc562a20afe992e294b226b2c34_S.jpg" alt="Un cadre de développement de sites web basé sur Material Design - Materialize" /></div><div class="K2FeedIntroText"><p> <p>Materialize permet d'utiliser facilement et de creer votre propre site web avec les principes que propose <a target="_blank" title="WebDEsign Google avec Material Design" href="https://www.noemiconcept.com/index.php/en/departement-informatique/astuce-informatique/item/206341-design-selon-google-guide-mat%C3%A9riels-et-ressources.html">Google avec Material Design</a>.</p> <p></div><div class="K2FeedFullText"></p> <p style="text-align: center;"><a target="_blank" title="WebDesign Un cadre de developpement de sites web basé sur Material Design - Materialize" href="https://materializecss.com/"><img alt="WebDesign Un cadre de developpement de sites web basé sur Material Design - Materialize" src="https://www.noemiconcept.com/images/stories/articles/WebDesign_Un_cadre_de_developpement_de_sites_web_basé_sur_Material_Design_-_Materialize.jpg" /></a></p> <p>Vous pourrez ainsi développer un site web qui permettra à vos utilisateur d'avoir une expérience homogène de lecteur quelques soient la technologie ou leur moyen de navigation.</p> <p>Comme Materialize dispose déjà de nombreux éléments (typographie, grille, formulaire, boutons, barre de navigation ... etc), cela vous facilité et augmente votre développement.</p> <p>Enfin, comme il est open source, il est donc gratuit à utiliser pour vos projets personnels et professionnels et vous pouvez également contribuer à son développement.</p> </p></div><div class="K2FeedTags"><ul><li>webDesign</li><li>cadre</li><li>développement</li><li>site</li><li>web</li><li>basé</li><li>sur</li><li>Material</li><li>design</li><li>Materialize</li><li>google</li><li>javascript</li><li>SASS</li><ul></div>