Lær å bruke Deck.js nettpresentasjonsramme

For flere måneder siden presenterte jeg en rask demonstrasjon om å konvertere presentasjonsfiler til en nett-klar lysbildefremvisning ved hjelp av JavaScript. I dag skal jeg gjennomgå presentasjonsrammeverket Deck.js, som gir et spekter av designalternativer fra enkel HTML-koding til teknisk API, eller en kombinasjon av begge.

Hva er Deck.js?

Deck.js er etableringen av Caleb Troughton, som utviklet rammeverket for jQuery-presentasjonen i løpet av flere måneder høsten 2011. Det er tilgjengelig som en open source GPL-nedlasting med oppdateringer på GitHub. Rammeverkets eneste formål er å bygge HTML-presentasjoner. Lysbilder er grunnleggende HTML og inkluderer forhåndsinnlagte temaer og maler for å komme i gang med å lage et lysbildedekke i løpet av minutter med liten kunnskap om HTML. Eller, hvis du har et forbedret ferdighetssett, kan du lage tilpassede kortstokker med API-en eksponert av kjernemodulen og utvidelsene. Og så er det det beste fra begge verdener, der du kan ta litt av hver, finpusse et tema, hacke en utvidelse eller skrive din egen.

Figur A

Deck.js betraktninger

  • HTML, API eller det beste fra begge verdener: Begynn med den helt grunnleggende HTML-en, eller integrer en komplett pakke med API-er som du kan legge til i deg selv.
  • Deck.core-modulen holder oversikt over lysbildetilstander.
  • CSS definerer hvordan lysbildene skal se ut og hvordan overgangen mellom dem.
  • Utvidelser bruker kjernehendelser og metoder for å legge til ekstrautstyr, noe som gir programforfattere frihet til å legge til innholdet sitt.

Lage et skyvedekk med Deck.js

Nedlastingen kommer med en introduksjonsindeks.html som gir deg et flott utgangspunkt å studere, og til slutt endre presentasjoner for eget bruk. Det første lysbildet i den innledende presentasjonen HTML vises som vist i Chrome 21.0.1 i figur B nedenfor.

Figur B

Skriv lysbilder

Lysbildeinnhold er enkelt HTML med en klasse av lysbilde . HTML-kodebiten som jeg vil bruke som eksempler nedenfor, er hentet fra introduksjonsindeksen.html som følger med nedlasting av Deck.js; hver seksjon med en klasse som tilsvarer "lysbilde" representerer et nytt lysbilde i dekket.

Komme i gang med deck.js

