4. Agen
daWorksh
opDay #1
• Fundamental HTML5
- HTML5 vs HTML
- HTML5 Forms
- HTML5 Semantics
• Fundamental CSS3
- CSS3 vs CSS
- CSS3 Media Queries
- CSS3 Visual Effects
- CSS3 Tools
Day #2
• Working with Frameworks
- Twitter Bootstrap
• Creating Website
- Case Study
6. The
Definiti
onHTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets)
are two of the core technologies for building Web pages. HTML provides the
structure of the page, CSS the (visual and aural) layout, for a variety of
devices. Along with graphics and scripting, HTML and CSS are the basis of
building Web pages and Web Applications.
“
“
+ =
Index.html Style.css WEB PAGES
7. WEB
isHTML +
CSSImagine your favorite website
without CSS. Just HTML.
• Type F12 > Click “Sources“ tab
• Choose file css and delete all
8. What
’sHTML5
HTML5 is the latest evolution of the standard that defines HTML. The term
represents two different concepts:
• It is a new version of the language HTML, with new elements, attributes,
and behaviors,
• and a larger set of technologies that allows more diverse and powerful Web
sites and applications. This set is sometimes called HTML5 & friends and
often shortened to just HTML5.
Designed to be usable by all Open Web developers, this reference page links
to numerous resources about HTML5 technologies, classified into several
groups based on their function.
• Semantics
• Connectivity
• Offline & Storage
• Multimedia
• 2D/3D Graphics & Effects
• Performance & Integration
• Device Access
• Styling
9. HTM
L5Vs
HTML4More simple doctype
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5 (Case Insensitive)
<!DOCTYPE HTML>
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the
<html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what
version of HTML the page is written in.
10. HTM
L5Vs
HTML4More simple character sets
HTML4
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1">
HTML 5
<meta charset="UTF-8">
To display an HTML page correctly, a web browser must know the character set used in the page.
Because ANSI and ISO was limited, the default character encoding was changed to UTF-8 in
HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
12. HTM
L5Vs
HTML4The / is no longer requred for self-closing elements
HTML4
<br />
<hr />
<img />
<input />
<link />
<meta />
HTML 5
<br>
<hr>
<img>
<input>
<link>
<meta>
13. HTM
L5Vs
HTML4Boolean attributes can be minimized
HTML4
checked="checked"
compact="compact"
declare="declare"
defer="defer"
disabled="disabled"
multiple="multiple”
selected="selected"
HTML 5
checked
compact
declare
defer
disabled
multiple
selected
14. Som
eGuideli
nes• Tetap membiasakan penggunaan huruf kecil (lowercase) dalam penulisan tag dan atribut,
seperti halnya di XHTML, walaupun di HTML5 tidak diharuskan.
• Tetap menutup setiap tag yang memerlukan tag penutup, walaupun tidak diharuskan.
• Tetap gunakan kutip(“) untuk setiap value dari atribut, walaupun di HTML5 boleh tanpa kutip.
• Tetap menambahkan penutup / pada tag tunggal seperti <img>, <input>
• Hindari penggunaan atribut Boolean secara berlebihan. Penggunaan <input type=“checkbox”
checked /> lebih baik dibanding <input type=“checkbox” checked=“checked”/>
15. Don’t
Use This Tags &
atributesAll of these just presentational purpose. Use css instead.
Tags
<font>
<center>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<basefont>
<big>
<dir>
<strike>
<tt>
Atributes
align
bgcolor
height
width
size
type
16. HTM
L5New
Features• New form controls, like calendar , date , time , email , url, search ……. And More
• New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
• Support for local storage
18. HTM
L5Forms
HTML5 Input Type
HTML4 Input Elements
• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text
HTML5 New Input Elements
• search
• email
• url
• tel
• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• color
34. HTM
L5Forms
New Form Atributes - pattern
Validasi dengan mengikuti pattern dari regex (regular expression)
Tools: http://html5pattern.com/
35. HTM
L5Forms
New Form Atributes - form
Atribut form berguna untuk menentukan suatu elemen input masuk ke dalam
form tertentu sehingga elemen input tidak harus berada di dalam tag <form>
36. HTM
L5Forms
New Form Atributes - autocomplete
Mengaktifkan atau menonaktifkan fitur auto complete fill pada elemen input.
Default: on.
off
on
37. HTM
L5Forms
New Form Atributes – list & datalist
Elemen input teks yang memiliki kemampuan seperti dropdown untuk memilih predefined input
dan bersifat auto complete.
38. HTM
L5Forms
New Form Atributes – autofocus
Membuat cursor otomatis fokus ke elemen input tertentu pada saat halaman ditampilkan.
Hanya diperbolehkan memiliki satu elemen input dengan atribut autofocus dalam satu halaman.
40. HTM
L5New
Elements<video>
Pemutar video native di browser tanpa
perlu dukungan 3rd party software/plugin.
Tipe video yang didukung:
• .flv
• .mp4
• .avi
• .m4v
• .ogg
• .webm
Tags:
• <video>
• <source>
43. HTM
L5Semantics
What are Semantics Elements?
Semantics is the study of the meanings of words and phrases in language.
Semantic elements are elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
Why Semantics Elements?
With HTML4, developers used their own favorite attribute names to style page elements:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
This made it impossible for search engines to identify the correct web page content.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.
According to the W3C, a Semantic Web:
"Allows data to be shared and reused across applications, enterprises, and communities."
46. HTM
L5Semantics
A New Perspective on Types of Content
Metadata content
Menyajikan informasi mengenai halaman itu sendiri.
contoh: <title>, <link>, <meta>, <style>
Flow content
Elemen-elemen yang digunakan untuk mengatur tata letak isi di halaman.
contoh: <header>, <footer>, <p>
Sectioning content
Terkait pengaturan bagian-bagian halaman
contoh: <section>, <article>, <aside>, <nav>
Heading content
Terkait dengan pengaturan level heading
contoh: <h1>…<h6>, <hgroup>
47. HTM
L5Semantics
A New Perspective on Types of Content
Phrasing content
Pengaturan tampilan tulisan pada suatu paragraf.
contoh: <em>, <i>, <cite>, <strong>, <b>
Embedded content
Berhubungan dengan penyertaan media seperti image, audio dan video
contoh: <img>, <object>, <embed>, <video>, <audio>, <canvas>
Interactive content
Berhubungan dengan interaksi dengan pengguna.
contoh: <form>, <input>
48. HTM
L5Semantics
<header>
Mendefinisikan bagian header/kepala dari sebuah halaman ataupun blok/section.
Biasanya dalam header berisi komponen seperti logo, link navigasi dan form pencarian.
<header>
<h1>Site name</h1>
<h2>Site slogan</h2>
<p>Supplementary information</p>
</header>
<article>
<header>
<h1>Article Title</h1>
<p>By Jhon Doe</p>
</header>
<p>Lorem Ipsum dolor set amet</p>
</article>
49. HTM
L5Semantics
<footer>
Mendefinisikan bagian bawah/akhir dari sebuah halaman.
Biasanya dalam footer berisi informasi seperti copyright, tentang dan kontak.
<footer>
<ul>
<li>copyright info</li>
<li>sitemap link</li>
<li>contact link</li>
<li>to top link</li>
</ul>
</footer>
50. HTM
L5Semantics
<nav>
Mendefinisikan sekumpulan link yang menghubungkan suatu halaman dengan halaman lain
dalam satu website.
Biasanya link yang berada dalam <nav> adalah link utama, misal untuk menampilkan navigasi
atau menu utama yang berada di atas halaman.
<nav>
<ul>
<li><a href=”#">Home</a></li>
<li><a href=”#">About</a></li>
</ul>
</nav>
51. HTM
L5Semantics
<section>
Berguna untuk membuat suatu blok wilayah/bagian tertentu pada suatu halaman.
Biasanya di dalam <section> selalu terdapat elemen heading.
<section>
<h1>Apple</h1>
<p>The apple is the fruit...</p>
...
</section>
52. HTM
L5Semantics
<article>
Berguna untuk mendefinisikan bagian artikel atau tulisan yang dapat digunakan dan didistribusikan
kembali, misal untuk dihubungkan dengan RSS (Rich Site Summary).
Biasanya bagian <article> berupa postingan blog, berita, artikel majalah, komentar, dsb.
<article>
<h3>Apple</h3>
<p>The apple is the fruit...</p>
...
</article>
53. HTM
L5Semantics
<aside>
Mendefinisikan bagian khusus dari suatu halaman yang berada pada sisi samping.
Biasanya sering disebut sebagai sidebar.
<aside>
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Best Friend</a></li>
</ul>
</aside>
65. HTM
L5Limitation
Beberapa elemen/tag HTML5 semantics tidak didukung oleh browser IE 6 – 8. (but who cares! LOL)
Anyway, ini solusinya, menggunakan js html5shim & sedikit css hack.
Javascript:
<!--[if ltIE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
CSS:
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}
(Not
Really)
66. HTM
L5&
JavascriptDrag & Drop
Fitur drag & drop merupakan bagian dari standar HTML5. Memungkinkan untuk menggeser sebuah
objek ke posisi lain dalam sebuah halaman.
67. HTM
L5&
JavascriptCanvas
Elemen <canvas> berguna untuk menggambar grafik melalui kode javascript. Dengan javascript,
canvas dapat diisi dengan path, box, circle, teks, gambar, hingga animasi dan games.
68. HTM
L5&
JavascriptGeolocation
HTML5 Geolocation API berguna untuk mendapatkan posisi geografis pengguna melalui browser.
Hasil yang didapatkan yakni posisi koordinat latitude & longitude. Pengguna harus menekan allow
pada popup yang muncul jika halaman website meminta request lokasi.
navigator.geolocation.getCurrentPosition(showPosition);
69. HTM
L5&
JavascriptLocal Storage
Memungkinkan sebuah website untuk menyimpan data di browser pengguna. Tidak seperti cookies
yang hanya berkapasitas 4kb, local storage memiliki kapasitas yang jauh lebih besar, yakni 5mb.
Data yang disimpan di browser tidak akan ditransfer ke server. Penggunaan local storage terhubung
dengan masing-masing domain. Beberapa halaman sekaligus pada satu domain yang sama maka
data disimpan pada local storage yang sama.
70. HTM
L5&
JavascriptOffline Application Cache
Membuat website dapat diakses secara offline, dengan membuat file manifest cache. Website
dengan fitur ini dapat diakses tanpa koneksi internet dengan kelebihan seperti:
• Offline Browsing – pengguna dapat mengakses website walaupun offline
• Speed – website diakses dari cache di browser
• Reduced server load – browser hanya menghubungi server ketika ada update/perubahan
File Manifest
Merupakan file teks yang berfungsi untuk menyampaikan kepada browser apa yang harus di cache
dan tidak. File manifest disimpan dengan format .appcache dan diletakkan dalam atribut manifest
pada tag html.
contoh: <html manifest=“weboffline.appcache">
File manifest terdiri dari 3 bagian, yakni:
• Cache Manifest – berisi daftar file yang disimpan di cache
• Network – berisi daftar file yang tidak boleh disimpan di cache, harus memerlukan koneksi
• Fallback – berisi nama lokasi folder appcache dan file yang akan berada di dalamnya
72. What
’sCSS3
• “CSS” is an acronym for Cascading Style Sheets, a web-based markup
language used to describe the look and formatting of a website to the browser.
• The first iteration of CSS was published in late 1996, offering support for
font properties, colors for text and backgrounds as well as alignment of text,
images, tables and other web elements.
• CSS2 was introduced in 1998, bringing additional capabilities such as
absolute, relative and fixed positioning of elements ,before introducing CSS
2.1 in 2005.
History
73. What
’sCSS3
• Unlike CSS 2, which is a large single specification defining various features,
CSS 3 is divided into several separate documents called "modules".
• Each module adds new capabilities or extends features defined in CSS 2,
over preserving backward compatibility.
• Work on CSS level 3 started around the time of publication of the original
CSS 2 recommendation.
• The earliest CSS 3 drafts were published in June 1999.
History
74. What
’sCSS3
• Part of the problem with the first two generations of CSS was that the specification became too
large and complex to update frequently.
• Rather than continue down that path, the W3C created the module system for CSS3, so that
individual components can be updated and refined in pieces over time.
Some of the most important CSS3 modules are:
– Selectors
– Box Model
– Backgrounds and Borders
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
Modules
75. What
’sCSS3
• CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.
• The table @ w3schools web site lists the new CSS3 properties and their browser support
http://www.w3schools.com/cssref/css3_browsersupport.asp
• Or you can visit this site that shows how much CSS3 does your browser support
http://css3test.com/ or http://caniuse.com/
CSS3 Browser Support
79. CSS
Selector
• Tag
• ID
• Class
p { text-align:justify; color:blue; }
#header { float:left; margin:10px; }
.judul { font-size:15px; background-color:#0000ff; }
80. CSS
Selector
• Turunan (Descendant)
(E F) -> Selector F merupakan bagian dari E secara struktural.
• Anak (Child)
(E > F) -> Selector F merupakan anak (secara hierarki) dari E.
• Saudara dekat (Adjancent Sibling)
(E + F) -> Selector F merupakan selector yang secara structural satu parent dengan E.
• Saudara umum (General Sibling)
(E ~ F) -> Selector F adalah satu parent dengan E dan memiliki hubungan secara struktur.
Relasi antar selector
81. Select
orAttribute• E[attr]
Seleksi semua selector E yang memiliki atribut ‘attr’
Contoh: input[required]
• E[attr = val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dengan nilai ‘val’
Contoh: input[type=checkbox]
• E[attr |= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value sama atau diawali dengan ‘val’
Contoh: p[lang |= “en”]
• E[attr ~= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value mengandung kata ‘val’ dengan
batas spasi tiap value
Contoh: .info[title ~= “more”]
• E[attr ^= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value diawali dengan ‘val’
• E[attr $= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value diakhiri dengan ‘val’
• E[attr *= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value mengandung kata ‘val’
85. The Difference
betweenID & Class
#ID
ID’s are unique
• Each element can have only one ID
• Each page can have only one element
with that ID
• Information that is totally unique should
be kept in an ID
• Special browser functionality scroll to ID
that has same value to hash url
.CLASS
Classes are NOT unique
• You can use the same class on multiple elements.
• You can use multiple classes on the
same element
• Information that is reusable should be kept in a
class
86. CSS
Pseudo-
Class
• :link
• :visited
• :hover
• :active
• :focus
• :enabled
• :disabled
• :checked
• :indeterminate
• :target
• :default
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :read-only
• :read-write
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
87. What
’sNew in
CSS3• 2D Transforms
• Backgrounds & Borders
• Color
• Values and Units
• Selectors
• Web Fonts
• Media Queries
• Name spaces
• 3D Transforms
• Animations
• Gradient
• CSS Exclusions (Floats)
• Flexible Box (“Flexbox”) Layout
• Grid Layout
• Multi-column Layout
• Region
• SVG Filter Effects
• Text Shadow
• Transitions
88. CSS
Browser
Compability
• Beberapa perintah CSS secara khusus berlaku di browser tertentu saja.
-moz-* -> Mozilla Firefox
-webkit-* -> Webkit-based browser
• Beberapa property CSS ada yang “diperlakukan” berbeda oleh setiap browser.
• Solusi?
Gunakan “important” -> !
Cobadi beberapa browser sekaligus -> Firefox, Chrome, IE
Gunakan tool cross-browser-tester.
91. CSS
Media Query
• Layout website harus mampu menyesuaikan diri dengan device yang digunakan secara otomatis,
untuk meningkatkan kenyamanan pengguna.
• CSS3 Media Query memungkinkan untuk mendefinisikan perintah CSS yang akan dijalankan sesuai
dengan perangkat / device yang digunakan.
• Jenis media:
- Desktop browser, screen, print
- Mobile browser
- Tablet form-factor
- Televisi
- Game console
• Browser Support:
IE9+
Firefox3.5+
Safari 3.2+
Chrome8+
Opera 10.6+
iOS3.2+
Opera Mini 5+
Opera Mobile 10+
Android2.1+
92. CSS
Media Query
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
@media screen and (min-width:320px) and (max-width:480px) { }
@media not print and (max-width:600px) { }
Contoh
108. CSS
Visual Effects
CSS3 Multiple Background
body {
background:
url(images/background_grass.png) bottom repeat-x,
url(images/background_stone.png) bottom right no-repeat,
url(images/background_clouds.png) left top repeat-x,
url(images/background_sun.png) right top no-repeat,
url(images/background_sky.png) top repeat-x
rgba(255,255,255,1);
}
113. CSS
Visual Effects
CSS3 Web Font
• Tidak semua font tersedia di komputer pengguna.
• CSS3 memungkinkan untuk meng-embed font yang diinginkan di web, sehingga tidak lagi
bergantung pada ketersediaan font di komputer pengguna
• Tipefont:
- .eot
- .ttf
- .svg
- .woff
• Download font:
- http://www.fontsquirrel.com/fonts
- http://www.exljbris.com/
120. CSS
Tools
CSS3 Helper Script
• Membantu browser IE8 atau sebelumnya agar kompatibel dengan CSS3.
- IE7-JS http://code.google.com/p/ie7-js/
- CSS3Pie http://css3pie.com
- CSS Sandpaper http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library
• Modernizr http://modernizr.com
Untuk mendeteksi kompatibilitas browser dengan perintah CSS3 & HTML5
How to:
- http://www.alistapart.com/articles/takingadvantage-of-html5-and-css3-withmodernizr/
- http://webdesignernotebook.com/css/how-to-use-modernizr
- http://www.ericlightbody.com/2010/modernizr-your-tool-for-html5-and-css3-functionality
121. Best Practice for
BecomingAwesome
WebDesigner1. Design for Content. Not Lorem Ipsum.
2. Mockuping First.
3. Saving Time with HTML & CSS Framework.
4. Do Not Forget User Experience.
5. Spend Time on Behance, CodePen, Etc.
6. Use Jquery Plugin & Friends.
7. Following Web Design Trends.
8. Practice makes perfect. Always.