Tehnici Web

Nu esti logat.

Laboratorul 2

(Deadline: 10.12.2017 23:59:59)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Daca nu sunteti logati exercitiile nu se afiseaza.



CSS (Cascading Style Sheets) - Introducere

Layout engines - cine realizeaza afisarea?

Se mai gasesc si sub de numirea de Web browser engine sau "motoare de randare". Acestea sunt componenete software care au rolul de a realiza afisarea continutului unei pagini scrise intr-un limbaj de markup si avand asociat informatii de stilizare. Mai multe browsere pot folosi acelasi layout engine. Aveti aici lista tuturor browserelor si printre altele si afisarea lor grupata dupa layout engine-ul folosit.
Cele mai cunoscute si folosite layout engine-uri sunt Gecko (Mozilla Firefox), KHTML, Presto (Opera), Trident (Internet Explorer) si WebKit (Safari, Google Chrome).
O comparatie a layout engine-urilor gasiti la http://en.wikipedia.org/wiki/Comparison_of_layout_engines

Tagul <style></style>

Aici se definesc regulile de stil CSS. Ele sunt de forma urmatoare:

Tagul style are atibutul type, ccare primeste ca valoare un tip MIME, cu valoarea "text/css". In cele mai multe browsere, valoarea default a atributului type este chiar aceasta insa e bine sa nu va bazati pe acest lucru si sa o setati de fiecare data pentru a nu avea probleme. Regulile de CSS definite in style sunt valabile numai in cadrul paginii curente.

Selectori

http://www.w3schools.com/cssref/css_selectors.asp

Prioritate selectori

http://www.w3.org/TR/CSS2/cascade.html#specificity
http://www.htmldog.com/guides/cssadvanced/specificity/

Comentariile in CSS: /* ... */

Denumirea proprietatilor

Proprietatile in CSS pot avea denumiri astfel:

Atributul class

Este un atribut general (poate fi continut de majoritatea elementelor HTML). Este folosit pentru indicarea clasei CSS din care face parte elementul.

<p class="nume_clasa"> text </p>

Uneori dorim sa alocam mai mult de o clasa unui element.
<p class="nume_clasa1 nume_clasa2 ... nume_clasa_n"> text </p>

Atributul style

Este un atribut general (poate fi continut de majoritatea elementelor HTML). Este folosit pentru indicarea unui stil local pentru un element anume. Continutul sau va fi in format CSS, si ca si in blocul de reguli, daca avem mai multe reguli pe care vrem sa le aplicam le separam cu ";".

<p style="color:blue;font-size:10px"> text </p>

Tagurile <div></div> si <span></span>

Tagul span se foloseste de obicei pentru a aplica stil in cadrul(interiorul textului) unui element. Tagul span este inline si nu ar trebui sa cuprinda elemente de tip bloc.

Tagul div se foloseste pentru gruparea mai multor elemente si aplicarea unui stil comun. Este un tag bloc. Atentie, el nu are continut semantic ci defineste doar o diviziune de pagina, pentru gruparea unor elemente cu continut semantic, conform specificatiilor HTML5 se va folosi un element de sectionare (section, article, etc.)

Text... <span class="nume_clasa"> text si elemente inline </span> ... iarasi text
<div class="nume_clasa">
<blocquote>text</blockquote>
text
<p>text</p>
[...diverse alte elemente bloc sau inline...]
</div>
Care e diferenta dintre tagurile span si div? http://en.wikipedia.org/wiki/Span_and_div

Definire stil extern

Este bine ca stilul pentu un site sa se defineasca extern deoarece fisierul css poate fi utilizat in acest fel pe mai multe pagini.

<link rel="stylesheet" type="text/css" href="stil.css"/>

Pozitionare

Exemple pentru pozitionari:

Z-index

