Prøv det lette CSS Slideshow Systemet til neste presentasjon

Lea Verou, den respekterte og kjente W3C-påvirkeren, nettstandard-guruen og front-end-webutvikleren bestemte at konvensjonelle, online og CSS-lysbildefremvisninger ikke var gode nok, så hun satte seg ut for å lage sin egen versjon av et elegant og stilig lysbildefremvisning system på egen hånd. Lea kaller det CSSS, eller CSS Slideshow System.

nedlasting

Nedlastingen av Github inkluderer en MIT-lisens Copyright © 2010 som gjør det mulig for hvem som helst å bruke koden og "programvaren" som den er, og så lenge lisensavtalen er intakt med eventuelle kodedistribusjoner. Nedlastingen er tilgjengelig i zip-filformat med en lett 163KB, og inkluderer:

  • boilerplate.html, som er malfilen
  • filindeks.html
  • fire css-filer og tre js-filer som er lokalisert i rotkatalogen
  • fem js-filer som er lokalisert i en plugins-katalog.

Bidragsytere er også velkomne til gaffelversjoner og legge dem ut på Github-repo.

Nettleserstøtte

For øyeblikket fungerer CSS Slideshow System i de nyeste versjonene av Firefox, Opera, Safari og Chrome, som jeg har testet selv og funnet lignende resultater i hver nettleser. Bare for fnisser testet jeg systemet i IE8, og uten overraskelser i det hele tatt, gjengis det ikke på noen lignende lysbildefremvisningsmode. Systemet gjengis heller ikke bra i mobile enheter på dette tidspunktet.

Under panseret

Jeg ønsket å se nærmere på hvordan CSS Slideshow System er bygget, og så trakk jeg opp index.html og boilerplate.html- filene i tekstredigeringsprogrammet mitt, så vel som i Chrome's Inspect Element-verktøy for å se hva jeg kunne finne under websidens dokumenter.

Index.html trekker inn flere ressurser, inkludert tre bildefiler, seks js-skriptfiler og tre css-filer for å bygge lysbildefremvisning i nettleseren. Js-skriptfilene inkluderer flere fra plugins-katalogen, inkludert code-highlight.js som Lea definerer som en superenkling syntaks-utheving-plugin for CSSS-kodebit; css-controls.js, som er et skript for å gjøre skjemakontroller kontrollere CSS-stiler; og på sin side krever css-edit.js, som er en avhengighet av CSS-redigeringsprogramtillegg som CSS-utdrag eller CSS-kontroller. Andre js-filer inkluderer css-snippets.js, som er et skript for å legge til prefikser til standard CSS3 i eller stilattributter, og prefiksfree.min.js, sammen med slideshow.js, som er hjertet i CSSS JavaScript-koden. CSS-filene inkluderer slideshow.css, som er det grunnleggende CSS slik at lysbildefremvisningsskriptet fungerer som et lysbildefremvisning; talk.css, som brukes til å stille inn taletiden for lysbilde; og theme.css, som er de grunnleggende CSSS-lysbildefremvisningstypene og -variablene.

Figur B

Boilerplate.html har ganske færre ressurser som trekker inn på webdokumentsiden, inkludert bare to bildefiler, to js-filer og tre CSS-filer. Det er absolutt en nedskalert versjon av demo-indekssiden, men det gir et flott utgangspunkt for alle som vil koble til en ny, snaz online presentasjon. Malen har fire startbilde-lysbilder, som enkelt kan endres ved å redigere alt innhold i et element der klassen er lik "lysbilde." Eksemplet på HTML-kodebiten nedenfor viser kjelplaten "lysbilder":

Eksempel på CSSS-presentasjon

Av Lea Verou

Seksjonens tittel

Lysbildetittel

Skyv innhold

Takk skal du ha!

Avsluttende merknader

Funksjoner

  • En enkelt HTML-fil inneholder hele presentasjonen; hvert lysbilde er definert som et hvilket som helst element med class = "slide".
  • Temaer er alle stylet med CSS.
  • JavaScript tar seg av alle hurtigtastene, og alt som CSS ikke kan kontrollere.
  • Navigering skjer gjennom tastaturet ved å bruke piltastene for å gå videre eller gå til tidligere lysbilder eller inkrementelle skjermer, eller Ctrl + piltastene for å hoppe til neste eller forrige lysbilde. "Hjem" -tasten tar deg til begynnelsen av presentasjonen, og "Slutt" -tasten tar deg til det siste lysbildet.
  • Et miniatyrbilde for å veksle lysbildene oppnås i nettleseren med "Shift + H" -tastboksen (se figur C )
  • Timer er satt som en fremdriftslinje øverst på skjermen, og samtalevarigheten er angitt med datavarighetsattributtet på kroppen som kan style timer og sluttilstand med henholdsvis velgerne #timer og # timer.end.
  • Presentatørnotater er bare synlige for presentatørskjermen når de er aktivert, og ved å velge kombinertasten "Shift + P" som vist i figur D :
  • ID-er tilordnes dynamisk av JavaScript, men i følge Lea kan du også tildele dine egne, og bringe det beste fra begge verdener.
  • Trinnvis visning av lysbildeinnhold (bare legg til klasse = "forsinket")
  • Skyv skalering basert på vindusstørrelse (størrelse alt du ønsker å være skalerbar i ems)
  • Document.title endres i henhold til lysbildetittel (hentet enten fra tittelattributtet eller lysbildets overskrift)
  • Plugins som legger til mer funksjonalitet inkluderer CSS-kodebiter, som gir mulighet for dynamisk redigerte CSS, prefikser automatisk CSS3-egenskaper og verdier når det er nødvendig, og justerer automatisk rader og skriftstørrelse på linjeskift.
  • CSS Controls er en annen plugin som bruker skyvekontroller og andre kontroller for å justere CSS-verdier for dataemne, data-stil, og også automatisk prefikser CSS3 egenskaper og verdier når det er nødvendig.
  • Code Highlight-plugin legger til syntaksmarkering for hvert element and element and only highlights the active side for performance enhancement as shown in Figure E:

Innpakking

Foreløpig er ulempene få; sannsynligvis den som lokalsamfunn vil bekymre seg mest for er at CSS Slideshow System ikke er i drift på mobile enheter. I følge Lea er presentasjonsmiljøet et kontrollert system, og det består av en lett og lettere å forstå kode, og det er derfor det bare fungerer i moderne nettlesere og uten musestøtte. Med disse begrensningene i bakhodet, kan det å lage en lett presentasjon ved hjelp av CSS Slideshow System være akkurat den rette applikasjonen du leter etter når du leverer din neste presentasjon, enten personlig eller online.

© Copyright 2020 | mobilegn.com