background preloader

Deck.js » Modern HTML Presentations

Deck.js » Modern HTML Presentations

Modèles de présentations HTML5 pour remplacer PowerPoint Suite à mon track sur la supervision lors de la première journée de SophiaConf 2012, j'ai eu pas mal de question par mail sur le logiciel utilisé pour concevoir mon support. J'ai en fait utilisé une présentation 100% HTML5 basée sur l'outil Impress.js, lui même inspiré de Prezi. Je ne trouve que des avantages à ce type de présentation. Nous allons dans ce billet découvrir un panel de solutions équivalentes permettant, moyennant une bonne connaissance du langage HTML et de CSS, de concevoir des présentations originales sans avoir à installer aucun logiciel sur votre machine mis à part un éditeur de texte et un navigateur Web. Les commentaires sont bien sûr là pour compléter cette liste et nous faire partager vos expériences sur le sujet ! Démonstration GitHub C'est par cet outil que j'ai découvert les alternative possible à la grande maladie des entreprises du 21em siècle: PowerPoint. L'exemple fourni sur le GitHub permet de bâtir simplement un jeu de slide. Démonstration GitHub Démonstration

HTML5 Presentation In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley.

Slideshow with jmpress.js Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: The background color classes will be applied to the previous wrapper. The steps will have the following style:

DROPitTOme - Securely receive files from anyone to your Dropbox 20 Snippets You should be using from Html5 Boilerplate I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.” It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template. Html We will start off by checking out some of the html snippets used in the resource. Favicon and Apple icons The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Faster page load hack Css

Using Impress.js : Tony Thomas March 9, 2012 11:08 am Published by admin Update II: I updated the init method needed in the HTML. Update: There is at least one WYSIWYG impress.js editor available now. I came across Impress.js a while back and I was, well, impressed. Right now you can only learn how to use Impress.js by reading the comments and experimenting. The first thing is that you have to have a story to tell. Assuming you know what you want to say, let’s move on. First you’ll need to download the JavaScript. The slides need to go into an element with the id of “impress.” Options Now things get interesting. You can give you slides ids so you can link to a particular slide. The next dimension we can control is scale: Note the data-scale attribute above. We can also control rotation: For this, use data-rotate. And now we go 3d: The data-z attribute above places this slide 3000 pixels away along the z-index. Finally, we can control rotation along axes: Those are the options. Similar Posts:

ClassCharts. Faire un plan de sa classe. Les Outils Tice ClassCharts est un outil en ligne qui permet de créer en quelques secondes des plans de vos classes avec les places pour chaque élève. Sous ses airs anodins, ClassCharts propose un outil puissant pour optimiser le plan de chacune de vos classes. Le service qui est gratuit n’a qu’un seul et véritable défaut. Il est en anglais. Si vous dépassez ce petit obstacle, qui n’en est pas vraiment un, dans la prise en main, il pourrait bien vous aider à créer une configuration optimale et un suivi de l’organisation du plan de votre salle de cours. ClassCharts permet de créer autant de plans ou d’organigrammes que nécessaire. Outre la possibilité de créer un organigramme, ClassCharts vous permet de prendre à la volée des notes en cours sur chacun de vos élèves. ClassCharts vous proposera également des rapports complets d’évaluation d’un groupe ou d’un élève sous une forme graphique assez complète. Bravo à l’équipe de ClassCharts qui a mis à jour et francisé son outil après avoir lu cet article.

Initializr - Start your HTML5 project in 15 seconds! 6 Plugin for Impressive HTML Slideshow And Presentation - Javascript Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. The following is 6 javascript plugins that allow you to do that. You will need latest browsers that support CSS3 3D transform. impress.js It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transform and transition in modern browsers. About Kevin Kevin Liew is a web designer and developer and keen on contributing to the web development industry. CSS4 Sneak Peak

Related: