Comunicare în medii electronicebusaco/teach/courses/... · spațiul vertical dintre 2 linii de...

Preview:

Citation preview

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?

Recommended