HTML5 : le guide du débutant

Des outils simples pour créer rapidement des capsules vidéos - Sciences de la Vie et de la Terre L’augmentation des débits aidant, la vidéo est devenue un média très important sur internet. Il paraît donc très naturel d’insérer des contenus vidéos dans les espaces en ligne proposés à nos élèves, par exemple dans une pédagogie inversée. On peut trouver des supports vidéos existants, comme les vidéos Corpus ou celles de la banque de vidéos SVT. On se heurte toutefois rapidement au problème de l’adéquation du contenu avec nos besoins et au problème des droits d’utilisation de ces vidéos. De là l’envie de produire soi-même les contenus nécessaires, mais qui peut facilement s’effacer devant la difficulté matérielle (caméra, micro), technique (montage) et la crainte de devoir y consacrer trop de temps. Voici quelques outils, plus ou moins connus, qui permettent de produire des capsules vidéos simplement et rapidement, avec quelques exemples d’usages. Une vidéo en 5 minutes avec Screencast-O-Matic Présentation Les TNI peuvent aussi proposer cette fonction de capture d’écran. Exemples Exemple

HTML Cheat Sheet (Updated With New HTML5 Tags) - WebsiteSetup Interested in HTML? Awesome. Having a proper cheat sheet will make your life a ton of easier. When I started out with web development (back in 2004), I used to have a cheat sheet, too. Now it’s all in my head, though. Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet below. I’ve listed out all the mainstream HTML tags as well as the new HTML5 tags. If you wish to download .pdf, click here (237kb) – This version is based on the HTML Cheat Sheet in .PNGAlternate HTML Cheat Sheet in .pdf, optimal for tabloid paper size (11x17in) printing, click here (138kb) to downloadIf you wish to use this as an image, click here (3508 x 2717) 1. 2. 3. If you spot any errors in this cheat sheet, please contact us – info@websitesetup.org

20 underrated web design tools If you build websites for a living, you'll undoubtedly use the obvious web design tools - Firebug, Browsershots, plus the various font embedding services and page speed analysers. So this article isn't about them. Instead we thought we take a look at the more underrated tools that can help you improve client-side browser development and rigorously test everything that you build. Hopefully you'll find something useful in our feature that you've not heard about previously. Meanwhile, if you know of a tool that doesn't get the press it deserves, let us know about it in the comments below... 01. CSS3 Click Chart is a handy reference tool for CSS3 attributes; I'm sure we've all struggled to remember quite what order a CSS box-shadow values are required in at some point, and that's where CSS3 Click Chart comes in. 02. Patternizer is an online tool to help you generate CSS3 stripes using an online interface. 03. 04. 05. 06. Making your website appeal to window shoppers is enormously important.

Un nano-ordinateur à moins de 50 euros, c’est possible Avoir accès au monde de l’informatique grâce à un petit ordinateur produit en Europe à un prix démocratique, le tout « sponsorisé » par le libre et l’open source, c’est désormais possible et ce n’est plus réservé qu’aux bidouilleurs. L’ordinateur est au cœur d’une civilisation en plein changement. Pour le meilleur ou pour le pire, il est devenu l’outil essentiel de l’éducation, des relations sociales, des activités ou des loisirs. Sans ordinateur de bureau, 70% de nos lecteurs n’auraient pas accès à cette information. « Monsieur tout le monde » a-t-il vraiment besoin d’un ordinateur dernier cri dont il n’exploitera jamais le quart de la puissance (à l’exception des gamers) ? Raspberry PI 2 Citons d’abord le Raspberry PI (Framboise en français) dont la vente a débuté en 2012. Mais la « Framboise » n’est pas le seul nano-ordinateur sur le marché. Kit Raspberry PI ✓ pour les applications de bureau, la navigation internet, blogging, mail, etc. Raspberry PI et apprentissage de la robotique

