Nola egin aurkezpenak HTML diapositibekin

Non dagoen mundu batean erakutsi gure ideiak interneten Gero eta beharrezkoagoa da eta tresnen aniztasunak aurkezpen harrigarriak sortzera bultzatu gaitu. Kasu askotan komunikabide batzuekin bateraezinak izaten jarraitzen dute, zalantzarik gabe. HTML aurkezpenak arlo honetako alternatiba unibertsala izaten jarraituko dute.

Edonorentzat ez da sekretua HTML aurkezpen ederrak sortzeak denbora asko behar duela eta HTML, CSS eta zenbait kasutan Javascript ezagutza aurreratu samarrak behar direla. Arazo hauetatik, tresna bikaina ateratzen da web diapositibak.

Zer da web diapositibak?

-K egindako iturburu irekiko "esparrua" deitzea da nolabait Jose Luis Antunez, horrek aukera ematen digu HTML aurkezpenak sortu azkar eta erraz. Tresnak funtsezkoak ditu zure aurkezpenak egiteko; era berean, demo aurkezpenen bat egin dezakezu eta zure gustura pertsonalizatu minutu gutxitan.

Tresna honekin egin ditudan HTML aurkezpenek estetika ikusgarria izango dute. Aipatzekoa da tresna honek HTML eta CSS oinarrizko ezagutzak eskatzen dituela, beraz, ezin hobea da erabiltzaile mota guztientzat, edukian soilik arreta jarri behar baitute eta aurkezpena nola prestatzen duten oso gutxi.

Nola deskargatu web diapositibak?

Web-diapositibak deskargatzeko, burutu ezazu zure gogoko direktorioko komando hau:

wget https://github.com/jlantunez/webslides/archive/master.zip

Biltegi ofiziala ere klona dezakezu

git clone https://github.com/jlantunez/webslides.git

Proiektuaren karpetaren barruan beharrezko js, ​​css eta demoak lortuko dituzu zure HTML aurkezpenak erraz sortzen hasteko.

Nola erabili web diapositibak?

Web diapositiben abantaila handiena erabiltzeko erraztasuna da. Tresna honek egiazko helburuak dituzten aurkezpenak sortzea errazten du eta bere demo serieak aurkezpenak sortzeko prozesua% oso altu bizkortzen du.

Zer lortuko dugu web diapositibak deskargatzean?

Web-diapositibak deskargatzerakoan hainbat karpetatan sartzen gara, besteak beste, demoak eta irudiak (gailuak eta logotipoak).

  • CSS karpetan gure aurkezpenen estiloak gordeko dira
  • Behar diren javascript-ak js karpetan gordeko dira, funtsezko webslide.js barne magia gehien egiten den lekuan.
  • Demoetako irudiak eta html fitxategiak irudi eta demo karpetetan gordeko dira hurrenez hurren.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Web aurkezpenekin HTML aurkezpenak sortzea

Webguneko diapositibak erabiltzerakoan oinarrizko 2 abantaila daude, ondoren aipatuko ditugunak:

  • Kodea garbia eta eskalagarria da. Nomenklatura ezagunenen erabilerarekin markatze intuitiboa ere barne hartzen du. Ez da klaseak erabili behar, ezta gehiegizko habia erabili ere.
  • Bakoitzak <section> #webslides-en diapositiba bat adierazten du. Beraz, paginazioa oso erraza da.
1. diapositiba  1. diapositiba

Modu berean diapositiba bertikalak egin ditzakegu, estilo bertikala gehituz


Webgunearen CSS osatzen duten klaseak

  • Tipografia: .text-landing, .text-data, .text-intro ...
  • Atzeko planoaren koloreak: .bg-primaria, .bg-sagarra, .bg-urdina ...
  • Atzeko irudiak: .hondoa, .hondoa-zentroa-behea ...
  • Txartelak: .card-50, .card-40 ...
  • Bloke malguak: .flexblock.clients, .flexblock.metrics ...

Web diapositibetara hedatuz

web diapositibek estilo eta funtzionalitate berriak gehitzeko aukera ematen digute. Horretarako, adibidez, baliabide hauetako batzuk gehi ditzakegu:

Web aurkezpenekin egindako HTML aurkezpen demoak

Web aurkezpenekin egindako HTML aurkezpenen demo sorta bat ikus dezakezu hemen. Era berean, esparrua deskargatzean demo horietako bakoitzaren kodeketara sar zaitezke.

Demo HTML aurkezpenak

Demostrazioen zorroak 2 HTML aurkezpenak azkar eta akabera bikainekin sortzea ahalbidetuko digun tresna da hau, baina edukian arreta jartzen eta aurretik imajinatzen ez genituen emaitzak lortzen lagunduko digu.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

3 iruzkin, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Alan Fuentes esan zuen

    Oso ona, tresna nahiko interesgarria iruditzen zait nahiz eta nire gustura revel.js erabiltzea nahiko errazagoa den, HTML, CSS eta JS bezalako web teknologietan oinarritutako tresna denez, teknologia horien oinarrizko ezagutzak edukita zure aurkezpena egin dezakezu. askoz ere interesgarriagoa dirudi.

    Agurra.

    1.    musker esan zuen

      Profil anonimo batean ezkutatzea oso erraza da nahi duzuna kritikatzea eta esatea, baina zoritxarrez ulergarria da zure koefizientea zure begiek ikus dezaketen lekutik harago begiratzea ez gelditzea, artikulu hau nik idatzi dut dokumentazio ofizialean oinarrituta eta tresnari buruz egin dudan berrikuspena. Zein ideia bat egiteko, ezagutu nuen azken egunotan github-en egin den aplikaziorik bozkatuena dela eta https://github.com/jlantunez/webslides… Hala ere, guretzat oso garrantzitsua da denbora hartu izana beste gune bat bilatzeko non guk ere bera idazten duten, beraz, berrikusle hutsaren postura aurkeztu ahal izango duzu, nire ustez eskatzaile izaten jarraituko baitut zalantzarik baduzu zerbait egokia erabakitzeko irizpidea.