no.hideout-lastation.com
Paradis For Designere Og Utviklere


Reveal.js - Et rammeverk for fantastisk HTML-presentasjon

Presentasjoner er en fin måte å formidle verdifull og viktig informasjon på . Enten det er for forretnings-, utdannings- eller markedsføringsformål, må du skape interessante, informative og engasjerende presentasjonsglass. Det gjøres oftest på en stasjonær eller smarttelefon, men du kan også lage den ved hjelp av webteknologi. I dette innlegget vil jeg introdusere deg til Reveal.js, et rammeverk for vakre HTML-presentasjoner gjort enkelt.

Reveal.js er et meget kraftig rammeverk for å lage HTML-presentasjoner, da det har så mange avanserte funksjoner. Med Reveal.js kan du opprette en presentasjon som støtter mobile bevegelser, for eksempel klemme og lysbilde . Du kan også opprette presentasjonsinnholdet med markdown, eller med visuelle redaktører som Lysbilder, hvis du ikke vil skanne hendene dine med kode. Den gir deg også noen flotte overganger og temaer, og kommer med en rekke andre funksjoner for å hjelpe deg.

Komme i gang med avsløre

I dette innlegget vil jeg veilede deg gjennom den grunnleggende implementeringen av Reveal.js. La oss begynne med å laste ned kopien av dette depotet. Den nedlastede filen inneholder følgende mapper:

  • css : kjernestilen
  • js : javascript-avhengigheter
  • plugin : Noen komponenter utviklet som Reveal.js-utvidelse
  • lib : alle andre tredjepartsaktiver (JavaScript, CSS, skrifter)

Nå skal vi ringe alle avhengighetene som må inkluderes. I hovedavsnittet, ring hovedtypen og også temaet du vil bruke (gi et id av "tema"). Tilgjengelige temaer er: standard, himmel, beige, enkel, serif, natt, mån og sol. For denne demoen bruker jeg bare den vanlige som:

Og før slutten av body, ta med følgende javascript:

HTML Markup

I denne veiledningen kan vi anta at vi skal lage tre grunnleggende lysbilder ved hjelp av enkelte HTML-koder. Det er tre hovedelementer for å lage presentasjonsglassene. De er:

,
og
.

I

tag er hvor du må spesifisere lysbildet innhold. Standardbildet flyttes horisontalt, hvis du vil opprette et vertikalt lysbilde, legg det enkelt til et annet
innsiden. Her er eksemplet:

Dette er horisontal lysbilde
Og dette er vertikal lysbilde

I første lysbilde legger vi innføringen. Fragmenterte visninger vil gå i det andre, og dette vil til slutt bli fulgt av en punchline lysbilde med et sitat og intern link inni.

For intro, skal jeg formatere tittelen med h1 og under tittelen med h3 slik:

Hongkiat Presentasjon

Hei, dette er en demo for Reveal.js

Nå for det andre lysbildet, bruker jeg noen ord for fragmentet. For å opprette en fragmentert visning, må du doble section som i opprettelsen av vertikal lysbilde. Deretter inkluderer underdelen med et fragments ID og en klasse av fragment i innholdselementet slik som:

Jeg er fragmentert

Trykk på neste pil for å avsløre meg!

Jeg er nummer én

Og jeg er nummer to

Hei, ikke glem meg! Jeg er tredje.

Til slutt, for punchline, vil jeg bruke et populært Eric Cantona sitat. Bare vik inn ordet med a

element for å få en pen sitat stil. Og for å koble internt til et annet lysbilde legger du bare til en a kode med lysbildekoblingen. Følgende er resultatet:

Punchline

Dette er en av svært populære sitater:

"Når måker følger trawleren, er det fordi de tror at sardiner vil bli kastet i sjøen. Tusen takk."

Klikk å komme tilbake til den første siden.

Etter at alt har kommet sammen, er det siste skrittet for å gjøre presentasjonsarbeidet, ved å legge til følgende konfigurasjon:

Det er de grunnleggende konfigurasjonene vi trenger for grunnleggende implementering. En full liste over konfigurasjoner og andre forhåndsinnstillinger som markdown, notater, automatisk glidning og mer kan bli funnet her.

Nå har vi et pent lys for presentasjonen. Dette er intro:

Dette er vår fragmenterte visning:

Og dette er det endelige lysbildet:

Konklusjon

Med dette verktøyet kan du lage en god HTML-presentasjon på nettstedet ditt. Du kan finne noen eksempler for inspirasjon her. Sammenliknet med andre imponerende presentasjonsbiblioteker, som Impress.js, som fokuserer på den fantastiske overgangsanimasjonen, er Reveal etter min mening fortsatt sterkere når det gjelder funksjoner.

10 Bluetooth-sporingsenheter for å holde dine interesser trygge

10 Bluetooth-sporingsenheter for å holde dine interesser trygge

Forskjellen mellom feilplassering av telefonen og tastene / lommebøker / fjernkontrollen er at du bare kan ringe telefonen og følge ringetonen for å finne den. Det er også programmer som lar deg finne enheten din hvis den går tapt på et offentlig sted.For de andre elementene, vil du sannsynligvis trenge å rense rommet ditt eller hjemmet for å finne dem, eller forberede et bestemt sted for å forlate det som er nødvendig, slik at du lett kan finne dem før du forlater hjemmet. Alernativ

(Tekniske og design tips)

10 Killer Adobe Photoshop Tips for designere

10 Killer Adobe Photoshop Tips for designere

Tro det eller ei, hvis du bruker Photoshop til å designe nettstedet, er du på riktig vei for å bli en vellykket webdesigner. Dette er rett og slett fordi Photoshop er et av de mest avanserte verktøyene i designindustrien som kan gjøre din kreative fantasi til virkelighet med sin overflod av profesjonelle verktøy som øker produktiviteten din på samme tid.Men hvo

(Tekniske og design tips)