karaoPrint.js

Workshop Luuse

11.3.19 → 15.3.19

Esa Pyrenées — Pau

Bienvenue sur karaoPrint.js, un outil JS pour créer des karaokés en HTML / CSS, basé sur la YouTubePlayer API.

Brief

Workshop brief ici

Demo

Ici une live chanson en action.

Getting Started

Télécharger le Starterkit
Dans le fichier index.html, renseigner le lien youTube de votre chanson, dans l'attribut data-src de l'élément qui porte la class "track" :
```
						
	<div class="track" data-src="http://youtube.com/?"></div>
						
					
```

L'élément qui porte la class "slides" contient tous les slides de votre karaoke. Chaque div enfant est un slide. Vous êtes libre d’en ajouter autant que vous voulez.

						
	<div class="slides">
		<div data-slide="0" class="sing">
			Welcome to karaoprint.js
		</div>
		<div data-slide="1">
			Yeeaahh
		</div>
	</div>

Ce qui importe dans chaque slide, c'est l'attribut data-slide. Il contient la seconde à laquelle ce slide doit s'afficher. C'est lui qui permet de créer l'animation. Il vous permet également de viser le slide dans le CSS
```
						
	<div data-slide="0" class="sing">
						
					
```
La class "sing" indique que le slide est actif. Elle doit donc être présente sur le tout premier (sinon il n’apparaît pas).
```
						
	<div data-slide="0" class="sing">
						
					
```

Gérer le style

Pour appliquer votre propre karaoStyle, insérez votre CSS dans le fichier assets/css/custom.css et pas dans le fichier assets/css/karoprint.css

Tips

CSS

Flexbox → https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Grids → https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
Media Queries → https://www.w3schools.com/css/css_rwd_mediaqueries.asp, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Glyphs → https://unilist.raphaelbastide.com/
Animations → https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Units → https://www.w3schools.com/CSSref/css_units.asp
Can I Use _ ? → https://caniuse.com/

Fonts Libres

Use and Modify → https://usemodify.com/
Velvetyne → https://www.velvetyne.fr/
GoogleFonts → https://fonts.google.com/
Font Squirrel → https://www.fontsquirrel.com/
Font Library → https://fontlibrary.org/en
By Womxn → http://design-research.be/by-womxn/
OSP Foundry → http://osp.kitchen/foundry/
Sébastien San Filipo → http://love-letters.be/foundry.html
Omnibus Type → https://www.omnibus-type.com/
Temporary State → http://typefaces.temporarystate.net/preview/

Refs

Karaoke

Movieprint → http://movieprint.codedrops.net/
eSpeak → http://espeak.sourceforge.net/

WebToPrint - Ressources

PrePostPrint → https://prepostprint.org/doku.php//en/introduction
Post Digital Publishing Archives → http://p-dpa.net/
Library of the Printed Web → http://libraryoftheprintedweb.tumblr.com/, https://printedweb.org/

WebToPrint - Ojects

WebToPrint — Tools

WebToPrint - Enthousiastics

OSP → http://osp.kitchen/
La Villa Hermosa → http://design.lavillahermosa.com/
Bonjour Monde → http://bonjourmonde.net/
Loraine Furter → https://lorainefurter.net/en
Eric Schrijver → https://ericschrijver.nl/
g.u.i. → https://www.g-u-i.net/en
Sarah Garcin → http://www.sarahgarcin.com/
Raphaël Bastide → https://raphaelbastide.com/
Louise Druhle → https://www.louisedrulhe.fr/
Lena Robin→ http://www.lenarobin.xyz/