H5P. Créer des vidéos interactives – Les Outils Tice Article mis à jour le 26 janvier 2017 par Fidel Navamuel H5P est une boite à outils en ligne qui permet d’insérer de l’interactivité dans une vidéo. Un outil formidable pour rendre actifs vos élèves quand vous leur proposez un support en vidéo. H5P est une boite à outils d’une grande richesse qui fait bien plus que des simples vidéos interactives. L’outil dont la prise en main est assez simple s’utilise directement depuis n’importe quel navigateur, mais vous pouvez aussi installer un plug-in pour WordPress, Drupal ou encore Moodle et ainsi avoir accès à l’outil directement depuis ces différents CMS. L’utilisation de l’éditeur en ligne est assez simple. Une fois la vidéo installée sur H5P, vous allez pouvoir y insérer des interactions en cliquant sur l’onglet de l’éditeur qui le permet. Vous pouvez ajouter du texte, des images, des liens menant vers d’autres ressources, des boutons pour ouvrir des formulaires, etc. Un excellent outil, idéal pour la classe inversée et entièrement gratuit.

Design fluide et design responsive | Clic Story à Lure (70) Design fluide et design responsive sont souvent confondus. Pourtant, si l’objectif est le même : adapter l’affichage aux dimensions de l’écran, les moyens sont différents. Design fluide Le design fluide existe depuis l’invention du web : on définit les dimensions des éléments structurels de la page (grille, colonnes…) proportionnellement à la largeur de l’écran. Par exemple, une colonne de texte de largeur 75% et une colonne latérale de largeur 25%. Ainsi, le site s’adapte automatiquement aux dimensions de l’écran. Avantage : on utilise toute la largeur de l’écran, quelle que soit sa taille. Inconvénient : sur les écrans de tailles extrêmes, les colonnes peuvent devenir trop larges ou trop étroites et nuire à la lisibilité du texte, voire désorganiser la mise en page du site. Design responsive Le design « responsive » est apparu avec les appareils mobiles et la nécessité d’adapter l’affichage à des écrans très petits. Combiner les deux En pratique

