nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Reveal.js - Een framework voor verbluffende HTML-presentatie

Presentaties zijn een geweldige manier om waardevolle en belangrijke informatie over te brengen . Of het nu gaat om zakelijke, educatieve of marketingdoeleinden, u moet interessante, informatieve en aantrekkelijke presentatiedia's maken. Het gebeurt meestal op een desktop of smartphone, maar u kunt het ook maken met behulp van webtechnologie. In dit bericht zal ik je voorstellen aan Reveal.js, een kader voor het maken van prachtige HTML-presentaties.

Reveal.js is een zeer krachtig raamwerk voor het maken van HTML-presentaties, omdat het zoveel geavanceerde functies heeft. Met Reveal.js kunt u een presentatie maken die mobiele bewegingen ondersteunt, zoals knijpen en verschuiven . U kunt ook de presentatie-inhoud maken met markdown, of met visuele editors zoals dia's, als u uw handen niet wilt vervuilen met code. Het biedt je zelfs een aantal prachtige overgangen en thema's en wordt geleverd met een groot aantal andere functies om je te helpen.

Aan de slag met Reveal

In dit bericht zal ik je begeleiden bij de basisimplementatie van Reveal.js. Laten we beginnen met het downloaden van de kopie van deze repository. Het gedownloade bestand bevat de volgende mappen:

  • CSS : de kernstijl
  • js : javascript afhankelijkheden
  • plugin : sommige componenten zijn ontwikkeld als Reveal.js-extensie
  • lib : alle andere activa van derden (JavaScript, CSS, lettertypen)

Nu zullen we alle afhankelijkheden noemen die moeten worden opgenomen. In het hoofdgedeelte, bel de hoofdstijl en ook het thema dat je wilt gebruiken (geef een id van "thema"). Beschikbare thema's zijn: standaard, lucht, beige, eenvoudig, serif, nacht, maan en solarized. Voor deze demo gebruik ik eenvoudig de standaard zoals:

En vóór het einde van de body tag, neemt u het volgende javascript op:

HTML-markup

Laten we in deze handleiding aannemen dat we drie standaarddia's maken met behulp van enkele HTML-codes. Er zijn drie hoofdelementen voor het maken van de presentatiedia's. Zij zijn:

,
en
.

In de

tag is waar u de dia-inhoud moet opgeven. De standaarddia wordt horizontaal verplaatst, als u een verticale dia wilt maken, voegt u eenvoudig een andere toe
binnen. Hier is het voorbeeld:

Dit is een horizontale dia
En dit is een verticale dia

In de eerste dia plaatsen we de intro. Gefragmenteerde weergaven gaan in de tweede en deze wordt uiteindelijk gevolgd door een perforatieschuif met een citaat en interne link binnenin.

Voor de intro, ga ik de titel opmaken met h1 en de subtitel met h3 als volgt:

Presentatie Hongkiat

Hallo, dit is een demo voor Reveal.js

Nu, voor de tweede dia, zal ik een paar woorden gebruiken voor het fragment. Als u een gefragmenteerde weergave wilt maken, moet u de section verdubbelen zoals bij het maken van een verticale dia. Voeg vervolgens de subsectie toe met een fragments id en een klasse van fragment in het inhoudselement, zoals zo:

Ik ben gefragmenteerd

Raak de volgende pijl om mij te onthullen!

Ik ben nummer één

En ik ben nummer twee

Hé, vergeet me niet! Ik ben derde.

Ten slotte wil ik voor de clouline een populair citaat van Eric Cantona gebruiken. Wikkel het woord gewoon in met een

element om een ​​mooie citaatstijl te krijgen. En om intern naar een andere dia te linken, voegt u gewoon een a tag toe met de linkkaart van de dia. Het volgende is het resultaat:

De Punchline

Dit is een van de zeer populaire citaten van :

"Als de meeuwen de trawler volgen, komt dat omdat ze denken dat sardines in de zee worden gegooid. Veel dank."

Klik om terug te gaan naar de eerste pagina.

Nadat alles bij elkaar is gekomen, is de laatste stap om de presentatie te laten werken de volgende configuratie:

Dat zijn de basisconfiguraties die we nodig hebben voor basisimplementatie. Een volledige lijst van configuraties en andere geavanceerde instellingen zoals afprijzen, notities, automatisch verschuiven en meer vindt u hier.

Nu hebben we een mooie dia voor de presentatie. Dit is de intro:

Dit is onze gefragmenteerde weergave:

En dit is de laatste dia:

Conclusie

Met deze tool kunt u een geweldige HTML-presentatie maken op uw site. U kunt hier enkele voorbeelden vinden voor inspiratie. Vergeleken met andere indrukwekkende presentatiebibliotheken, zoals Impress.js, die zich richt op zijn prachtige overgangsanimatie, is Reveal naar mijn mening nog steeds veel krachtiger qua functies.

50 last-minute geschenken voor regelmatige folders

50 last-minute geschenken voor regelmatige folders

Het is het einde van het jaar en de reislust stort zich in. Tijd om even te stoppen met papierwerk en naar plaatsen te gaan waar we nog nooit zijn geweest en eten te eten met namen die we niet kunnen uitspreken ! Reizen is een geweldige ervaring, ongeacht of het een korte weekendtrip is, backpacken over het continent, een uitgebreide vakantie aan de andere kant van de wereld, of kamperen solo midden in Moeder Natuur

(Technische en ontwerptips)

Versiebeheer in Visual Studio-code met Git [Guide]

Versiebeheer in Visual Studio-code met Git [Guide]

Geïntegreerde Git-ondersteuning is een van de grootste functies van Visual Studio Code, de nieuwe broncode-editor van Microsoft. Git is een gedistribueerd versiecontrolesysteem, waarmee je je werk kunt volgen, heen en weer kunt schakelen tussen versies en tegelijkertijd op verschillende branches kunt werken.

(Technische en ontwerptips)