![[Hungarian] CSS Course - Sapientia University](https://cdn.slidesharecdn.com/ss_thumbnails/css-iszlaizoltan-sysgenic-151227143127-thumbnail.jpg?width=560&fit=bounds)
![[Hungarian] HTML Course - Sapientia University](https://cdn.slidesharecdn.com/ss_thumbnails/html-iszlaizoltan-sysgenic-151227143536-thumbnail.jpg?width=560&fit=bounds)
Blog és magazin design
- 2. Sikerének okai • Laza műfaj, sok mindent elbír, posztolni bármiről lehet • Nincsenek technikai korlátai, hogy valaki elkezdje • Aggregáló oldalak (RSS), beszivárgott az internetes újságírásba
- 3. Mit nevezünk blognak? A blog egy olyan, periodikusan újabb bejegyzésekkel bővülő weboldal, amely ezek sorozatából áll, függetlenül attól, hogy mi az oldal témája, formája és hogy nyilvánosan elérhető-e. - Wikipedia
- 4. A blogolás hajnala Csak 4 slide
- 5. Jorn Barger Peter Merholz 1997. december 17. 1999. május weblog blog
- 6. 1999. augusztus: megalakul a Blogger
- 7. 2001. szeptember 11: megmutatkozik a civil blogszféra ereje
- 8. 2003. az Oxford English Dictionary beemeli a weblog kifejezést a szócikkei közé.
- 9. Innentől kezdve a blog is komolyan vett műfaj lett és nem csak múló hóbort.
- 10. Egy kis Csak úgy kezdjünk tervezni, hogy ismerjük anatómia a blog struktúráját és tartalmi egységeit.
- 11. <strong>Jó, ha értjük a HTML/CSS-t.</strong>
- 12. Fejléc Tartalmi hasáb Oldalhasáb Lábléc ...ahogy a site-ok 90%-a
- 13. A oldalstruktúra mellett ugyanolyan fontos, hogy ismerjük az egyes oldaltípusokat is!
- 14. Címlap Posztoldal Listaoldal Statikus oldal
- 15. Címlap
- 16. Címlap: • A bejegyzés címe • Időpontja • Szerzője • Bevezető (lead) • Hozzászólások száma • Címkék • RSS feed • Oldalsáv
- 17. Posztoldal: A bejegyzés önálló oldala, ahol a tartalom teljes terjedelmében olvasható. • Állandó URL-e (permalinkje van) • Ajánló a további tartalmakra • Social funkciók (like, share) • Kommentek (olvasás, írás)
- 18. Listaoldal: A blogmotor generálja, lehet egy kereső találati oldala, de egy címke, kategória oldala is.
- 19. Az olvasó figyelmének megoszlása Forrás: http://www.useit.com/
- 20. Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold. - Jakob Nielsen
- 22. A fentiekből következik: • 600px áll a rendelkezésünkre, hogy megragadjuk az olvasók figyelmét • Nem lehet túl vastag a fejléc, a hajtás felett tartalmat is kell mutatnunk • Itt helyezzük el a fő navigációs sávot is • Jól tagolt címlapra van szükség
- 23. A Smashing Magazine kutatása szerint: • A layout jellemzően középre igazított (94%) • Fix szélességű blogok (92%) • A szélesség 951 és 1000px között van (56%) • CSS-layout a table ellenében (90%) • Világos háttéren sötét szöveg (98%) • 80 és 100 karakter közötti sorhossz • Legtöbbet használt betűtípusok folyószövegre: Verdana, Lucida Grande, Georgia (90%) • Folyószöveg betűmérete 12 és 14px közötti (78%) • Címek betűtípusa jellemzően Arial vagy Georgia (52%) • Címek betűmérete jellemzően 17 és 25px közötti Forrás: http://http://www.smashingmagazine.com/ 2008/07/24/a-small-study-of-big-blogs/
- 25. Fix body { font-size: 14px; } div#wrapper { width: 960px; } • Fix, pixelben megadott méretekkel dolgozunk • Független a felbontástól • Nagyobb felbontásokon túl nagy whitespace, kisebben megjelenhet vízszintes scrollbar • A designer kezében van a kontroll
- 26. Fluid div#content_wrapper { width: 80%; } div#content_sidebar { width: 20% } • Jellemzően %-ban megadott értékekkel dolgozunk • Igazodik a felhasználó böngészőjéhez • Ha jól tervezik, kisebb felbontásokon is jól mutat, nem jelenik meg vízszintes scrollbar • A designer elveszti a kontroll egy részét a site felett
- 27. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- 28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- 29. Responsive .feature img { max-width: 100%; } .nav-primary { padding: 1.2 em; } • A pixeleket hírből sem ismeri • Igazodik a felbontáshoz, az állított és fektetett nézethez • Igazodik (PC, tablet, okostelefon) az eszközhöz a megjelenítés • Megmarad a kontroll a designer kezében
- 36. A gyakorlat
- 37. Mire tervezünk? 1; Választunk egy szimpatikus blogszolgáltatót (Blog.hu, Blogger, Freeblog...) 2; CMS-t használunk (WordPress, Joomla, Drupal) 3; Isten tudja, majd lesz valahogy! (NE!)
- 38. Teendőink mielőtt A rajzprogramhoz nyúlunk.
- 39. Kutatómunka • Mik a téma legfontosabb blogjai? • Olvassunk néhány bejegyzést (ha vannak) • Műfaji sajátosságok, kerülendő klisék • Képes és szöveges tartalmak súlya, aránya • Alapanyagok (logó, font, fotó, vektorgrafika, tagline...) • Menüpontok? • Hirdetések?
- 40. Hasábméretek
- 41. 1024x768-ba még mindig be kell férjünk* 2007 2012 Tartalmi hasáb 450px 560-640px Oldalhasáb 200-250px 200-310px *Kivéve ha a responsive design irányelvei szerint tervezünk
- 42. 3. hasáb a blog designban • Tartalmi értelemben szinte teljesen kikopott • A bejegyzésektől veszi el a helyet • Gyengíti a másik hasábot, zavart okoz az olvasóban • Keskenyebb oldalhasábokat tesz lehetővé • Erősíti, hogy haszontalan widgetekkel töltsük fel • Megmaradt hirdetési felületnek
- 45. Tervezzük meg először a bejegyzés oldalát • Minden tartalmi egység megtalálható rajta • Könnyű belőle más oldaltípust deriválni
- 47. 640px 310px
- 48. A fejléc és az oldal kerete Nincsenek kőbe vésett szabályok, de: • Jól megválasztott font és tagline már félsiker • A fejléc ne legyen magasabb 300px-nél • Gondolkodj sitebuilder aggyal
- 49. Kísérletezz szabadon! (az első változat legtöbbször úgysem működik)
- 56. A design célja, hogy vizuálisan kommunikálja a mondanivalót, a témát, a kívánt érzelmi reakciókat váltsa ki, ráhangoljuk az olvasót a tartalomra.
- 57. A bejegyzés A bejegyzés címe Dátum, szerző, címkék Tartalom Social-funkciók Kapcsolódó anyagok Hozzászólások
- 58. Tartsuk észben • Fontválasztás, websafe fontok. Alternatívák? • Talpas betű címben, talp nélküli kenyérszövegben? • Kb. 8-10 szavas sorokat kényelmes olvasni • Kenyérszöveg betűmérete 13px legyen legalább • Jól elkülöníthető blokkok kialakítására törekedjünk • Kontraszt (szöveg, linkszín...)
- 59. Tervezzünk tesztbejegyzést és legalább ezek legyenek benne: • h1, h2, h3 •p • ul, ol • blockquote • img • table •a
- 60. Hozzászólások • Látogató hsz-a (avatar, név, dátum, a szöveg) • Szerző kommentje • Reply (ikon, felirat) • Komment form • Ha regisztrálni kell a hsz-hoz, annak ki és belépett állapota • Facebook kommentelés esetén nagyon nincs dolgunk... • Lapozó
- 62. Oldalhasáb Jellemzően a jobb oldalon találjuk, a blog egészével kapcsolatos infók szerepelnek rajta. Minden oldalon látható.
- 63. Általában használt widgetek • Kereső • Blog rövid leírása • Legfrissebb kommentek • Legolvasottabb bejegyzések • Ajánlott oldalak • Archívum • Social-dobozok • Címkefelhő • Feed • Hirdetés
- 64. Hogy épüljenek fel? • Kereső • Blog rövid leírása, kontakt • Social dobozok • Kategóriák, _fontos_ tagek • Legolvasottabb bejegyzések • Legutóbbi hozzászólások
- 67. A rossz címkézés iskolapéldája
- 68. Lábléc Lépjünk túl a nézeten, hogy a lábléc csak azért kell, hogy valami legyen az oldal alján. • Az olvasó figyelme csökken, ahogy az oldal aljára ér • A háttérinformációkat (kontakt, rólunk...) itt keresi • Nem az elsődleges navigációs felület • A lábléc hozzásegíthet minket az olvasó figyelmének fenntartásához (portfolió, legolvasottabb posztok, legfrissebb kommentek, twitter, illusztráció... )
- 72. Hogy lesz blog a psd-ből? 1. Regisztrálunk egy blogszolgáltatóhoz, vagy telepítünk CMS-t (egyik sem több 5 percnél). 2. Keresünk egy szimpatikus sablont, ami illeszkedik a tervezett designhoz. 3. Írunk teszt posztot, egy barátunkat megkérjük, hogy kommenteljen párat. 4.Beállítunk néhány widgetet, teszünk bele tartalmat. 5. A sablonszerkesztővel és egy inspectorral (pl. Firebug) felszerelkezve elkezdjük testreszabni a sablont. (a sorrend többnyire felcserélhető)
- 75. Előnyei: • Gyorsan telepíthető • Minden a te kezedben van • Végletekig testreszabható • Remek adminfelület • Ingyenes sablonok tömege • Rengeteg widget • Közösség, dokumentáció
- 76. Blogszolgáltatók: • Nem kell törődnöd szerver beállításokkal, tárhellyel • Beépített statisztikai modul • Beépített social funkciók • Blog.hu esetében legendásan jó support és Index címlapra kerülési lehetőség
- 78. Magazin
- 79. Definíció Olyan szerkesztett kiadvány, ahol nem a gyors hírfeldolgozás, up-to-date információk szolgáltatása az elsődleges. Hosszabb, mélyebben körüljárt, a napi aktualitásokhoz nem feltétlenül kapcsolódó tartalmakat olvashatunk rajta. Blog Magazin Hírportál
- 81. Minimál fejléc kategóriákkal, kiemelve, hogy hol vagyunk éppen
- 82. Vezető + 4 kiemelt cikk
- 88. Következő előadás: a hírportál A tartalomszolgáltatás nehézsúlyú versenyzője