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
HTML/Elements NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED. This is the list of HTML and related Elements from the past to the present. The root element (MOVED) html (MOVED) head (MOVED) title (MOVED) base (MOVED) isindex (MOVED) link (MOVED) meta (MOVED) style Scripting (MOVED) script (MOVED) noscript Sections (MOVED) body (MOVED) section (MOVED) nav (MOVED) article (MOVED) aside (MOVED) h1, h2, h3, h4, h5, and h6 (MOVED) hgroup (MOVED) header (MOVED) footer (MOVED) address Grouping content (MOVED) p (MOVED) hr (MOVED) pre (MOVED) blockquote (MOVED) ol (MOVED) ul (MOVED) li (MOVED) dl (MOVED) dt (MOVED) dd (MOVED) figure (MOVED) figcaption (MOVED) div (MOVED) center (MOVED) main Text-level semantics Edits (MOVED) ins (MOVED) del Embedded content Tables Forms Interactive (MOVED) details (MOVED) summary (MOVED) command (MOVED) menu See also
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
Bien utiliser le texte alternatif Par WebAIM Donner aux images un texte alternatif est la première chose à faire pour l'accessibilité. C'est également l'une des plus difficiles à bien faire. Les images au texte alternatif absent, incorrect, ou mal choisi sont malheureusement légion sur le web. Et comme beaucoup d'autres points concernant l'accessibilité, c'est un domaine où l'interprétation personnelle compte pour beaucoup. Cet article présente des exemples et, pour chaque exemple, le texte alternatif approprié tel que nous le dicterait notre expérience personnelle. Contenu de l'article Les bases du texte alternatif Le texte alternatif offre une alternative textuelle au contenu non textuel d'une page web. Le texte alternatif a plusieurs rôles : Il est annoncé par les logiciels de revue d'écran, à la place de l'image, rendant le contenu ou la fonction de l'image accessibles aux utilisateurs ayant des troubles visuels ou cognitifs. Le texte alternatif peut être présent de deux manières : Dans l'attribut alt de la balise img.
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
Les attributs universels - HTML (HyperText Markup Language) Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet). Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>... En plus des attributs universels HTML, il existe également les attributs universels suivants : xml:lang et xml:base : ces attributs proviennent des spécifications XHTML. Liste des attributs universels accesskey Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. autocapitalize Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. class
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
Nouvelle formule pour les inspirations pour intégrateurs #83 : Illustrations CSS Premier article d'un nouveau format pour les inspirations pour intégrateurs, qui se renouvelle pour 2017 ! Pour ce premier chapitre, revenons sur les illustrations et animations en CSS. Les inspirations pour intégrateurs changent de formules ! Dans quelques mois les inspirations pour intégrateurs atteindront l'âge respectable de 4 ans, et ont très peu évolué depuis leurs débuts. Tous les premiers jeudis du mois, vous retrouverez un article d'inspirations pour les intégrateurs dans le style des anciens, avec des ressources sélectionnées, et ordonnée selon leur complexité. Puis, les semaines suivantes, nous prendrons des exemples de cette liste et les décortiquerons, parfois ligne à ligne, pour aider le plus de monde possible à comprendre les techniques mises en place, dans un article de techniques d'intégration. Créations et animations en CSS "traditionnelle" Que pensez-vous de ce nouveau format ?
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 Utiliser les attributs de données - Apprendre le Web HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à Node.setUserData(). Syntaxe HTML La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : <article id="voitureelectrique" data-columns="3" data-index-number="12314" data-parent="voitures"> ... Accéder via du code JavaScript Lire les valeurs de ces attributs avec du JavaScript est également très simple. Accéder via du code CSS