PUBLIC MARKS from decembre with tag webdesign

Entre Ibis Reader, le futur Kindle for the Web et bien d’autres services à venir, l’application de lecture semble s’affranchir de la plateforme pour revenir vers le web. Craig Mod a lancé il y a quelques jours un template qui plaira aux bidouilleurs. Bibliotype, un template HTML et Javascript avec un CSS adapté à la lecture sur tablette. Le designer a ajouté plusieurs fonctions pour modifier la mise en page du texte, que cela soit la taille de la police, ainsi que la couleur de l’arrière-plan. Les choix sont limités mais bien pensé : Bed, Knee et Breakfast. Trois moment typique de lecture avec leurs contraintes particulières (fond noir et police blanche pour la lecture du soir…). Bibliotype est une bonne base de travail que Craig Mod invite à venir modifier.Distribué sous une licence MIT (il est possible d’utiliser ce code à peu près n’importe comment, pour une utilisation commerciale ou non, du moment que le nom de concepteur reste mentionné) .....

Une des règles de base de l’utilisabilité est de toujours veiller à ne pas surcharger un écran. Le remarquable Ommwriter, un traitement de texte qui propose la même approche mais nettement plus raffinée avec un fond d’écran très reposant et différentes ambiances sonores :Le sentiment d’immersion est tout à fait remarquable et les fonctions ne sont jamais très loin puisqu’en bougeant la souris vous faite apparaitre une série d’icônes : l’expérience utilisateur de ce Ommwriter est tout à fait convaincante car extrêmement aboutie Plein de bonnes idées / intentions… mais qu’il n’est pas forcément bon d’utiliser pour un site web. Je fais notamment référence à ces insupportables sites qui s’ouvrent dans une pop-up qui force l’affichage en plein écran, une horreur pour ceux qui utilisent des écrans à grandes résolution (HD ou Full HD). Bref, jusqu’où peut-on aller dans la recherche de l’épuration ? (d’où le titre du billet)

Coproduit par Arte, Upian et le CNC qui vous plonge dans l’univers incroyable d’une ville-prison du fin fond de l’Amérique. Il intègre de façon parfaitement harmonieuse la narration vidéo interactive et la dimension sociale. Pour y accéder, il faut ainsi se créer un compte :Tout simplement pour faire vivre le site de nombreux mois après sa publication, ou plus précisément pour faire vivre les discussions en rapport avec le sujet traité Un incroyable modèle d’interaction où la trame narrative est enrichie par de nombreux d’éléments interactifs. L’expérience d’utilisation de ce site est réellement unique : l’immersion est totale et le documentaire est ponctué de nombreux embranchements pour maintenir l’attention de l’internaute et lui donner envie de consulter les bonus.

data: URI Generator The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers except for Internet Explorer. The lack of IE support is holding back widespread adoption of data: URIs, but they are still very useful in a couple of specific areas such as embedding graphics and other data items in Greasemonkey scripts. You can read more about data: URIs and see some examples of their use, or use the generator below to create your own. data: URIs are defined in RFC 2397.

Attirer votre attention sur quelques-uns des moteurs de recherche vraiment super que vous sera utile quand il s'agit de recherche d'image et d'icônes. - Moteurs de recherche d'images : EveryStock, PhotoXcavator, Ginipic, GazoPa, FreeFoto,TurboPhoto, Feelimage, oSkope, Incogna, Imagery, ImageBase, Pixolu, Picsearch, Picitup, PicFog, PicFindr, PixsyBiomed... - Recherche d'images : Bing, Compfight, Tiltomo, Altavista, Photogen, Yahoo!, Google, FaceSaerch, Multicolr, PicBrk, PDPhoto, Stock.XCHNG, IconDB, ICONLOOK, Icônes-Search, Iconlet, IconFinder, IconSeeker, Icon Library, EasyIconFinder, Free Icons Web, VeryIcon, IconsPedia...

Créer des jolies icônes façon Adobe (Photoshop, Dreamweaver, Indesign..etc.) : petite application Air (donc fonctionnant sous Windows, Linux et Mac) baptisée Icon Generator Pro. Grâce à cette appli, vous pourrez générer des icônes façon CS5 : Sans oublier le mythique macaron « en promo », « beta » ou « 2.0″. L’application est même capable d’uploader directement cette icône sur votre compte twitter pour en faire votre image de profil (le truc trop inutile). Icon Generator Pro est téléchargeable ici gratuitement.

Vitrine de 40 Sets d'Icones gratuits et utiles pour votre référence.

Guides comprennant des grilles pré-dessinées de navigateurs,et des outils pour le développement IPAD et iPhone. Exemples : - Paper Browser : fenêtre de navigateur imprimable pour wireframing. (pour à la fois large et 960px 800px dessins de large). Proportionnellement réduit pour 1024 × 768 pixels. - Concept7 Sketching Paper :Fenêtre de navigateur avec les lignes de la grille pré-faites, plus une zone de notes sur le côté. Il est disponible en A4 et A3 tailles. - 6 Pages Template: Windows pré-dessinées pour les maquettes de 6 pages sur chaque feuille, un espace supplémentaire pour les notes sur le côté. - Wireframe Template (7 inclus dans le téléchargement. PSD dispos à personnaliser.

Pour faciliter l' intégration dans vos applications Web personnalisées ou de gestion de contenu web (prend en charge: ASP, PHP, ASP.NET). * Chargement rapide * Mode plein écran * Barre d'outils Entièrement configurable * Advanced table editing * Stylesheet-formatage * Facile de choisir entre deux formats / tous les éléments HTML * Features a new tabbed toolbar - familiar to Office 2007 users. - providing convenient access to your most-used tools. * It's easy to select any HTML elements (text, paragraphs, images, etc) with a built-in Tag Selector. * Fullscreen editing mode (doesn't open a new window). * Floating dialogs for special editing (changes can be seen immediately). * Realtime toolbar status. * Dropdowns with formatting preview. * View HTML source with code formatting & coloring. It is a cross-browser, requires only a few lines of code to include in your web page

