Webbtypografi SU Nov 2010 - del 1

  • 420 views
Uploaded on

Some typefaces fell short in the export

Some typefaces fell short in the export

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
420
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. onsdag 19 oktober 11
  • 2. Webbtypografi och digital design Harald Peter Ström peter@konstochteknik.se Grafisk designer Konst & Teknikonsdag 19 oktober 11
  • 3. November 16 — Introduktion — Att designa för webben — Webbtypografi; historia och teknik — Frågoronsdag 19 oktober 11
  • 4. November 23 — Fördjupning i webb- typografi; webfonts etc — En massa exempel i browser (egna och andras) — Framtiden...onsdag 19 oktober 11
  • 5. Länkar och referenser: http://linkli.st/1typoonsdag 19 oktober 11
  • 6. Ställ gärna frågor!onsdag 19 oktober 11
  • 7. Bakgrundonsdag 19 oktober 11
  • 8. 1995: 16 åronsdag 19 oktober 11
  • 9. Harald.net med Martin Strömonsdag 19 oktober 11
  • 10. onsdag 19 oktober 11
  • 11. (kom.och.pussa) peter.nuonsdag 19 oktober 11
  • 12. onsdag 19 oktober 11
  • 13. pi.seonsdag 19 oktober 11
  • 14. Första egna typsnitten... ABCDEFGHIJKLM nopqrstuvwxyz The quick bron foxonsdag 19 oktober 11
  • 15. Speedway (Digital Army)onsdag 19 oktober 11
  • 16. onsdag 19 oktober 11
  • 17. onsdag 19 oktober 11
  • 18. Mattias Jakobsson Barmenoonsdag 19 oktober 11
  • 19. Abel & Baker Sthlm ↓ Abel & Baker Gbg ↓ ’Frilans’ Berlinonsdag 19 oktober 11
  • 20. onsdag 19 oktober 11
  • 21. Gerrit Rietveld Academieonsdag 19 oktober 11
  • 22. Hello De:Bug, Ich finde eure Magazin echt cool. Aber, die boxen im hintergr- und von den Texts finde ich sehr komische. Ich wurde die nicht mehr nutzen, wenn ich euch wäre. Grüsse, Peter Ström, Amsterdamonsdag 19 oktober 11
  • 23. onsdag 19 oktober 11
  • 24. Konst & Teknik –2006– Grafisk design etconsdag 19 oktober 11
  • 25. 50% web 50% printonsdag 19 oktober 11
  • 26. Printonsdag 19 oktober 11
  • 27. onsdag 19 oktober 11
  • 28. onsdag 19 oktober 11
  • 29. onsdag 19 oktober 11
  • 30. onsdag 19 oktober 11
  • 31. onsdag 19 oktober 11
  • 32. Web (K&T&M)onsdag 19 oktober 11
  • 33. onsdag 19 oktober 11
  • 34. onsdag 19 oktober 11
  • 35. onsdag 19 oktober 11
  • 36. onsdag 19 oktober 11
  • 37. Print + Webonsdag 19 oktober 11
  • 38. onsdag 19 oktober 11
  • 39. BACDE FGHIJKonsdag 19 oktober 11
  • 40. Andperseand (publishing) Show & Tell CopyPasteCharacter.com linkli.stonsdag 19 oktober 11
  • 41. onsdag 19 oktober 11
  • 42. onsdag 19 oktober 11
  • 43. onsdag 19 oktober 11
  • 44. onsdag 19 oktober 11
  • 45. Rutger Fuchsgatan 9 FREE KEVIN is an ongoing and roving screening series from a collection FREE KEVIN of 15.4 GB of downloaded lms and documentaries depicting hackers 28.11.2010 and related computer culture from the 1980s-2000s. A range of material including blockbuster lms, educational television programming, CURATED BY PIRATETURK and documentaries produced within the hacking community will be ORGANIZED BY LAUREL PTAK AND KONST & TEKNIK presented in various cities worldwide over the next year in order to HOSTED BY KONST & TEKNIK stimulate dialogue around issues of intellectual property and open culture. The title FREE KEVIN is an appropriated slogan that was originally used by the hacker community in the 1990s to protest the arrest of Kevin Mitnick, a legendary hacker who at the time was the most wanted computer criminal in United States history. Mitnick’s story is of interest (and depicted in several lms in the screening series) for its fascinating particularities concerning hacker culture, intellectual property, and media representation historically, but at the same time it also functions as a contemporary symbol. If anything, the struggle over intellectual property has only intensi ed in the last decade and FREE KEVIN can be read as the embodiment of resistance in an ongoing struggle for rights and freedoms from corporate and state control in an information age and economy. The project also serves as a re-imagining of the role of the curatorial inside network culture where information is often freely, widely and anonymously distributed. All the lms, videos, documentaries to be screened as part of FREE KEVIN were compiled and distributed via peer-to-peer torrent sharing technologies. They originate from one collection found online, assembled and distributed by an anonymous Pirate Bay user known only as “pirateturk”. This person is credited as the screening series’ curator, though they are not in any ALL FILMS ARE STREAMED TO PORTABLE COMPUTERS (LAPTOPS, way directly involved with the event. IPAD, IPHONE, ETC) — BRING YOUR OWN DEVICE AND HEADPHONES A set of publication will accompany the screening in order to AND HANG OUT IN A CORNER WITH YOUR FILM OF CHOICE! contextualize and complicate the ideas at stake concerning intellectual property and the hacker as cultural and criminal gure. A PDF of the catalogue, research notes, documentation, bibliography, and a DIY FREE KEVIN kit (to enable others to create their own screenings) will eventually be released as a torrent le on Pirate Bay and the entire project will continue to be updated at www.freekevin.info.onsdag 19 oktober 11
  • 46. Typsnitt & språkonsdag 19 oktober 11
  • 47. Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxonsdag 19 oktober 11
  • 48. Sapmi Grotesk ABCDEFGHIJKLM nopqrstuvwxyzåäö 123456790 The quick BROWN foxonsdag 19 oktober 11
  • 49. Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown foxonsdag 19 oktober 11
  • 50. SITE Specific 123 hamburgare på dig ABCDEF GHIJKLMNOPQ TEATRON Technoonsdag 19 oktober 11
  • 51. wwwwwwwwww wwwwwwwwww wwWwwwwww.seonsdag 19 oktober 11
  • 52. this-domain-name-uses- the-maximum-amount-of- characters-possible.comonsdag 19 oktober 11
  • 53. The JAnte Law 1. Do think you’re special 2. Do think you’re of the same stature as us 3. Do think you’re wiser than us 4. Do imagine yourself better than us 5. Do think you have more knowledge than us 6. Do think you’re more valuable than us 7. Do think you’re good at everything 8. Do think you’re qualified to laugh at us 9. Do think everyone cares about you 10. Do think you can teach us everything by Konst & Teknik, 2010 Die Schrift unserer Zeit Konst & Teknik 2009onsdag 19 oktober 11
  • 54. Del 1 Slutonsdag 19 oktober 11
  • 55. onsdag 19 oktober 11
  • 56. Del 2 (Typografisk) design på webbenonsdag 19 oktober 11
  • 57. Idag 1. Att designa för webben Webbsidors struktur 2. Webbtypografihistoria Typsnitt på nätet Att tänka påonsdag 19 oktober 11
  • 58. Säg till om det blir för o/teknisktonsdag 19 oktober 11
  • 59. HTML — HyperText Markup Language ’är ett märkspråk och webb- standard för strukturering av text, hypertext, media och inbyggda objekt på exempelvis webbsidor och i epostmeddelanden.’onsdag 19 oktober 11
  • 60. En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelementonsdag 19 oktober 11
  • 61. 1 3 2 4onsdag 19 oktober 11
  • 62. CSS = Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er)onsdag 19 oktober 11
  • 63. — Bild: position av CSS — Typografi: CSS — Formelement: CSS — ’Multimedia’: Ofta flash, i framtiden layout via CSS?onsdag 19 oktober 11
  • 64. <!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> </head> <body> ! <p> ! Welcome! ! </p> ! <img src=”bild.jpg”> </body> </html>onsdag 19 oktober 11
  • 65. onsdag 19 oktober 11
  • 66. <!DOCTYPE html> <html> index.html <head> ! ! <title>Sidans titel</title> ! ! <link rel="stylesheet" href="stylesheets.css"> </head> <body> ! <p> ! Welcome! ! </p> ! <img src=”bild.jpg”> </body> </html>onsdag 19 oktober 11
  • 67. stylesheets.css body { ! margin: 25px; ! background-color: green; ! color: white; ! font-family: arial, helvetica, sans-serif; ! font-size: 30px; ! letter-spacing: 30px; } body img { ! border: 3px solid black; ! width: 100px; ! -webkit-transform: rotate(-32deg); ! }onsdag 19 oktober 11
  • 68. onsdag 19 oktober 11
  • 69. Standards: CSS, HTML mmonsdag 19 oktober 11
  • 70. CSS Standards — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ‘Under develop- ment since 15.12.05’onsdag 19 oktober 11
  • 71. HTML-standards — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: in progress...onsdag 19 oktober 11
  • 72. Hur skapar man webbsidor?onsdag 19 oktober 11
  • 73. Kod Fördel: Total kontroll Nackdel: Behöver kunna programmeraonsdag 19 oktober 11
  • 74. WYSIWYG Fördel: Inte programmera Nackdelar: Dålig kod, svårt att påverkaonsdag 19 oktober 11
  • 75. onsdag 19 oktober 11
  • 76. CMS Wordpress, Indexhibit, Drupal, Episerver etc Fördelar: blir rätt, enkelt Nackdel: Utan hjälp blir det som allt annat...onsdag 19 oktober 11
  • 77. onsdag 19 oktober 11
  • 78. onsdag 19 oktober 11
  • 79. onsdag 19 oktober 11
  • 80. Flash (1996–) Program från Macromedia (nu Adobe) för att skapa ’Rich Internet Applications’ i (främst) vektorformatonsdag 19 oktober 11
  • 81. onsdag 19 oktober 11
  • 82. onsdag 19 oktober 11
  • 83. Flash, fördelar: — Ej programmera — Vektorgrafik — Multimedia — Interaktivtonsdag 19 oktober 11
  • 84. Flash, nackdelar: — Stängt/ej öppen standard — Plugin/fungerar inte överallt — På väg bort?onsdag 19 oktober 11
  • 85. Flash Framtiden?onsdag 19 oktober 11
  • 86. Shockwave Silverlight Real Audio ...onsdag 19 oktober 11
  • 87. HTML 5 — SVG — Drag and drop — Ljud — Video — (Webfonts) — med meraonsdag 19 oktober 11
  • 88. SVGonsdag 19 oktober 11
  • 89. Webbdesign: Design av system, inte ’färdiga’ sidor (för det mesta)onsdag 19 oktober 11
  • 90. T ex: Olika språk Formuläronsdag 19 oktober 11
  • 91. onsdag 19 oktober 11
  • 92. Annat att tänka på... Olika browsers Olika operativsystem Mobiltelefoner ...onsdag 19 oktober 11
  • 93. Browsers — Chrome — Internet Explorer — Firefox — Opera — Safari — ...onsdag 19 oktober 11
  • 94. Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.6 — Linux — iOS — Android — ...onsdag 19 oktober 11
  • 95. Andra faktorer (inte så aktuella längre) — Uppkopplingshastighet (bredband, 4G, 3G, 2G, brandväggar) — Skärmstorlek — Upplösning — Färgdjuponsdag 19 oktober 11
  • 96. Vilka browsers stödjer vilken CSS-version?onsdag 19 oktober 11
  • 97. Tänk på sammanhangetonsdag 19 oktober 11
  • 98. Del 2 Slutonsdag 19 oktober 11
  • 99. onsdag 19 oktober 11
  • 100. Del 3 Typografisk design för webbenonsdag 19 oktober 11
  • 101. Historiaonsdag 19 oktober 11
  • 102. HyperText: November 12, 1990onsdag 19 oktober 11
  • 103. onsdag 19 oktober 11
  • 104. onsdag 19 oktober 11
  • 105. PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman, onsdag 19 oktober 11
  • 106. Mac OS Baskerville Big Caslon Didot Futura Optima ...onsdag 19 oktober 11
  • 107. Arial 1992onsdag 19 oktober 11
  • 108. Courier New 1955 (1992)onsdag 19 oktober 11
  • 109. Times (New Roman) 1931 (1992)onsdag 19 oktober 11
  • 110. Arial Courier New Times New Romanonsdag 19 oktober 11
  • 111. Core Fonts on the Web 1996 Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, onsdag 19 oktober 11
  • 112. Core Fonts on the Web 1996 1. Bra läsbarhet på skärm 2. Blandade ’stilar’ 3. Internationelltonsdag 19 oktober 11
  • 113. ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbelonsdag 19 oktober 11
  • 114. Det har ’alltid’ gått att visa typsnitt på webben, men användaren har behövt ha typsnittet installerat i sin datoronsdag 19 oktober 11
  • 115. stylesheets.css body { ! font-family: Calibri, ‘Trebuchet MS’, Futura, Arial, Helvetica, Sans-serif; ! }onsdag 19 oktober 11
  • 116. Alternativonsdag 19 oktober 11
  • 117. Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWWonsdag 19 oktober 11
  • 118. Text som bild Nackdelar: — Ej sökbart — Svårt för t ex blinda — Tidskrävande — Dålig typografisk koll — Går inte att kopieraonsdag 19 oktober 11
  • 119. onsdag 19 oktober 11
  • 120. Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003–onsdag 19 oktober 11
  • 121. onsdag 19 oktober 11
  • 122. SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnittonsdag 19 oktober 11
  • 123. SIFR Nackdelar: — Kräver Flash — Fungerar inte på iOS etc — ’Svårjobbat/fult’onsdag 19 oktober 11
  • 124. Alternativ 3: Cufon ca 2008–onsdag 19 oktober 11
  • 125. onsdag 19 oktober 11
  • 126. Cufon Fördelar: — Typ markerbart — CSS-kopplatonsdag 19 oktober 11
  • 127. Cufon Nackdelar: — Bara typ markerbart — Inte alltid lagligt — Kräver Javascript — Börjar avvecklas...onsdag 19 oktober 11
  • 128. Alternativ 4: Webfonts 2009/2010 Mer om det nästa veckaonsdag 19 oktober 11
  • 129. onsdag 19 oktober 11
  • 130. Del 3 Slutonsdag 19 oktober 11
  • 131. Del 4onsdag 19 oktober 11
  • 132. ’Vad kommer hända med yrket webbdesigner när så mycket nytt görs med exempelvis Wordpress- templates? Kommer webbdesignern göra någonting från scratch längre?’onsdag 19 oktober 11
  • 133. 37 Signalsonsdag 19 oktober 11
  • 134. Behöver man som webbdesigner kunna programmera?onsdag 19 oktober 11
  • 135. nJaonsdag 19 oktober 11
  • 136. Nobileonsdag 19 oktober 11
  • 137. onsdag 19 oktober 11
  • 138. onsdag 19 oktober 11
  • 139. typography.css .courier { ! ! font-family: courier new, courier; ! ! letter-spacing: 0px; ! ! line-height: 18px; ! ! font-size: 14px; ! ! text-align: left; ! ! text-indent: 0em; ! ! margin: 0; ! ! text-align: left; ! ! }onsdag 19 oktober 11
  • 140. onsdag 19 oktober 11
  • 141. Omvänd processonsdag 19 oktober 11
  • 142. onsdag 19 oktober 11
  • 143. www.linkli.st/1typo haraldpeterstrom.com www.konst-teknik.seonsdag 19 oktober 11
  • 144. onsdag 19 oktober 11