background preloader

SPIP pour débuter

SPIP pour débuter
Related:  Pour créer un blog, un site ou un portailguyabalain

Outils de productions - Radio et webradio Créer un journal Vous envisagez de créer un journal, un magazine ou vous souhaitez faire évoluer votre publication ? Explorez les ressources que nous avons créées ou sélectionnées pour vous aider à mener vos projets et n’hésitez pas à prendre contact avec le coordonnateur CLEMI de votre académie pour bénéficier de conseils personnalisés ou d’une formation. En savoir plus Créer un blog et un site Le blog s’avère le support privilégié des productions médiatiques scolaires numériques. En savoir plus Créer une webRadio La web radio, nouveau média scolaire vient compléter les vertus pédagogiques de la radio traditionnelle. En savoir plus Le témoignage de journalistes professionnels A l’occasion de leur participation au jury des Grands Prix Médiatiks 2017 du CLEMI, des journalistes professionnels nous ont fait part de leurs impressions. En savoir plus

ResponsiveSlides.js · Responsive jQuery Slider & Slideshow Eric Meyer: CSS CSS Work Books by Eric Including Smashing CSS, CSS: The Definitive Guide, Third Edition, CSS Pocket Reference, and Cascading Style Sheets 2.0 Programmer’s Reference, among several others. Articles by Eric Local copies of CSS articles, as well as other writing I've done. Inline model document A terse, but hopefully complete, description of how the CSS inline box model really works. Color equivalents table All 147 SVG-derived color keywords permitted in CSS3 in a sortable table showing the keywords with their equivalents in both hexadecimal notations, both (non-alpha) RGB notations, and non-alpha HSL. CSS Module Timelines A visualization of the activity of the CSS Working Group by plotting draft publication dates and W3C statuses over time. CSS Module Editors Leaderboard A bit of a goof wherein I score the editors of various CSS modules and present the results as a leaderboard. CSS Tests A fairly large collection of test files I’ve accumulated over the years. W3C CSS2 Test Suite Prototyping Offsite

Arduino: Getting to Know Arduino : Part 1 : Hel... Next Guides: Getting to Know Arduino : Part 2 : Hello, Again! Getting to Know Arduino : Part 3 : Taking your Temperature I recorded a video to introduce the Arduino UnoArduino Uno and how to get started with it. The premise was that you didn't need to add anything extra, except for an A to B USB cableA to B USB cable (always check the type you need for the Arduino you have) because although you can connect an external power supply it can be powered purely from the USB, and you could get code running with a few simple steps on Microsoft Windows to make an LED (Light Emitting Diode) start to flash on your board. The Arduino I showed in the video was a revision 3 board, there have been a few versions so far, in the image (from zenbike.co.uk) you can see an earlier version, but it nicely maps out the connectors on the board. The first instruction we can make the Arduino perform is to flash an LED, which is often considered the "Hello, World!" int led = 13; void setup() { } void loop() { }

Créer un site avec WordPress : Tutoriel 2015 On ne présente plus (ou presque) le logiciel libre WordPress qui permet de créer des blogs et sites Web. Cette application de système de gestion de contenu (SGC) créé en 2003 permet à un ou plusieurs auteurs de publier des billets, lesquels seront classés par date et par catégories. WordPress est utilisé par plusieurs millions d’éditeurs de sites professionnels, associatifs, institutionnels ou privés dans le monde. C’est par exemple, la solution choisie pour le présent portail NetPublic. Guide pour créer un blog ou site avec WordPress Comment créer un site avec WordPress ? Sommaire du tutoriel WordPress 2015 I. Licence : Contrat spécifique : merci de prendre contactGéographie : International Tags: blog, guide, logiciel libre, site, site web, tutoriel

Page Transitions with CSS3 In the last few years, we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I'm gonna teach you how you can have your own, but instead I'll be using CSS Transitions and the :target property to do all the magic. View demo Download source In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic. The Dribbble shots used in the demos are by Matt Kaufenberg. Markup The HTML will contain five main divisions: a header and the four content sections. In the header we will have the main heading and the navigation: Now, the main idea is to use the pseudo-class :target in order to add a transition to the current section. First we will give style to our header and the navigation.

L'importance des espaces blancs dans le design Les espaces blancs (ou White-Space en anglais), aussi appelé "espaces vides", consistent à aérer des éléments afin de les mettre en avant et les valoriser. Découvrons pourquoi ces espaces jouent un rôle clé dans l'élaboration de votre design. « Less is more » (moins c’est plus) disait Mies van der Rohe, architecte grandement inspiré par le minimalisme et le modernisme. Ces espaces trop souvent mal aimés Pour un designer, vendre du vide est toujours mission impossible, car les espaces blancs sont généralement considérés comme du « gaspillage d’espace précieux » qu’il faut absolument remplir avec quelque chose, peu importe quoi, tant que ça ne fasse pas « vide ». L’importance de ces espaces blancs est presque toujours négligé, alors qu’ils sont indispensables. C’est justement le but des espaces blancs, faire respirer ce qu’ils entourent. Se concentrer sur l’objectif Ou comment avoir une migraine… Aucun contenu ne ressort, les photos sont là pour faire du remplissage. L’essentiel est là !

