Canic Interactive - Prezentacija dizajna

Najpre

Pogledaj demo - preuzmi template (sa komentarima: demo-latest / editor / template-latest.zip)

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.
  Poruka "UNEXPECTED STRING" verovatno znači da si ispustio neki zarez.

Kako se pravi prezentacija

1. Isprazni direktorijum images i stavi sve svoje slike u njega.
2. Otvori fajl javascripts/data.json u tekst editoru (npr. notepad).
3. Podesi opšta podešavanja:
1. Ime sajta - title
2. Datum (ovde možeš da dodaš i 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 svaki slide:
1. Putanja i ime fajla - image
2. Tekst linka - navLabel
3. Pozadina - background
4. Ako je potrebno, dodaj objašnjenje - description
5. Ako grupišeš slajdove, kaži da je slajd prvi u novoj grupi - sectionBreakBefore
6. Dodaj komentare (ova funkcionalnost jos uvek nije stabilna, ako želiš da je koristiš moraš da skineš template-latest.zip):
1. Završi sve prethodne korake i otvori stranu editor.html
2. Komentari se dodaju za svaku sliku posebno. Odaberi u navigaciji stranu koju želiš.
3. Klikni Add Note.
4. Odvuci ikonicu koja se pojavila u gornjem desnom uglu na pravu poziciju.
5. Popuni formu: ID je tekst koji ce pisati na samoj ikonici, Title, Text.
6. Polja x i y ne možeš da menjaš, tu su samo za referencu.
7. Kad imaš više komentara i dalje možeš sve da ih menjaš i pomeraš, ali svaki put kad promeniš nešto u formi obavezno klikni Save.
8. Kada završiš sa dodavanjem komentara, klikni dugme Show Code.
9. Selektuj kod, kopiraj ga i nalepi u data.json
10. Nazad na strani editor.html - odaberi sledeću stranu i dodaj komentare.

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
        }
      ]
    

Komentari

Kao i slides, komentari su odvojeni zarezima a poslednji nema zarez iza sebe.
Kad dodaješ generisane komentare obrati pažnju da dodaš zarez pre samih "notes" (u ovom primeru to je zarez na kraju linije "image": "images/slika.png",)

      callback({
        "slides": [
          {
            "image": "images/slika.png",
            "notes": [
              {
                "id":    "A",
                "x":     "50px",
                "y":     "120px",
                "title": "Comment title",
                "text":  "Lorem ipsum dolor."
              },
              {
                "id":    "B",
                "x":     "350px",
                "y":     "420px",
                "title": "Another comment",
                "text":  "Sit amet consectetur."
              }
            ]
          }
        ]
      });
    

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.