comunicare în medii electronicebusaco/teach/courses/... · spațiul vertical dintre 2 linii de...
TRANSCRIPT
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Comunicare în medii electronice
Dr. Sabin‐Corneliu Buraga
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Proiectarea siturilor Webcontinuare
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
The ability to simplify meansto eliminate the unnecessary so that
the necessary may speak.Hans Hofmann
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebare
Cum vom proiecta conținutul paginilor Web?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebare
Care sunt aspectele de interes privind textul?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Componentă vitală a procesului de comunicare
Nu înseamnă “picking a cool font”!
Typos (impresie) + grapheia (scriere)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă – typeface, fontmulțime unitară de glyphs(semne, simboluri grafice)
asociate unui set de caractere
Font: Caracter→ Semn
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă
dimensiunemăsurată în puncte tipografice ori picas
scala: 6 8 9 10 11 12 14 16 18 21 24 36 48 60 72
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
1: baselinelinia imaginară pe care se redau caracterele
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
2: cap heightmarchează înălțimea tuturor majusculelor
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
3: crossbarbara care conectează cele doua linii ale “A” sau “H”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
4: serifdetaliu adăugat unor glyphs
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
5: meanlinemarginea superioară a minusculelor
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
6: bowlcurbatura asociată unor glyphs – e.g., “D”, “g”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
7: descenderporțiunea inferioară a minusculelor “g”, “j”, “p”, “q”, “y”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
8: counterspațiul negativ din cadrul unui glyph
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
9: stembara principală verticală/diagonală a unei litere
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
10: tittledefineşte simbolul figurat deasupra unor glyphs
(e.g., unele diacritice: accente/marcaje – é, ö, ň,…)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
11: terminalterminația unei bare/linii
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
12: ascenderporțiunea superioară a unor minuscule – e.g., “b”, “f”, “t”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
13: legterminația inferioară a unor litere – e.g., “K”, “R”, “Q”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
14: ligaturedesemnează combinația a două glyphs alăturate
îmbunătățeşte aspectul estetic
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
15: x‐heightînălțimea literei mici “x”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă
proporțiaindică variația de lățime a setului de glyphs
proporționat vs.monospațiat (monospace)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă
efecte speciale:îngroşare (bold), înclinare (italics), subliniere (underline)
culori, umbriri, rotiri, perspective etc.
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă
familia de fontclasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph‐urilor)
include fontul de bază + variants (italic, bold, bold italic)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Corpul de literă
fonturi “sigure” pentruWebdisponibile pe orice sistem
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Formate electronice de fonturiBitmap/raster – fiecare glyph este reprezentatprintr‐o matrice de puncte (pixeli) pentru fiecare dimensiuneExemple: fonturile pentru consola Linux
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Formate electronice de fonturiVectoriale – fiecare glyph e generat prin calcularea unui set de vectori (linii, curbe Bézier,…)Formate: PostScript, TrueType, OpenType
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
“Culoarea” tipograficăindică densitatea texturii conținutului unei pagini
“It refers only to the darkness or blacknessof the letterform in mass.”
Robert Bringhurst, The Elements of Typographic Style
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Măsuraindică lungimea unei linii de text
element‐cheie al uşurinței parcurgerii conținutului
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Măsura
valori recomandate: 45‐75 caractere (30‐50 em)
dificil de stabilit pentru layout‐uri lichide
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Kerningprocesul de ajustare a spațiului
dintre 2 glyphs alăturate
actualmente, nu există suport oferit la nivel de Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Leading (sau line‐spacing)spațiul vertical dintre 2 linii de text
uzual, titlurile (headings) nu necesită leadingfonturile masive vor avea nevoie de leadingmai mare
fonturile sans‐serif necesită mai mult leading decât cele seriflățimea mai mare a liniei conduce la creşterea leading‐ului
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Ritmul vertical“...the total amount of vertical space consumed by
each departure from the main text should bean even multiple of the base leading.”
Robert Bringhurst, The Elements of Typographic Style
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Ritmul verticalstabilit prin realizarea unui grid invizibil de linii
orizontale pe baza înălțimii fontului de bază utilizat
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Linia albă (white line)spațiul vertical liber dintre 2 paragrafe adiacente
tipografia tradițională în loc de linii albe foloseşte tehnica aliniatului paragrafelor (indentation)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Indicarea unui paragraf nouTehnici: aliniat, linia albă, letrina, ornamente,…
de folosit în mod unitar un singur mijloc
primul paragraf nu are aliniat
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Liniuța de unire orizontală (dash)‐ hyphen Sabin‐Corneliu Buraga– en dash 14:00–16:00
Separație de fraze – cu spații.— em dash Separație de fraze—fără spații.− minus Scădere (20−5=15)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Lizibilitateatehnici de anti‐aliasing
minimizarea distorsiunilor (aliasing) vizuale
fonturile cu serifeajută la mutarea privirii de‐a lungul liniilor de text
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Utilizarea peWeb a fonturilor nestandardfolosirea de valori negative pentru text‐indent
textul va fi substituit de o imagine
<h1>textul va fi substituit</h1>h1 { text‐indent: ‐7000px; background: url(imagine.png);
width: 200px; height: 80px; /* dimens. imaginii */ }
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography
Utilizarea peWeb a fonturilor nestandardgenerarea de imagini care să substituite textul
la nivel de server
utilizarea de biblioteci – ImageMagick, GD,…tehnica sIFR (Scalable Inman Flash Replacement)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Typography: Aplicații software
Programe de editare & management de fonturi
Sisteme de tip DTP – DeskTop Publishingaliniate paradigmei WYSIWYG (What You See Is What You Get)
Sisteme de marcare (typesetting)utilizează un set de marcaje: TeX, LaTeX, XML,…
Aplicații pentru tipografie digitală (digital typography)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebare
Care sunt aspectele de interes privind grafica?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Oferă o înfățişare distinctă a suprafețelor
Se bazează pe puncte, linii, forme (shapes)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Punctul (dot, point)element fundamental al designului grafic
prin grupare, poate sugera imagini(linii, forme, volume) – tehnica halftone
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Linia (line)
proprietăți importante:direcție, grosime, curbură
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Linia (line)
liniile diagonale – e.g., haşurile – sugerează mişcarea (vivacitatea)
liniile curbe sunt deosebit de expresive
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Linia (line)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Forma (shape)creată pe baza liniilor
categorii: geometrice sau libere/organice (freeform)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Forma (shape)
formele geometrice perfecte inducun mesaj tehnic/mecanic
formele libere sunt mai abstracte,sugerând informalitate, spontaneitate, umanism
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Forma (shape)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Volumula treia dimensiune spațială a conținutului
indică profunzimea (depth)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Volumul
perspectivaalegerea unui punct de fugă (vanishing point)
proporția
lumina & umbra
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Caracterizată de ton (valoare), pattern& culoare
Creată şi de materiale, lumină, reflexie, distanță
Texturile complicate nu se utilizeazăpentru fundalurile paginilor Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
Tipuri:Trompe l’oeil (“înşeală ochiul”)
creşte gradul de realism
Decorativese folosesc modele (patterns)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Textura
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica
Alegerea conținutului grafic
relevant, interesant, atrăgător
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica
Utilizarea ilustrațiilor & fotografiilor
ilustrații de calitateminimizarea timpului de încărcare
asigurarea accesibilității (descrieri alternative textuale)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
PixelModel cromatic: RGB, CYMK,…
Rezoluție: W &H, dpi (dots per inch)Adâncime de culoare: 8 biți, 64K, TrueColor
Compresie: cu/fără pierderiSistem de coordonate
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Reprezentare bitmap (raster)imagini reprezentate prin matrice de pixeli
culoarea unui pixel va fi stocată pe un număr fix de biți (adâncimea de culoare)
contrast, luminozitate, efecte: blur, sharpen, desaturate,…
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Reprezentare vectorialăimagini compuse din primitive grafice
(plot, line, polyline, polygon, arc, ellipse, box,…)
rotire, oglindire (flip), scalare, colorare,umplere (cu o culoare/pattern) etc.
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
IndexareCLUT (Color Look‐Up Table) pentru maxim 256 culori
pixelii nu sunt reprezentați prin valoarea culorii,ci prin valoarea indexului tabelei CLUT
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Ditheringproces de “scalare” cromatică a unei imagini
conținând un număr mare de culorila un număr mai mic de culori (e.g., 256)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebGIF (Graphics Interchange Format)
indexat, maxim 256 culori
permite realizarea de animații simple
oferă transparență(o culoare din CLUT este considerată transparentă)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebJPEG (Joint Picture Experts Group)
compresie cu pierderi a imaginilor cu tonuri continueadâncime de culoare 24 biți/pixel – TrueColor
încărcare progresivă (detaliile imaginii se îmbogățescprogresiv cu încărcarea fişierului)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebJPEG (Joint Picture Experts Group)
calitatea imaginilor JPEG vs. dimensiunea fişierelor
rate mari de compresie conduc la apariția “zgomotului”
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebPNG (Portable Network Graphics)
combină avantajele JPEG şi GIF: TrueColor, transparență (graduală), compresie fără pierderi
se acceptă şi stocarea indexată a culorilor
standard deschis al Consorțiului Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebWBMP (Wireless Bitmap)
folosit în lumea comunicațiilor fără fir
adâncime de culoare de 1‐8 biți/pixel
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Grafica electronică
Formate pentru WebSVG (Scalable Vector Graphics)permite redarea graficii vectoriale,
pe baza unor marcaje textuale
standard deschis al Consorțiului Web
<circle cx="100px" cy="100px" r="0.5cm" fill="red" />
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Multimedia
Animațiicadre (frame‐uri) de imagini care se succed
într‐un interval de timp – e.g., 25 fps (frames per second)
GIF, JavaScript, Flash, applet‐uri Java, SVG, Silverlight,...
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Multimedia
Videonecesitatea compresiei datel0r + redarea analog ↔ digital
codec (codificator‐decodificator)redat în regim de streaming sau nu
MPEG, AVI, Flash, RealVideo, QuickTime etc.
Streaming = redarea unui conținut (audio, video)pe măsura încărcării acestuia, în timp‐real
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Multimedia
Sunetconvertirea în format digital a undelor audio
sunete eşantionate – e.g., CD audio: 44100 eşantioane/sec.număr de canale (1 – mono, 2 – stereo, ≥4 – surround)
MIDI, MP3, RealAudio, QuickTime, WMA,…
nu se foloseşte ca “fundal” pentru paginile Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Rezumat
Proiectarea conținutului paginilor Web
De la tipografie la textură& graficăAspecte privind conținutul multimedia
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebări?