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
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.
FancyBox 1.3.4 | 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.
Barres de défilement dans un bloc - Code-Web.org Certains diront "Ou comment imiter une iframe proprement"! C'est que nous allons voir dans cette article : reproduire le comportement d'une iframe mais sans tout les inconvénients de celle-ci et avec une seul page. Pourquoi pas une iframe? Une iframe, n'est rien d'autre qu'une frame qui peut être placée n'importe où dans une page. Pour cette raison, elles pose les même problèmes qu'une frame classique. La théorie Il faut simplement savoir qu'il est possible de définir la façon dont va se comporter le navigateur avec un bloc lorsque le contenu de celui-ci devient trop grand. C'est justement cette dernière possibilité qui nous intéresse pour la mise en œuvre de notre copie d'iframe. Mise en œuvre Nous allons utiliser pour cela une simple page HTML liée à une feuille CSS externe. <? Penser à placer un texte assez long dans le bloc div si vous souhaitez tester cette exemple. Sans sa feuille CSS, le code HTML que nous venons de voir affichera le texte en entier en étendant le bloc div. Conclusion
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 :
Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Comprendre le positionnement en CSS Consolidez et élargissez vos connaissances des différents schémas de positionnement CSS actuellement utilisés ou avant-gardistes (flux, positionnement absolu, fixé, relatif, flottement, inline-block, modèle tabulaire). Alsacréations est également un organisme de formation agréé qui propose des enseignements web à Paris et Strasbourg : HTML et CSS (tous niveaux jusqu'à expert), Web mobile, jQuery, accessibilité numérique, Wordpress.
Adapter un site pour les Smartphones Une version spéciale Smartphone et plus largement handheld (petit écran) est une étape qui peut être compliquée à envisager. Heureusement, les standards du Web offrent quelques armes fort bienvenues et efficaces pour la franchir. Après tout, présenter un site en 480*320 pixels n’est jamais... qu’un style alternatif. Si votre structure XHTML est suffisamment robuste - je vous invite à (re)lire avoir plusieurs présentations alternatives -, préparer et développer une version Smartphone pour votre site sera d’autant plus aisé. Néanmoins, quelques écueils techniques peuvent se présenter... et le facteur temps peut vous obliger à faire quelques choix. Voyons quelques points afin de comprendre les tenants et les aboutissants de la création d’une version Smartphone ! Attention : cet article traite uniquement de l’adaptation d’un design à une version pour Smartphone, et non de développement de sites totalement dédiés aux mobiles. Quelques informations et bons réflexes Principales recommandations :
Accessible Open Source Content Management System jQuery Mobile | jQuery Mobile Les outils du webmaster : outils-web.com Présentation de Typolight - Manuel d'utilisation de Typolight / Contao Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus. Définition du responsive web design La mise en page La typo
Script PHP : Formulaire Email Le principe du form mail est de permettre à vos visiteurs de remplir un formulaire et ensuite de vous envoyer un email avec ce qui a été saisi. Pour faire cela nous allons utiliser PHP (ce qui veut dire que votre hébergeur doit offrir cette possibilité ou qu'il faut installer un serveur web http avec le plugin php). Voici le formulaire que nous allons proposer:Pour cela il faut insérer dans une page le code html suivant: <form method=POST action=formmail.php ><input type=hidden name=subject value=formmail><table><tr><td>Votre Nom:</td><td><input type=text name=realname size=30></td></tr><tr><td>Votre Email:</td><td><input type=text name=email size=30></td></tr><tr><td>Sujet:</td><td><input type=text name=title size=30></td></tr><tr><td colspan=2>Commentaires:<br><textarea COLS=50 ROWS=6 name=comments></textarea></td></tr></table><br><input type=submit value=Envoyer> - <input type=reset value=Annuler></form> Header("Location:
Sécuriser et protéger son site web des attaques des pirates et hackers Comment tester la sécurité de mon site web? Voici 3 méthodes simples qui vous permettront de vérifier si vous utilisez un script avec de grosses failles de sécurité. Avec un filtrage des données entrantes et les conseils donnés dans ce forum, vous devriez être capable de régler le problème. Sinon, pour votre sécurité, changez de CMS, blog, forum ou e-commerce car le développeur ne s'est pas préoccupé de la sécurité. D'après mes logs, les 3 attaques suivantes représentent la grosse majorité. REMARQUE 1: aucun de ces exemples ne vous apprendra à pirater un site. REMARQUE 2: Désactivez les règles de filtrages du fichier .htaccess proposées ci-dessus. 1- Attaque par exécution d'un script externe: Créez un fichier texte contenant le code suivant: Code PHP: Appelez-le "pirate.txt" et faites-en une autre copie appelée "pirate.php". Dans votre CMS, blog, forum ou e-commerce, les URLs ressemblent à ça (à adapter à votre cas): Code: