background preloader

Demonstration

Demonstration
Une démonstation de Fancybox. C'est la traduction française de la documentation issue du site officiel Des animations différentes ('fade', 'elastic' and 'none') La position des titres ('outside', 'inside' and 'over') Les galeries d'images (utilisez la molette de la souris) Quelques exemples Le texte est d'abord écrit dans le code mais non-affiché (display:none). Inline un document dans le code html Ajax Un document interne (texte.txt) Iframe Le site Wikipedia dans une fenêtre (affichage à 95%) Swf Une animation vidéo Autres exemples (bidouillages personnels) 1. À déclarer dans l'en-tête : Puis à afficher dans la page html : <a class="site" href="l_url_du_site? On peut définir la taille de la fenêtre en pixel ou en pourcentage, la transition, la couleur et l'opacité de la trame (overlay) et la vitesse d'apparition et de disparition de la fenêtre fancybox. 2. Il faut d'abord définir l'objet sans l'afficher : Puis, le lancer : Un autre exemple : Le parti d'en rire (Pierre Dac et Francis blanche). 3.

Dreamweaver gratuit - Dreamweaver tutorials et extensions Outils en direct - Bouton Builder Global Settings Button Label Padding Font Size Corner Roundness Border Thickness Highlights <a href='#' class='button'>Button</a> TinyURL.com HtaccessProtection Comment protéger l'accès à un répertoire par une authentification ? Introduction Vous pouvez réaliser ceci grâce à un fichier .htaccess. Avant de procéder, il est nécessaire de préciser quelques petites choses par rapport aux fichiers .htaccess. Tout d'abord, il faut savoir qu'il s'agit de fichiers particuliers pour le serveur web, et que ces fichiers n'apparaissent pas dans l'arborescence du répertoire concerné si un internaute fait un accès à un répertoire listable (qui ne contient pas de page index, et dont le listage n'est pas interdit). Procédure à suivre CRÉER LE FICHIER DE MOT DE PASSE Dans un premier temps, il faut créer le fichier qui contiendra la liste des utilisateurs ayant le droit de se connecter et le mot de passe qui leur est associé. Note : Sous windows, vous ne pouvez pas créer directement un fichier nommé .htaccess ou .htpasswd. Ces lignes sont de la forme suivante : utilisateur:mot_de_passe_crypté Note :

Les meilleurs outils pour réaliser vos maquettes de pages web Dans mon boulot de conception d’interfaces, je suis régulièrement amené à réaliser des maquettes. Maquettes, prototypes, ergolayouts, mockups, wireframes,… de nombreux vocables existent pour désigner ce qu’on peut considérer comme du design fonctionnel (qui s’intéresse au découpage des contenus, à la taille et à la position des fonctionnalités,…) par opposition au design graphique (qui s’intéresse aux couleurs, aux effets graphiques, aux formes,…). Microsoft Visio reste un des classiques pour réaliser ce genre de tâches. Jusqu’ici, je trouvais sympathique des outils tels que Gliffy ou Mockingbird. Mais là, j’ai testé Mockflow, et je l’ai tout de suite adopté ! Tout y est ! Suite à vos commentaires, chers lecteurs, je rajoute Balsamiq, dont j’aime l’allure « brouillon manuscrit ». Bon, il reste tout de même les risques liés à un outil en ligne, comme la nécessité de posséder une connexion Internet performante et fiable. Vous pouvez tester Mockflow gratuitement.

Framasoft - Logiciel Libre Framasoft, association de promotion du logiciel libre et de la culture libre, et Wikimédia France, association pour le libre partage de la connaissance, se sont associées afin de proposer l’encyclopédie libre Wikipédia sur clé USB, accompagnée de nombreux logiciels libres. La clé USB “Framakey-Wikipédia” contient l’intégralité des articles de l’encyclopédie Wikipédia en français (soit plus d’un million d’articles) accompagnés de leurs éventuelles illustrations. La connexion internet n’est pas nécessaire pour accéder aux contenus de Wikipédia. En effet, la consultation se fait au travers du logiciel libre Kiwix, qui permet de naviguer au sein d’une version de l’encyclopédie stockée sur la clé. Par ailleurs, la clé propose l’accès à de nombreux logiciels dits “portables”, sur la base du projet Framakey de l’association Framasoft. Mise en garde Ce produit est actuellement en phase d’expérimentation. Pourquoi alors acheter ou télécharger ce produit ? Caractéristiques techniques

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes Sur la version automatique (la seconde) : Poser les fondations

Bootstrap, lisibilité, propreté, performance, optimisation ; c'est possible ! On me dit souvent que je n'aime pas Bootstrap, et pour cause, je pense que c'est une regression pour un travail Front-end de qualité. En réalité, ce n'est pas le Framework le fautif, mais la façon dont il est utilisé. Les exemples de mauvaises utilisations sont légions sur le net et les mauvaises intégrations HTML cour les rues. Suis-je donc entrain de dire qu'il y a une bonne et une mauvaise façon d'utiliser Bootstrap ? Séparer le fond et la forme, pour un gain de lisibilité et de propreté,Inclure et générer le stricte minimum pour un gain de performance, avec un exemple d'optimisation de CSS 30 fois plus légère. Non, je suis sérieux, ce billet n'est pas une blague, c'est cadeau, et c'est pour vous. À ne vraiment pas faire, ou l'utilisation Standard de Bootstrap Pour commencer notre réflexion, partons de l'utilisation « standard » de Bootstrap. Voici un petit affichage de grille gratté à la va vite. La feuille CSS Bootstrap est inclue <! Résultat Voir le résultat avec le code Less En Bonus

Création d’un menu sous Dreamweaver - Raconte-moi le web! Exemple d’un menu dreamweaver : Nous vous proposons dans ce tutorial de créer le menu que vous voyez ci-dessus avec Dreamweaver. La procédure est très facile et ne devrait pas vous poser de problème. Commencez par ouvrir Dreamweaver, cliquez ensuite sur l’onget “code” pour afficher le code. Mise en place du CSS du menu Collez ensuite ce code quelque part : Il est préférable de le coller entre la balise <head> et </head>. Création du menu sous Dreamweaver Commencez par créer une liste en cliquant sur le bouton “Liste” : Ceci donnera quelque chose de ce genre : Passez ensuite dans la fenêtre du code. Modifiez alors la première balise <ul> par <ul id=”simple-menu”>. Le mode affichage de dreamweaver n’est pas très performant, vous n’allez donc pas pouvoir voir votre menu directement sous dreamweaver.

Related: