Comunicare în medii electronicebusaco/teach/courses/... · spațiul vertical dintre 2 linii de text uzual, titlurile (headings) nu necesită leading fonturilemasive vor avea nevoie

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Comunicare în medii electronice

Dr. Sabin‐Corneliu Buraga

here://iCome


Proiectarea siturilor Webcontinuare

here://iCome


The ability to simplify meansto eliminate the unnecessary so that

the necessary may speak.Hans Hofmann

here://iCome


Întrebare

Cum vom proiecta conținutul paginilor Web?

here://iCome


Întrebare

Care sunt aspectele de interes privind textul?

here://iCome


Typography

Componentă vitală a procesului de comunicare

Nu înseamnă “picking a cool font”!

Typos (impresie) + grapheia (scriere)

here://iCome


Typography

Corpul de literă – typeface, fontmulțime unitară de glyphs(semne, simboluri grafice)

asociate unui set de caractere

Font: Caracter→ Semn

here://iCome


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


Typography

1: baselinelinia imaginară pe care se redau caracterele

here://iCome


Typography

2: cap heightmarchează înălțimea tuturor majusculelor

here://iCome


Typography

3: crossbarbara care conectează cele doua linii ale “A” sau “H”

here://iCome


Typography

4: serifdetaliu adăugat unor glyphs

here://iCome


Typography

5: meanlinemarginea superioară a minusculelor

here://iCome


Typography

6: bowlcurbatura asociată unor glyphs – e.g., “D”, “g”

here://iCome


Typography

7: descenderporțiunea inferioară a minusculelor “g”, “j”, “p”, “q”, “y”

here://iCome


Typography

8: counterspațiul negativ din cadrul unui glyph

here://iCome


Typography

9: stembara principală verticală/diagonală a unei litere

here://iCome


Typography

10: tittledefineşte simbolul figurat deasupra unor glyphs

(e.g., unele diacritice: accente/marcaje – é, ö, ň,…)

here://iCome


Typography

11: terminalterminația unei bare/linii

here://iCome


Typography

12: ascenderporțiunea superioară a unor minuscule – e.g., “b”, “f”, “t”

here://iCome


Typography

13: legterminația inferioară a unor litere – e.g., “K”, “R”, “Q”

here://iCome


Typography

14: ligaturedesemnează combinația a două glyphs alăturate

îmbunătățeşte aspectul estetic

here://iCome


Typography

15: x‐heightînălțimea literei mici “x”

here://iCome


Typography

Corpul de literă

proporțiaindică variația de lățime a setului de glyphs

proporționat vs.monospațiat (monospace)

here://iCome


Typography

here://iCome


Typography

Corpul de literă

efecte speciale:îngroşare (bold), înclinare (italics), subliniere (underline)

culori, umbriri, rotiri, perspective etc.

here://iCome


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


Typography

here://iCome


Typography

Corpul de literă

fonturi “sigure” pentruWebdisponibile pe orice sistem

here://iCome


Typography

here://iCome


Typography

Formate electronice de fonturiBitmap/raster – fiecare glyph este reprezentatprintr‐o matrice de puncte (pixeli) pentru fiecare dimensiuneExemple: fonturile pentru consola Linux

here://iCome


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


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


Typography

here://iCome


Typography

Măsuraindică lungimea unei linii de text

element‐cheie al uşurinței parcurgerii conținutului

here://iCome


Typography

here://iCome


Typography

Măsura

valori recomandate: 45‐75 caractere (30‐50 em)

dificil de stabilit pentru layout‐uri lichide

here://iCome


Typography

here://iCome


Typography

Kerningprocesul de ajustare a spațiului

dintre 2 glyphs alăturate

actualmente, nu există suport oferit la nivel de Web

here://iCome


Typography

here://iCome


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


Typography

here://iCome


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


Typography

Ritmul verticalstabilit prin realizarea unui grid invizibil de linii

orizontale pe baza înălțimii fontului de bază utilizat

here://iCome


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


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


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


Typography

Lizibilitateatehnici de anti‐aliasing

minimizarea distorsiunilor (aliasing) vizuale

fonturile cu serifeajută la mutarea privirii de‐a lungul liniilor de text

here://iCome


Typography

here://iCome


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


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


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


Întrebare

Care sunt aspectele de interes privind grafica?

here://iCome


Textura

Oferă o înfățişare distinctă a suprafețelor

Se bazează pe puncte, linii, forme (shapes)

here://iCome


Textura

Punctul (dot, point)element fundamental al designului grafic

prin grupare, poate sugera imagini(linii, forme, volume) – tehnica halftone

here://iCome


Textura

here://iCome


Textura

Linia (line)

proprietăți importante:direcție, grosime, curbură

here://iCome


Textura

Linia (line)

liniile diagonale – e.g., haşurile – sugerează mişcarea (vivacitatea)

liniile curbe sunt deosebit de expresive

here://iCome


Textura

Linia (line)

here://iCome


Textura

Forma (shape)creată pe baza liniilor

categorii: geometrice sau libere/organice (freeform)

here://iCome


Textura

Forma (shape)

formele geometrice perfecte inducun mesaj tehnic/mecanic

formele libere sunt mai abstracte,sugerând informalitate, spontaneitate, umanism

here://iCome


Textura

Forma (shape)

here://iCome


Textura

Volumula treia dimensiune spațială a conținutului

indică profunzimea (depth)

here://iCome


Textura

Volumul

perspectivaalegerea unui punct de fugă (vanishing point)

proporția

lumina & umbra

here://iCome


Textura

here://iCome


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


Textura

Tipuri:Trompe l’oeil (“înşeală ochiul”)

creşte gradul de realism

Decorativese folosesc modele (patterns)

here://iCome


Textura

here://iCome


Grafica

Alegerea conținutului grafic

relevant, interesant, atrăgător

here://iCome


Grafica

Utilizarea ilustrațiilor & fotografiilor

ilustrații de calitateminimizarea timpului de încărcare

asigurarea accesibilității (descrieri alternative textuale)

here://iCome


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



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



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



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



here://iCome



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



here://iCome



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



here://iCome



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



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



here://iCome



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



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



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


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


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


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


Rezumat

Proiectarea conținutului paginilor Web

De la tipografie la textură& graficăAspecte privind conținutul multimedia

here://iCome


Întrebări?

Documents

Comunicare în medii electronicebusaco/teach/courses/... · spațiul vertical dintre 2 linii de text uzual, titlurile (headings) nu necesită leading fonturilemasive vor avea nevoie