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.

Een kijkje in: Small Business Web Design voor Service Industries

Een kijkje in: Small Business Web Design voor Service Industries

Kleine bedrijven zijn de motoren van lokale economieën, allemaal met hun eigen unieke klantenbestand en doelen. Het ontwerpen van websites voor hen vereist specifieke strategieën .Tegenwoordig zijn de meeste kleine bedrijven actief in de dienstverlenende sector, of met andere woorden in de tertiaire sector van de economie, zoals restaurants, loodgieters, schoonheidsspecialisten, advocaten en anderen - zij vormen ook de meerderheid van klanten voor freelance webontvetters.I

(Technische en ontwerptips)

Alles wat u nodig hebt om een ​​Pro WordPress-ontwikkelaar te worden

Alles wat u nodig hebt om een ​​Pro WordPress-ontwikkelaar te worden

Het pad om een ​​ervaren ontwikkelaar te worden is lang en vrijwel eindeloos. Dankzij nieuwe frameworks en webtechnologieën blijven ontwikkelaars op hun hoede om elk jaar meer te leren. WordPress is misschien wel de meest populaire PHP CMS ooit gemaakt en het voorziet bijna 20% van alle zelf-gehoste websites.Als

(Technische en ontwerptips)