WEB DEVELOpment immersive advanced layout, forms, & media

WEB DEVELOpment immersiveadvanced layout, forms, & media

2

• Grid Systems• Positioning Properties• User Forms• Embedding Media• Image Sprites & Rollovers• Front End Frameworks

Topics

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

3

Popular CSS GRID SYSTEMS


• 960• Blueprint• SenCSS• The Semantic Grid System• Twitter Bootstrap (grid included)

4

CSS GRID SYSTEMS


5

CSS GRID SYSTEMS


6

relative positioning


.box { position:relative; top: 25px; left: 200px;}

7

relative positioning


8

Absolute positioning


.box { position:absolute; top: 0; right: 0;}

9

Absolute positioning


10

fixed positioning


.box { position:fixed; top: 0; right: 150px;}

11

fixed positioning


12

Z-index (layering)


.bluebox { position:relative; top: 125px; left: 125px; z-index:3;}

13

Z-index (layering)


14

<video src=”movie.???”> 

</video>

Embedding VIDEO with a single source

15

<video> <source src="movie.mp4" type="video/mp4"/> <source src="movie.ogv" type="video/ogg"/> <source src="movie.webm" type="video/webm"/>

<!-– fall back content here -->

</video>

Embedding VIDEO using multiple sources


16

Video element support


17

Video codec type support


18

Custom Video player solutions


Reviews & Feature Chart: http://praegnanz.de/html5video/

19

Image Sprites


YESNO

20

Image Sprites


Sprites can include 2 states for a single icon or they can contain multiple states for many different menu items.

One advantage is quicker loading time. Load navigation images all at once. No waiting during the mouseover event.

21

Single icon, 2 states


22

Multi icon, multi states


23

CSS sprite Rollover


24

front end frameworks


html5boilerplate.comhtml5boilerplate.com/mobile

25

Twitter bootstrap 2


twitter.github.com/bootstrap

26 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

WEB DEVELOpment immersive advanced layout, forms, & media

Documents

Transcript of WEB DEVELOpment immersive advanced layout, forms, & media