PUBLIC MARKS from camel with tags css & web

Même si certains motifs se détachent parfois du lot, les conventions de développement ou d’intégration restent quelque chose de très personnel. La majorité des langages, et même des framework ont des méthodes gravées dans la pierre que chacun est fortement invité à respecter. Ce n’est pourtant pas le cas pour le couple HTML/CSS, et c’est la raison pour laquelle Florent Verschelde et l’équipe d’Alsacréations ont entrepris de mettre en place un guide stylistique de l’intégration HTML. Ils ont pour cela proposé un appel à contribution sous la forme d’un questionnaire en deux parties auquel je réponds à mon tour.

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! Voici une sélection de 21 scripts pour faire face à toutes les situations (ou presque) :

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile. Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper's capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript's event model is also implemented within Wrapper's HTML. Wrapper's best features are the ones that you get for free because of how it is set up. It's like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology. Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

I have been geekn’ out a lot lately reading some really great articles as well as learning some new techniques. There is a little bit of everything here and if you are a web developer it will come in handy. If you are not into jQuery skip this first section, as I have been really digging into what can be done in jQuery. If you like what you see check out my Delicious feed, as I am always running across great links.

TYPOlight webCMS TYPOlight webCMS est un puissant système de gestion de contenu web spécialisé dans l'accessibilité (back office et front office) et utilise XHTML et CSS conforme W3C/WAI pour générer les pages. Il a été mis au point par Leo Feyer en 2004 et a été publié sous la Lesser General Public License (LGPL). Principales fonctionnalités de TYPOlight Voici quelques-unes des caractéristiques qui permettent à TYPOlight de se démarquer de la variété des systèmes de gestion de contenu. Si vous voulez en savoir plus, consultez la liste complète des fonctionnalités. TYPOlight * Dispositif de mise à jour automatique * Documentation multilingue * Génération de code XHTML strict et accessible * Utilisation des technologies du Web 2.0 et Ajax * Support de contenu multilingue (jeu de caractères UTF-8) * Générateur de CSS compatible multi-navigateur (compatible IE7) * Gestionnaire de fichiers intégré * Moteur de recherche avancé * Générateur de formulaire * Langages et thèmes multiples dans le back office * Front office basé à 100% sur des modèles personnalisables * Gestion de versions et d’annulation (défaire / refaire)

Un ensemble de nouveaux tutoriels a été mis en ligne cette semaine pour inaugurer une nouvelle thématique : L'administration de serveurs dédiés. En effet, les hébergements dédiés sont devenus monnaie courante, et il est fréquent de devoir plonger les mains dans le cambouis. Ces tutoriels ont pour but de servir de feuille de route à la mise en place d'un serveur web sous Apache assorti de PHP et MySQL, ainsi que de services mail et ftp. Des conseils en matière de monitoring, de sauvegarde et de sécurité complètent le tour d'horizon. Deux d'entre eux abordent également de façon rapide l'installation du webmail Roundcube et du panel de gestion DTC pour contrôler plus efficacement les services évoqués précédemment dans le cas d'un hébergement multi-domaines.

This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless

Every web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Lets take a look at recent examples of these …

Alors que le Web évolue pour intégrer de nouveaux standards et que les derniers navigateurs ouvrent de nouvelles voies créatives, l'art du design web est aussi en pleine mutation. Cependant, rares sont les designers web également expérimentés en programmation. Résultat : ils ne peuvent exploiter pleinement toutes les ressources à disposition, car balisage sémantique et CSS sont un frein à leur élan créatif. Andy Clarke a su identifier les difficultés auxquelles sont confrontés ces designers web à la sensibilité plus graphique que technique ; il propose ici aux artistes du Web une approche progressive afin de conjuguer créativité, fonctionnalité et accessibilité dans la conception de leurs sites. Pour cela, les CSS offrent un cadre indispensable, mais il s'agit de s'en affranchir pour les transcender. Dans cet ouvrage révolutionnaire, unique en son genre, vous découvrirez comment implémenter des designs originaux, tout en mettant à profit les possibilités créatives du balisage et des feuilles de style. Vous apprendrez à mettre en place un nouveau workflow, construire des prototypes, utiliser efficacement des grilles, visualiser les balises, etc. Vous "transcenderez" CSS, qu'il s'agisse d'employer les derniers navigateurs prenant en charge la troisième version de cette norme, de collaborer efficacement avec les membres de l'équipe, ou bien plus encore.

Un des calvaires des développeurs Web est de placer un footer en bas de page. Il existe différentes solutions, je vous en propose une nouvelle constituée au fil du temps et de mes recherches. Ce n'est certes qu'une solution de plus qui a, je trouve, l'avantage d'être à base de CSS uniquement et de rester globalement simple.

XRAY est un bookmarklet, c’est-à-dire un petit morceau de Javascript que l’on peut ajouter facilement à son navigateur et qui fournit des fonctionnalités supplémentaires. Dans le cas de XRAY, vous allez pouvoir inspecter par son intermédiaire un élément d’une page web et recueillir ainsi tout un tas d’information (positionnement, dimension, hiérarchie, …) à son sujet. Si vous utilisez déjà l’extension Firebug, il ne vous sera pas très utile. Sauf dans un cas. En effet, et à l’inverse de Firebug, XRAY est capable de fonctionner dans Internet Explorer !

Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button. As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. And it’s unfortunate, because then we’re reduced to the tedious tasks of opening up Photoshop every time we’re in need of a new button. What we need is something better—something more flexible and meant for designers. Lucky for us, the solution already exists and all it needs is a little love. My friends, let me introduce you to my little friend : the "button" element.

Il y a un peu plus d'une quinzaine de jours le WAT-C a sorti une nouvelle version de la barre d'accessibilité du web..

Ce que vous trouverez sur ce site : Ce site est un guide didactique dont l’objectif est d’accompagner les e-stagiaires à réaliser un site Web accessible. Du découpage de la maquette graphique à la validation finale du code, ce guide offre l’ensemble des étapes qu’il convient de suivre pour créer des sites Web aux normes W3C en respectant les recommandations de la WAI.

Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by it's icon. This whole thing was inspired by the "Showing Hyperlink Cues with CSS" article of Ask the CSS Guy. The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.

Certains concepteurs web ont la fâcheuse habitude de tout lire à l'écran, et de ne jamais imprimer les pages des sites web qu'ils consultent. Pourtant, un nombre impressionnant d'utilisateurs passe régulièrement par une imprimante pour accéder aux contenus d'un site web, ou pour les conserver. C'est pénible de lire à l'écran, je préfère imprimer les articles pour les lire plus tard, tranquillement, etc. Vous n'avez jamais entendu ces phrases dans la bouche de vos proches, de vos collègues ? Vous-même, n'avez-vous jamais eu envie ou besoin d'imprimer le contenu d'une page web ?

//gtmcknight.com: Steal These Buttons

CSS Tabs :: Adam Kalsey

En partant de zéro, réaliser une mise en page CSS. Tutorial en Anglais.

This is a CSS and JavaScript technique that lets you add a shadow to most elements on your page with a customizable shadow depth and coloring. Just give the element in question a class name of "shadow" to activate the effect.