Hvordan lage en dekk

  1. Skriv lysbilder

    Innhold i lysbildet er enkelt HTML.

  2. Velg temaer

    En for lysbildestiler og en for dekkoverganger.

  3. Inkluder utvidelser

    Legg til ekstra funksjonalitet på kortstokken din, eller la den bli fjernet.

    Velg temaer

    Ett tema er valgt for lysbildestiler og et annet tema for dekkoverganger. Stiltemaer tilpasser farger, typografi og oppsett av lysbildeinnhold, og kalles fra tematypearket som vist i introduksjonen HTML-kodebiten nedenfor:

    Andre stilalternativer som følger med nedlastingen inkluderer den sveitsiske stilen (swiss.css) og neonstilen (neon.css).

    Overgangstemaer definerer overgangene mellom lysbildene ved hjelp av CSS3-overganger. Mindre kapable nettlesere faller tilbake til utskjæringer. Stilarket kalles som vist i introduksjons-HTML-utdraget nedenfor:

    Andre overgangsalternativer som er inkludert i nedlastingen, er det vertikale lysbildet (vertical-slide.css) og fade slide (fade.css).

    Disse stilarkene gir gode utgangspunkt for å lage og endre dine egne stiler, som faktisk blir oppmuntret av forfatteren.

    Endring av introduksjons HTML til neon-stiltemaet oppdaterer utseendet og følelsen på demonstrasjonssiden, som vist i figur C (Chrome 21.0.1).

    Figur C

    La oss nå endre overgangstemaet til vertikalt og legge merke til hvordan pilene har beveget seg fra venstre og høyre side til øverst til høyre og nå peke opp og ned, som vist i figur D nedenfor.

    Figur D

    Inkluder utvidelser

    Legg til ekstra funksjonalitet på kortstokken din, eller la den bli fjernet. "Core" -katalogen gir deg grunnleggende lysbildefunksjonalitet med venstre og høyre pilnavigering, men du vil kanskje ha mer. Her er de som er inkludert i dette dekket:

    • deck.goto: Legger til en snarveistast for å hoppe til et lysbilde nummer. Trykk på g, skriv lysbildetallet og trykk Enter.
    • deck.hash: Aktiverer intern kobling innen lysbilder, dyp kobling til individuelle lysbilder, og oppdaterer adressefeltet og et permalinkanker med hver lysbildeskift.
    • deck.menu: Legger til en menyvisning, slik at du kan se alle lysbildene i et rutenett. Trykk m for å veksle til menyvisning, fortsett å navigere på dekk og trykk m for å gå tilbake til normal visning. Berøringsenheter kan dobbeltklikke på kortstokken for å veksle mellom visninger.
    • deck.navigation: Legger til klikkbare venstre og høyre knapper for mindre skråstilt tastatur.
    • deck.status: Legger til en sidetallindikator. (Strøm / total)
    • Hver utvidelsesmappe i nedlastingspakken inneholder nødvendige JavaScript-, CSS- og HTML-filer. For en komplett liste over utvidelsesmoduler som er inkludert i deck.js, sjekk dokumentasjonen.

    Hekkede lysbilder

    Utvidelses-lysbildet har noen få trinn for demonstrasjonsformål, og for å opprette under-trinn i lysbilder, kan du bare hekke dem som en klasse av lysbilde i en ordnet eller uordnet liste, som vist i HTML-kodebiten nedenfor:

    utvidelser

    Core gir deg grunnleggende lysbildefunksjonalitet ...

    • deck.goto

      Legger til en snarveistast for å hoppe til et hvilket som helst lysbilde nummer ...

    • ...
    • ...
    • ...
    •  Live introduksjon html demonstrasjonen viser side 9 som figur E : 

      Merket du at stilen hadde endret seg i den siste figuren? Jeg oppdaterte stiltemaet for å kalle det sveitsiske temaet (swiss.css).

      Andre elementer

      Bilder er ganske enkle å legge til i et lysbilde, som vist nedenfor i HTML-utdraget og figur F :

      Andre elementer: bilder

       

      Legg til blokkeringstilbud enkelt, akkurat som i alle HTML-dokumenter. Et eksempel er vist i figur G :

      Videoembeds inkluderer videoer som bruker innebygde koder fra din favoritt online videotjeneste eller med et HTML5 videoelement. Demonstrasjon HTML-kode vises i kodebiten nedenfor:

      Andre elementer: Videoinnlegg

      Bygg inn videoer fra din favoritt online videotjeneste eller med en HTML5-videoelement.

       For dette eksempelet oppdaterte jeg den innebygde koden for demonstrasjonen index.html-filen og innlemmet en video fra en nylig Roger Waters "The Wall" Tour-konsertdato. Den modifiserte demonstrasjonssiden er vist i figur H : 

      Deck.core-modul

      Deck.core-modulen gir all den grunnleggende funksjonaliteten for å lage og bevege deg gjennom en kortstokk. Den bruker og fjerner klasser for å indikere dekkets tilstand og lysbildene, slik at CSS kan ta seg av den visuelle representasjonen av hver tilstand. Den gir også metoder for å samhandle med kortstokken, samt grunnleggende nøkkelbindinger for å gå til neste og forrige lysbilde. Separate utvidelsesmoduler gir mer funksjonalitet ved å bruke API-et levert av kjernen.

      Klar til å lære mer?

      Hvis du vil lære om å lage dine egne temaer, utvide deck.js og mer, kan du sjekke dokumentasjonen på URLen (http://imakewebthings.com/deck.js/docs/).

      © Copyright 2021 | pepebotifarra.com