Canic Interactive - Prezentacija dizajna

Najpre

Sve je mnogo prosto i bez ovog uputstva možes da uradis sve, samo menjajuci data.json iz template.zip, ali evo i detalja:

• Fajlovi moraju da se nalaze na serveru ili localhostu, data.json ne može da se pročita iz lokalnog file system-a
• Sve boje će biti generisane na osnovu jedne zadate. Odaberi je tako da bude očigledno da navigacija nije deo slike koju prezentuješ.
• U data.json mora da postoji bar jedan slide, koji mora da ima definisanu sliku. Sve ostalo je opciono.
• JSON je osetljiv format i na žalost slabo toleriše greške. Ako umesto svoje prezentacije dobiješ poruku o grešci, ona će verovatno da sadrži detalje koji će ti reći šta da tražiš. Ako ne možeš da nađeš problem nemoj da gubiš mnogo vremena na to - pozovi programera.

Kako se pravi prezentacija

1. Stavi sve slike u direktorijum images.
2. Otvori fajl javascripts/data.json u tekst editoru (npr. notepad).
3. Podesi opšta podešavanja:
1. Ime sajta - title
2. Eventualno datum (ovo možeš da iskoristiš i za verziju dizajna) - date
3. Boja navigacione linije - color
4. Pozicija navigacione linije - anchor, offset
4. Napravi onoliko slide-ova koliko imaš slika.
5. Podesi ove opcije za svaku sliku:
1. Ime fajla - image
2. Tekst linka - navLabel
3. Pozadina - background
4. Ako je potrebno, dodaj objasnjenje - description
5. Ako je potrebno, podesi ravnanje slike - imageAlign
6. Ako je potrebno, kaži da je slajd prvi u novoj sekciji - sectionBreakBefore

Opšta podešavanja

Slide

Slajdovi su uokvireni vitičastim zagradama. Iza zatvorene zagrade ide zarez, osim iza zadnjeg slajda.

      "slides": [
        {
          slide 1
        },
        {
          slide 2
        },
        {
          slide 3
        }
      ]
    

Pozadina

Pozadina moze da bude samo jedna boja, slika ili kombinacija boje i slike

      "#dcdcdc"

      "url(../images/gradient-bck.png) repeat-x 0 0"

      "#fbf7c0 url(../images/gradient-bck.png) repeat-x 0 0"
    

Najpre definiši boju (ako je ima), zatim putanju do slike i na kraju ponavljanje i poziciju.

• Putanja do slike je relativna u odnosu na css fajl, ako ne menjaš strukturu iz template.zip putanja će biti "../images/ime-slike"
• Ako sliku snimiš kao providan png i centriraš je, možeš da upotrebiš pozadinu da prikažeš kako će strana zaista da izgleda u browseru. Snimi pozadinu kao 1px široku sliku koja će da se ponavlja vodoravno. To se piše repeat-x 0 0.
• Ako je pozadina vertikalni gradijent, definiši boju pozadine kao poslednju boju gradijenta. Onda će, ako slika koju prezentuješ ima veću visinu od pozadine, gradijent pozadine da se završi i utopi u boju pozadine.
• Pozadina može da se ponavlja i vertikalno (repeat-y), po obe ose (repeat) ili da se uopšte ne ponavlja (no-repeat)

Ova ilustracija prikazuje poslednji primer. gradient-bck.png je 1 x 100 px vertikalni gradijent od crne do zelene, a boja pozadine je žuta.

Primeri

Svi primeri se oslanjaju na ovakvu strukturu direktorijuma (upravo ono što ćeš dobiti kad raspakuješ template.zip):

      images/
        drupal-websites-v1.png
        gradient-bck-tmp.png
        Home Page 3.png

      index.html

      javascripts/
        app.js
        data.json
        jquery-1.9.0.min.js

      stylesheets/
        style.css
    

Minimalno podešavanje

Neophodni minimum je jedan slide koji ima definisanu sliku:

      callback({
        "slides": [
          {
            "image": "images/slika.png",
          }
        ]
      });
    

Navigacija zalepljena za vrh strane

      callback({
        "anchor":    "top",
        "offset":  "0",

        "slides": [
          {
            "image": "images/slika.png",
          }
        ]
      });
    

Navigacija zalepljena za dno strane

      callback({
        "anchor":    "bottom",
        "offset":    "0",

        "slides": [
          {
            "image": "images/slika.png",
          }
        ]
      });
    

Detaljnije podešavanje

Malo duži primer sa 3 slajda - poslednja dva su grupisana:

      callback({

        "title":  "Design Presentation",
        "date":   "03/31/2013",
        "color":  "#462",
        "offset": "700px",

        "slides": [
          {
            "navLabel":           "Drupal 1",
            "description":        "Drupal Websites v1",
            "image":              "images/drupal-websites-v1.png",
            "background":         "#eee"
          },
          {
            "sectionBreakBefore": "true",
            "navLabel":           "Home 3",
            "description":        "Home Page v1",
            "image":              "images/Home Page 3.png",
            "background":         "#dcdcdc url(../images/gradient-bck-tmp.png) repeat-x 0 0"
          },
          {
            "navLabel":           "Ogilvy 1",
            "description":        "Ogilvy PR Case Study",
            "image":              "images/Ogilvy PR Case Study.png",
            "background":         "#dcdcdc url(../images/gradient-bck-tmp.png) repeat-x 0 0"
          }
        ]

      });
    

Planovi

Kad je offset 0 treba dodati padding i staviti sve elemente u jednu liniju.

Svaki slide je bookmarkable, ali back i forward dugmici u browseru ne rade.