Gratuit, gratuit, tout est presque gratuit sur internet :-) du moment qu'on sait ou chercher :-) Pour le webmasters en herbe comme moi, on le sait, il est difficile de trouver des banques d'images libres de droits et gratuites. Mais tonton Korben vous a trouvé une liste assez balèze de site web qui propose des stocks de photos gratuites. Voici pour vous (je vous ai mis les + sympa en tête de liste):

je continue ma série des générateurs en vous parlant des Générateurs d'images

C'est la possibilité de créer des pictos d'angles arrondis... Arrondissez les angles avec Google---Comment ? Tout simplement en entrant l'url suivante dans votre navigateur: http://www.google.com/groups/roundedcorners?c=3456DE&bc=black&w=30&h=30&a=tr" --------- On peut paramétrer pas mal de choses... - c - c'est la couleur du coin arrondi. Vous pouvez entrer une couleur compatible CSS en toute lettres comme white, gray, red, green, blue, yellow, teal, olive, purple, black mais aussi n'importe quelle couleur au format RRVVBB (sans le # devant... exemple blanc = FFFFFF) - bc - La couleur de fond de l'image (même topo que ci dessus) - h - La hauteur en pixels - w - La largeur en pixels - a - Quel coin générer ? tl correspond au coin en haut à gauche (Top Left), tr le coin haut droit, bl le coin bas gauche et br le coin bas droit. Marche avec n'importe quel sous domaine de Google.

Resolutions I was looking for the top three most used monitor resolutions - pixel width and height - for making desktop wallpapers in my flickr stream. It dawned on me that knowing the three most used pixel counts weren't as important as moderately high resolution images in the correct format ratios. Here are the top three as of June 2009. 1. 1024x768 ( 1:1.33) 2. 1280x1024 ( 1:1.25 ) 3. 1280x800 ( 1:1.6 ) For example, the MacBook Pro supports 1440x900, which is the same dimensions as the 1280x800. Although there will be some scaling, the 26% difference of area between the two shouldn't cause enough stretching to make the image unpleasant as a desktop background.

Vous connaissez Flex ? RIA (Rich Internet Application) de son état, il permet de faire des miracles avec les interfaces utilisateur et est basé sur Flash. Il s'agit en fait d'un framework Open Source simplifiant grandement le développement d'applications web riches basées sur Flash. Mais comment effectuer des transferts de données avec eZ Publish ? Avec sa plateforme Flash, Adobe propose une interface de connexion très efficace et open source : AMF.

Sur ce sujet riche et varié, il existe de nombreux blogs et sites, qui, de l’ergonomie éditoriale à l’approche sémantique en passant par les conseils en rédaction web, constituent de solides ressources dont vous pouvez vous inspirer pour améliorer la qualité rédactionnelle de votre blog. J’ai sélectionné pour vous les meilleurs parmi ceux que je connais (mais je ne les connais peut-être pas tous) :

Traduction française de l'extension Web Developer de Chris Pederick (http://chrispederick.com/work/web-developer/). Cette magnifique extension propose plein d'outils facilitant le développement de site web.

A Complete List Of Firefox Extensions For Web Developers January 7th, 2009 in Tools

Editeur graphique de fichiers icones *.ico

Tour de Flex component explorer Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more. Tour de Flex has three primary goals: * Provide non-Flex developers with an overview of what is possible in Flex in a "look and see" environment * Provide Flex developers with an illustrated reference tool * Provide commercial and non-commercial Flex developers with a place to showcase their work

Génère du Lorem Ipsum pour remplir vos pages

vérifie la validité des liens d'une page web

Avec ce tutoriel,je vais vous guider au mieux pour créer votre cadre pour votre forum - passons maintenant au découpage de ce cadre onglet "Affichage"==>"Règles" ou (Ctrl+R) dans les propriétés des règles,veillez a ce que ce soit en "pixel"en haut "clique droit" sur la règle et sélectionner "pixels" sur cette même règle en maintenant un "clique gauche" dessus et en "glisser/déposer" on sélectionne une ligne "Repère" on va donc faire glisser 6 repères (3 horizontaux et 3 verticaux) à 30px , 35px et 270px,n'hésitez pas a zoomer pour bien placer vos lignes, ce qui nous donne ceci, Prenez maintenant l'outil "Outil Tranche"Zoomer à 1000% pour être tranquille pour créer vos blocs à découper à l'aide des repères sélectionnés donc tout les blocs à découper cela doit ressembler à ceci,Ce cadre est adaptable a toute largeur de forum,(fixe ou extensible),et maitenant vous vous dite,comment on le met en place :lol: Et bien voici la marche a suivre,

Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales.

Beaucoup de sites web présentent une mise en page sur trois colonnes, avec une colonne centrale de contenu et des colonnes latérales. Ce tutoriel très complet montre comment on peut utiliser les flottants pour réaliser ce type de mise en page, en largeur fixe ou fluide.

Voici les dernières ressources classées par catégories. * Tutoriel : Guide pas à pas - * Article : Document d'analyse ou de référence - * Astuce : Court stratagème toujours utile -