S’auto-former à Wordpress grâce à une formation vidéo Cela fait bientôt 4 ans que Webmarketing & co’m tourne avec le cms de blog WordPress. Les possibilités offertes par ce dernier sont nombreuses et son utilisation est vraiment intuitive au quotidien. Au delà d’une simple plate-forme de blogging, WordPress permet de créer des sites de toutes formes : du site institutionnel, au webzine en passant par le site e-commerce. Quelques soient vos besoins, vous pourrez créer votre site simplement. Et pour vous former à WordPress, une nouvelle formation vient de voir le jour sur Elephorm… Même si l’usage de WordPress est simple, lorsqu’on débute, une formation est nécessaire pour créer le site de nos rêves. La formation “Apprendre WordPress 3.4” accompagnera les débutants ainsi que les personnes souhaitant se perfectionner via des tutoriels qui vous expliqueront étape par étape comment lancer un blog WordPress et créer un design sur mesure. Si vous n’êtes pas encore convaincu par WordPress, voici 10 bonnes raisons de l’utiliser : Bon blogging

Tackk | Les outils pour la classe Outil d’organisation de la classe Un Tackk peut également être utilisé pour gérer sa classe et/ou mettre en place une classe inversée : devoirs, informations générales (annulation d’un cours,…), organisation d’événements, programme du cours, cahier de liaison avec récapitulatif pour les absents, exposition des travaux réalisés (portfolio des apprenants),… Les possibilités sont nombreuses, sans oublier que plusieurs Tackk peuvent être regroupés sur un panneau d’affichage (Tackk Board), permettant encore plus de souplesse. Si l’on prend l’exemple des devoirs, on peut par exemple facilement proposer un document audio, une vidéo ou un texte à comprendre avec une liste de questions.

A Collection of Separator Styles A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you. SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. And now, dig in, scroll and get inspired! An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow: Another example is the inclined zig zag pattern (up and down) made with a linear gradient: …or the folded corner that uses diagonal gradients to simulate the triangles: For some styles we use SVG, like the big triangle: By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.

21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). 2. CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. 4. 5. 6. 7. CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. 8. 9.

Encore silencieuse, une révolution sourde Bientôt, nous serons plus nombreux à accéder à Internet via un écran mobile que par l’intermédiaire de notre PC… L’accessibilité de votre contenu sur les plateformes mobiles est donc, aujourd’hui, un enjeu majeur. Time Magazine l’a bien compris, lui qui est passé, ce lundi 22 octobre, au responsive Web design avec des versions optimisées pour smartphones et tablettes qui offrent même l’accès aux archives remontant jusqu’en 1923! Time.com est d’ailleurs le premier grand site d’information à franchir le pas. Un contenu unique qui s’adapte à toutes sortes et toutes tailles de supports : la convergence frappe à nos portes soutenue par le responsive Web design et l’avènement du langage de programmation HTML5 aux nouvelles fonctionnalités résolument innovantes. Le département communication de Vanksen – Vicky, MM et Christophe – décrypte pour VOUS les forces en marche avec des mots simples pour que la révolution de la convergence et de la mobilité soient embrassées par le plus grand nombre.

Créer un site avec Weebly : 3 tutoriels L’outil en ligne Weebly permet de créer et d’héberger un blog ou un site avec facilité avec une palette de fonctionnalités étendues dans sa version gratuite. L’attrait de Weebly tient à la facilité de prise en main du service, à une palette de possibilités intéressantes notamment via la plate-forme spécialisée Weebly Éducation qui offre la création de blogs ou sites sans l’affichage de publicités. 3 tutoriels pour créer un blog ou un site avec Weebly Pour guider les internautes dans la création d’un site sur Weebly, voici 3 ressources intéressantes : Un petit tutoriel pour Weebly, c’est le nom d’un mini-site pédagogique créé par C. Le tutoriel Weebly for Education (8 pages, en pdf) par M. Le tutoriel Eléments pour la prise en main et l’utilisation de Weebly.com (6 pages, en pdf) par Thomas Desmurs et Christophe Gudefin. Quelques fonctionnalités de Weebly Éducation Licence : Creative Commons by-nc-saGéographie : International Tags: blog, guide, outil en ligne, site internet, tutoriel

Related: