First
Web front-end
ROSEdu CDL 2011-fall
Plan
- Markup: HTML
- Design vizual: CSS
- Interacțiune: JavaScript
- Standarde: W3C, browsere, progressive enhancement
- Colorful shiny stuff
Markup: HTML
HTML
- HTML = Hypertext Markup Language
- Model de bază: text cu linkuri
- Prin markup atașăm informație textului
Markup: elemente inline
HTML
Elemente inline: a
, strong
,
em
, img
, span
.
Ana are <em>mere!</em>
Ana are mere!
Salut <img src="smiley.png" alt=":)">
Salut 
Scrie pe <a href="http://www.wikipedia.org/"
>Wikipedia</a>, trebuie să fie adevărat.
Scrie pe Wikipedia, trebuie să fie adevărat.
Markup: elemente block-level
HTML
Elemente block-level: p
, ul
,
li
, table
, div
.
<ul>
<li>unu</li>
<li>doi</li>
</ul>
|
|
<table>
<tr>
<td>a</td> <td>b</td>
</tr>
<tr>
<td>c</td> <td>d</td>
</tr>
</table>
|
|
Markup: exemplu de document
HTML – Document complet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplu CDL: Tenis</title>
<link rel="stylesheet" url="style.css">
</head>
<body>
<h1>Tenis</h1>
<p>Jucători <em>de top</em></p>
<ul>
<li>Novak Djokovic</li>
<li>Rafael Nadal</li>
<li>Andy Murray</li>
<li>Roger Federer</li>
</ul>
</body>
</html>
Design vizual: CSS
CSS
- Separare între layout/design și conținut
- Sintaxă declarativă
- Selectori, reguli
- exemple
div.menu a {
color: red;
text-decoration: italic;
}
Design vizual: document simplu
CSS
Clasament
- Novak Djokovic
- Rafael Nadal
- Andy Murray
<h3>Clasament</h3>
<ul><li class="first">Novak Djokovic</li>
<li>Rafael Nadal</li>
<li>Andy Murray</li></ul>
Design vizual: document cu stil
CSS
Clasament
- Novak Djokovic
- Rafael Nadal
- Andy Murray
<h3>Clasament</h3>
<ul><li class="first">Novak Djokovic</li>
<li>Rafael Nadal</li>
<li>Andy Murray</li></ul>
h3 { text-decoration: underline; }
ul li { list-style: lower-roman; }
li.first { color: red; }
Interacțiune: JavaScript
JavaScript
- Cod executat în browser
- Limbaj dinamic; nu are legătură cu Java®
- Document Object Model (DOM)
- Elemente din pagină
- Evenimente (mouse, tastatură, load, formulare, etc)
- Biblioteci, ex. jQuery
- URL, cookies, local storage
- Request-uri asincrone (AJAX)
Standarde
Standarde - Evoluție
Rich content
- Table-based layout
- CSS și markup semantic
- Plugin-uri: Java, Flash
- Scalable Vector Graphics
- CSS3,
<audio>
, <video>
,
<canvas>
Standarde
Standarde - Evoluție
Încărcare de conținut
- Pagini statice
- CGI
- AJAX
- WebSockets
Standarde
Standarde
- Standarde dezvoltate la W3C
- Browserele le implementează incremental
- Progressive enhancement
- Feature detection
- Backward și forward compatibility
Plan
Take-aways
- HTML – markup semantic, minimal
- CSS – un designer capabil poate realiza
orice layout
- JavaScript – cod rulat în browser,
chiar aplicații întregi
- Standarde – stick to standards, test on
relevant browsers
- HTML5 – progresul continuă
Links
Link-uri
Colorful shiny stuff
Ce e posibil cu web front-end
Last
Mulțumesc!