Z-index-ul este practic coordonata pe axa Oz, care are directie perpendiculara pe ecran si e orientata cu sensul pozitiv spre utilizator. Astfel, cand avem doua obiecte care se suprapun, cel cu z-indexul mai mare va fi considerat mai in fata si va aparea deasupra celuilalt. Proprietatea z-index este ignorata cand este aplicata elementelor statice. In cazul in care avem un element container cu z-index precizat, care contine un element-fiu, elementul fiu nu va putea fi pozitionat sub elementul container (oricat de mic i-am pune z-indexul). Daca elementul container nu are z-indexul precizat(sau nu e luat in considerare din cauza ca avem containerul pozitionat static), atunci elementul poate fi pozitionat dedesubtul acestuia (de exemplu cand avem o imagine intr-un paragraf, si ii punem postion:relative si o plasam deasupra unei portiuni de text, daca ii punem z-index:-1 va aparea sub textul paragrafului container).

Pentru a intelege mai bine tipurile de pozitionari si z-index-ul, intrati pe pagina: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

Elemente inline si elemente de tip bloc

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Box model

http://www.w3schools.com/css/css_boxmodel.asp
http://reference.sitepoint.com/css/boxmodel

Proprietatea Margin

Se refera la spatiul care trebuie lasat la afisare intre granita elementului cu aceasta poprietate si granitele elementelor vecine (elemente-surori sau chiar elementul parinte).

Daca nu avem pozitionare absoluta sau fixa, sunt cazuri in care marginile se suprapun.

Pe verticala marginile pentru doua elemente se pot suprapune (daca nu s-a specificat un border sau padding pentru niciunul dintre elemente) asa cum puteti observa in acest exemplu cu div container si div fiu. Puteti observa ca marginile nu se mai suprapun daca se adauga border decomentatnd proprietatea border din exemplu. Pe orizontala se observa ca marginile nu se mai suprapun.

De asemenea marginile se suprapun pe verticala pentru doua elemente consecutive asa cum se poate observa in exemplul cu doua divuri consecutive aflate unul sub celalalt. Totusi nu se suprapun si pe orizontala asa cum se vede in acest exemplu cu doua elemente div consecutive aduse unul langa altul prin float:left

Tranzitii