Créer un site beau, dynamique et respectueux des standards Voici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de validateurs. Liens En français openweb.eu.orgCe site vous expliquera les normes du W3C et leur intérêt (avec de très nombreux exemples). www.allhtml.com Un grand classique avec de nombreuses astuces et références. Les erreurs de conception de site web à éviter à tout prix : sebsauvage.net Comment créer un site dynamique. A lire sur CCM En anglais www.alistapart.comDe nombreux articles sur des astuces pratiques pour vos sites web (comment faire des menus, des CSS spécifiques pour l'impression, etc www.csszengarden.com (Version française ) Une démonstration magistrale sur l'utilisation des CSS. www.w3schools.com Littéralement "l'école du W3C". Voici quelques règles à respecter pour faire un site qui soit clair. Top Ten Mistakes in Web Design Compléments

Le Jargon Technique Du Web Enfin Décortiqué Pas facile de s’y retrouver dans la jungle des formats de fichiers audio ! Ou plutôt si, puisque majorité d’entre vous utilise ou achète des titres de musique au format le plus populaire, à savoir le MP3 (ne pas confondre avec le MP4 qui compresse des fichiers vidéos regardables en streaming, c’est-à-dire lisibles en continu sans possibilité de téléchargement). S’agissant du MP3, la compression a pour effet une indéniable perte de qualité sonore que détectent vite les mélomanes avertis. Certains formats de fichiers audio préservent la qualité sonore d’origine C’est pour cette raison que d’autres formats plus fidèles à la source sonore d’origine ont été conçus: le Flac, l’Ogg Vorbis et donc l’Aac. Abandonware Curieux terme que celui-ci qui mélange allègrement le français et l’anglais, en bon franglais qui se respecte. Active X Que le lecteur qui n’a jamais reçu un message signalant qu’une version plus récente d’Active X était nécessaire lève la souris ! Avatar Cloud Cookie Crosspost Dégroupage

UTellStory. Créer des diaporamas sonores – Les Outils Tice UtellStory est un outil en ligne qui permet de créer facilement des diaporamas sonores. Véritable petit studio en ligne, Utellstory peut générer de véritables objets multimédia mixant son et images mais aussi textes et vidéos. Un des atouts de UTellStory c’est sa prise en main relativement simple qui le met à la portée de tous les publics. Une fois inscrit, vous pourrez créer votre premier diaporama multimédia. Vous pouvez créer une diapo après l’autre ou uploader tous vos fichiers puis les réorganiser en ligne. L’outil UtellStory offre encore la possibilité de choisir une musique de fond et d’habiller graphiquement vos diapositives. [clickToTweet tweet= »Un bon outil en ligne pour créer des diaporamas multimédias. UtellStory peut être utilisé gratuitement, mais le nombre de diapos est limité à 20. Lien: UtellStory

Style CSS - Index des styles css Conseils pour faire des pages HTML rapides et propres. Pourquoi suivre mes conseils ? D'après vous, qu'est-ce qui se passe quand un Internaute vient se connecter à votre page et qu'il faut 3 minutes pour qu'elle s'affiche, hum ? Eh bien il zap. Et même une fois que c'est chargé, à quoi ça sert de faire une page super-chiadée si de toute façon elle ne s'affiche pas correctement d'un navigateur à l'autre ? Voici quelques conseils qui vous permettront d'avoir des pages qui se chargent VITE et s'affichent correctement. Sachez qu'on estime qu'une page d'accueil doit s'afficher en 15 ou 20 secondes pour que l'Internaute moyen ne zappe pas. Quand vous faites vos pages, gardez l'esprit KISS (Keep It Simple Stupid) (rester simple). Un navigateur averti en vaut deux Dans toutes les images que vous mettez (<IMG SRC...> ), utilisez les tags ALT, WIDTH et HEIGHT. Donc, ne faites pas mais faites Pas encadrer un site Les frames permettent par exemple d'avoir des menus qui restent à l'écran, mais utilisez-les avec parcimonie. En avant les œillères !... Centrage

8 principes pour concevoir des vidéos e-learning efficaces Lorsque que l’on élabore des modules vidéo e-learning efficace, la première chose qui fait défaut, c’est l’absence d’une technologie précise concernant l’étude. Comme le fait remarquer le chercheur américain L. J. Najjar : « la plupart des guides de conception pour l’élaboration des produits multimédia pédagogiques proposés aujourd’hui ont été élaborés sur la base d’opinions d’experts […] plutôt que sur la base de résultats de recherches empiriques. » C’est pourquoi une approche scientifique par le biais des sciences cognitives comme celle du chercheur Richard Mayer est intéressante. Voici 8 principes pédagogiques tirés de ses travaux. 1. L’apprentissage est plus efficace lorsqu’il est concentré autour d’une notion. Lorsque nous parlons d’efficacité dans l’enseignement, nous parlons en fait d’une meilleure mémorisation des connaissances par l’apprenant. 2. On retient mieux ce qui est mis en relief dans l’apprentissage. Jusqu’ici, rien de bien surprenant. 3. 4. 5. 6. 7. 8.

2 Logiciels d’animation vidéo (présentation intéractive) | OUTILS ET FORMATION TICE Moovly (Vidéo pour apprendre à l’utiliser : ICI) et Explee ( Vidéo expliquant ce qu’il permet : ICI ) sont 2 logiciels d’animation vidéos en ligne très simples d’utilisation et permettent des présentations interactives. Selon Laurène Castor, chargée de missions innovations pédagogiques chez France Business School : « Ce qui est super avec ces logiciels, c’est surtout la main qui dessine et qui écrit. Dans Moovly, les dessins (de notre création) que l’on importe ne peuvent pas avoir l’animation « drawing », c’est-à-dire que l’on ne peut pas les faire dessiner par la main. C’est en revanche possible avec Explee, même s’il faut faire attention à ce qu’ils soient de bonne qualité et assez grands pour que cela donne un bon résultat. Ce contenu a été publié dans OUTILS / ASTUCES, Présentations Intéractives.