Prezentari cu S5 – partea 1
Pentru ca am fost intrebat cum am facut prezentarea de joi "ca arata misto", o scurta introducere a S5:
S5 vine de la "simple standards-based slide show system", un format de prezentari dezvoltat si publicat de Eric Meyer (cunoscut pentru cartile sale legate de CSS), bazat pe XHTML, CSS si JavaScript. Motivul pentru care mi-a placut este ca separa cat se poate de mult continutul de stil si ca se bazeaza pe niste tehnologii pe care pot zice ca le cunosc cat de cat bine (ceea ce din pacate nu pot afirma despre Latex, de exemplu). De fapt, cunostinte de JS sau CSS nu sunt necesare decat pt. hackuri mai avansate, stilurile vin sub forma de arhive care contin un template xhtml si toate css-urile si js-urile necesare, asa ca in principiu ramane doar sa "fill in the blanks". Stilurile sunt in general gandite sa se comporte diferit pe ecran si pe hartie (ceea ce e foarte fain in principiu, dar la slide-uri seci dpdv. content nu e nemaipomenit, dar despre asta mai tarziu), iar pozitionarea cu css reuseste sa se descurce decent pe orice rezolutie. Javascriptul se ocupa sa mearga cam toate metodele de navigare, si creaza inclusiv un drop-down dragut cu slide-urile in dreapta jos pt. navigare rapida.
Site-ul proiectului contine un tutorial care poate fi urmarit de oricine are niste cunostinte de baza despre editat HTML (adica cam toata lumea), asa ca nu ma lungesc foarte mult in explicatii si ma rezum la ce am facut eu in plus:
- Recomandarea este sa downloadezi arhiva cu template-ul si sa lucrezi pe ea, unele stiluri au hardcoded cateva cai prin headerul paginii xhtml (ceea ce m-a cam facut sa stramb din nas cand am vrut sa schimb tema, dar e relativ usor de depistat care-s diferentele).
- Am rezistat tentatiei de a edita css-ul original sau de a pune formatari de prezentare in html, am inclus un stylesheet cu cele cateva overrides in sectiunea <head> a html-ului.
- Pentru crearea efectului de "punct-cu-punct" la bulleted lists, se adauga la <ul>-ul care le contine clasa "incremental". Nu e specific listelor, se poate pune clasa asta pe orice container si va afisa "on click" succesiv elementele din el (chestia asta nu e in reference, dar pare suportata de mai multe stiluri "in the wild")
- Ca sa nu fie probleme "de diacritice, mai trebuie adaugat in pagina o declaratie <?xml version="1.0" encoding="UTF-8"?> (si <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> ca nu strica). Don't ask me why, pe mine m-a ajutat.
In the end, consider ca a fost foarte rapid de scris, dat fiind ca nu mi-am batut de loc capul cu "cum sa arate" pana n-am terminat continutul, care a fost banal de transpus din outline-ul meu cu liniute in div-uri de html. Daca o sa mai inventez niste prezentari cred ca o sa mai caut pe net teme ca sa am "zoo", e un format din ce in ce mai popular.
Postul urmator va fi despre cum m-am straduit sa satisfac si doritorii de "pdf cu slide-urile pe slideshare". Sper ca va fi un success story, dar oricum, am dat cu nasul de tehnologii foarte interesante.
Leave a Reply