Hur man gör HTML-presentationer med webbplattor

I en värld där visa våra idéer på internet Det har blivit alltmer nödvändigt och där mångfalden av verktyg har lett oss att skapa fantastiska presentationer, som i många fall slutar vara oförenliga med vissa medier, utan tvekan, HTML-presentationer de kommer att fortsätta vara det universella alternativet på detta område.

Men det är ingen hemlighet för någon att skapa vackra HTML-presentationer kan ta lång tid och kräver lite avancerad kunskap om HTML, CSS och i vissa fall JavaScript. Från dessa problem kommer ett utmärkt verktyg fram webbsajter.

Vad är webbsajter?

Det är att kalla det på något sätt en öppen källkod "ram", gjord av Jose Luis Antunez, som tillåter oss skapa HTML-presentationer snabbt och enkelt. Verktyget har det viktigaste för dig att göra dina egna presentationer. På samma sätt kan du ta en av demopresentationerna och anpassa den efter dina önskemål på några minuter.

HTML-presentationerna som jag gjorde med det här verktyget kommer att ha en imponerande estetik. Det är värt att notera att detta verktyg kräver mycket grundläggande kunskaper om HTML och CSS, så det är perfekt för alla typer av användare, som bara bör fokusera på innehållet och väldigt lite på hur de förbereder presentationen.

Hur laddar jag ner webbsajter?

För att ladda ner webbplattor, utför bara följande kommando från din favoritkatalog:

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

Du kan också klona det officiella arkivet med

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

Inne i projektmappen får du nödvändiga js, css och demos för att enkelt skapa dina egna HTML-presentationer.

Hur använder jag webbsajter?

Den största fördelen med webbsajter är dess användarvänlighet, det här verktyget gör det enkelt att skapa presentationer med olika mål och dess demoserier påskyndar presentationsskapandet med mycket höga procent.

Vad får vi när vi laddar ner webbsajter?

Vid nedladdning av webbplattor kommer vi åt olika mappar, som inkluderar demos och bilder (enheter och logotyper).

• Mappen css lagrar stilarna för våra presentationer
• De nödvändiga javaskriptet kommer att lagras i js-mappen, inklusive det grundläggande webslide.js, där det mesta av magin görs.
• Demonternas bilder och html-filer sparas i bilderna respektive demomapparna.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Skapa HTML-presentationer med webbplattor

Det finns två grundläggande fördelar när du använder webbplattor, som vi nämner nedan:

• Koden är ren och skalbar. Det inkluderar också intuitiv markering med användning av de mest populära nomenklaturerna. Det finns inget behov av att använda klasser eller överanvändning.
• Varje <section> i #webslides representerar det en bild. Så paginering är extremt enkel.

Bild 1  Skjut 1

På samma sätt kan vi göra vertikala bilder och lägga till en vertikal stil

Klasser som utgör webbsidorna CSS

• Typografi: .text-landing, .text-data, .text-intro ...
• Bakgrundsfärger: .bg-primär, .bg-äpple, .bg-blå ...
• Bakgrundsbilder: .background, .background-center-bottom ...
• Kort: .card-50, .card-40 ...
• Flexibla block: .flexblock.clients, .flexblock.metrics ...

Utökas till webbplattor

webbsajter tillåter oss att lägga till nya stilar och funktioner, till exempel kan vi lägga till några av följande resurser:

• Unsplash
• animation.css
• partiklar.js
• pt

HTML-presentationsdemonstrationer gjorda med webbplattor

Du kan se en serie demonstrationer av HTML-presentationer gjorda med webbplattor här. På samma sätt, när du laddar ner ramverket kan du komma åt kodningen för var och en av dessa demos.

Detta är ett verktyg som gör att vi kan skapa HTML-presentationer snabbt och med bra finish, men det kommer också att hjälpa oss att fokusera på innehållet och uppnå resultat som vi inte föreställde oss tidigare.