Tranzitiile se pot aplica numai in cazul in care avem un element care are doua stari posibile (cea generala, statica, si cea determinata de aparitia unui eveniment din cadrul celor simbolizate de pseudoclase(de exemplu :hover).

http://www.css3.info/preview/css3-transitions/
Exemplu tranzitie

At-rules

http://www.htmldog.com/guides/cssadvanced/atrules/

Animatii, regula @keyframes

In CSS3 se pot realiza animatii cu ajutorul regulii @keyframes. La scrierii acestei pagini, animatiile functioneaza in firefox, chrome, opera, safari, dar nu si in Internet Explorer (probabil vor functiona intr-o versiune ulterioara). Forma generala pentru definirea unei animatii este:

@keyframes denumirea_animatiei
{
selector_temporal_1
{
prop_1:val1_1;
...
prop_n:valn_1;
}
... selector_temporal_n
{
prop_1:val1_n;
...
prop_n:valn_n;
}
}

Un selector temporal poate fi de forma: nr%, from(echivalent cu 0%) sau to(echivalent cu 100%). Acesta indica momentul din animatie cand elementele trebuie sa aiba proprietatile din setul de reguli corespunzatoare selectorului temporal. Animatia practic se realizeaza prin modificarea graduala a valorilor proprietatilor. Daca avem doua momente consecutive specificate in @keyframes, in cadrul carora avem proprietatea p:val1, respectiv p:val2(in al doilea moment de timp). Trecerea de la o valoare la alta a proprietatii se va face prin valorile intemediare dintre val1 si val2. Prin urmare nu orice proprietate CSS poate fi animata (lucru valabil si pentru tranzitii) ci numai cele care permit existenta acestor valori intermediare (in principiu, proprietati cu valori exprimate numeric). De exemplu de la text-decoration:overline nu prea avem cum trece gradual la text-decoration:underline, pe cand de la width:30px la width:70px, se poate (prin valori intermediare egal distantate in intervalul [30,70]).
O lista cu proprietatile care pot fi animate in CSS3 gasiti la http://oli.jp/2010/css-animatable-properties/.

Implicit, animatiile daca au un numar finit de iteratii, dupa ce se executa complet, elementul revine la starea statica indicata si deci nu ramane la ultimul frame al animatiei. Daca vrem sa ramana in starea indicata de ultimul frame (regulile de stil de la to sau 100%) folosim: -prefix-animation-fill-mode:forwards; unde prefixul este cel specific layout engine-ului folosit.

Regula @font-face

Cu ajutorul regulii @font-face puteti sa folositi si alte fonturi decat cele web safe, dar va trebui bineinteles sa faceti legatura cu fisierul de fonturi. Trebuie oferit fontul in mai multe formate pentru a asigura compatibilitatea.

Cum ne cream un font

De exemplu puteti folosi: http://fontstruct.com/. E un tool free, online, necesita insa inregistrare pe site. Dupa ce v-ati facut cont mergeti la opiunea FontStructor din meniu si acolo aveti editorul, apoi desenati fiecare litera si salvati din cand in cand (se salveaza la ei pe server). Dupa ce ati terminat, downloadati. Se va downloada un zip cu un licence, un readme si fontul efectiv in format ttf. Iata un exemplu scris cu fontul miau_font (da, stiu ca e urat dar l-am facut in graba). Div-ul care il cuprinde este contentediatble deci puteti scrie mai multe litere ca sa il testati. Nu are definite semnele de punctuatie, doar literele si cifrele. Observati ce se intampla pentru caracterele nedefinite.

Salut, acesta e un text scris cu un font custom.

(Nota: pe browserele mai vechi, care nu suporta CSS3 va aparea scris cu fontul default; sau daca s-ar fi specificat un alt font, web-safe, ca a doua optiune, ar fi aparut scris cu acel font).

Cand creati fontul acesta se va salva doar in format ttf, insa cum spuneam trebuie mai multe formate pentru compatibilitate. Acest lucru il puteti realiza cu ajutorul site-ului: http://www.font2web.com/. Veti incarca acolo fisierul ttf, si apoi veti downloada arhiva oferita. Aceasta contine fontul in formatele: eot, otf, svg, ttf, woff. De asemenea cuprinde si un fisier css generat automat, cu fontul vostru definit prin @font-face, si un fisier demo cu fontul respectiv.

Fisierul CSS, generat automat:
/** Generated by FG **/
@font-face {
font-family: 'Conv_miau_font';
src: url('fonts/miau_font.eot');
src: local('?'), url('fonts/miau_font.woff') format('woff'), url('fonts/miau_font.ttf') format('truetype'), url('fonts/miau_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Background-uri

Cum ne cream un background?

Un mod foarte simplu de creare a unei imagini de background:

  1. creati o imagine noua in gimp, faceti acolo un desen rapid (nu trebuie sa fie cu sens).
  2. Apoi Filters->Map->Make seameless... Asta este pentru a face imaginea sa fie tileable.
  3. Applicati un layer alb, transparent, pentru a-i mai domoli culorile. Layer->New layer. Vi se deschide o fereastra de dialog unde puteti selecta diverse optiuni pentru noul layer; selectati white. Acum veti vedea ca desenul e tot alb, insa nu s-a pierdut, este pe layer-ul de dedesubt. Micsorati opacitatea layerului alb (puteti face asta din containerul cu informatii despre layere) pana ajungeti la un contrast potrivit pentru un background

Alta modalitate de creare a unei imagini de background:

  1. creati o imagine noua in gimp, desenati o linie dreapta orizontala (sa fie un pic de distanta intre ea si marginea de sus a imaginii)
  2. Stergeti partea din mijloc a liniei (dar lasati neatinse capetele)
  3. Desenati ceva dragut pornind de la cele doua capete. Iata rezultatul:

Teme