html+css resources

ramses.cabello@gmail.com @ramsescabello

know yourresources

#ProdGrafULPGC

ramses.cabello@gmail.com @ramsescabello

know yourresourcesvideoBEFORE HTML5

video inBEFORE HTML5

videoBEFORE HTML5

videoBEFORE HTML5

Adobe Flash

NEVERUSE

FLASH(at least not for the web)

NEVERUSE FLASHfor the web

NEVERUSE FLASHfor the web

USE FLASHFOR ANIMATION

& COMPLEXGAMES

video in

BEFORE HTML5

HTML5 videoformats

HTML5 videothe syntax!

<video width="100%" height="100%" controls> <source src="video/pandas.mp4" type="video/mp4"> <source src="video/pandas.ogv" type="video/ogg"> <source src="video/pandas.webm" type="video/webm"> Your browser does not support the video tag.</video>

awesomefont

awesomefont

YES IT IS AWESOME

awesomefontawesome fontis a resourcewhich allowsyou to usepictograms

awesome fontis a resourcewhich allowsyou to usepictograms

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

awesomefont

http://fortawesome.github.io/Font-Awesome/

the fonts

the fontsyou gotta be careful with thetypefaces you use on yoursite.

the fontsyou got websafe typefaces:

the fontsyou got websafe typefaces:

ArialAa Bb Cc

1234567890

the fontsyou got websafe typefaces:

Comic SansAa Bb Cc

1234567890

the fontsyou got websafe typefaces:

Comic SansAa Bb Cc

1234567890

the fontsyou got websafe typefaces:

GeorgiaAa Bb Cc

1234567890

the fontsyou got websafe typefaces:

CourierAa Bb Cc1234567890

the fontsyou got websafe typefaces:

Times News RomanAa Bb Cc

1234567890

the fonts

ENOUGH?

the fonts

N OWELL... YES, IT

COULD BEENOUGH.

the fonts

the fonts

http://www.google.com/fonts

before we start...

those are only examples.

before we start...

those are only examples.but very widely spreadresources.

before we start...

those are only examples.but very widely spreadresources.build your own stack ofresources.

BUILD YOUROWN STACK

OF RESOURCES

http://webs.ulpgc.es/pg/html5.zip