html+css resources

38
[email protected] @ramsescabello know your resources

Upload: ramses-cabello

Post on 27-Jan-2015

166 views

Category:

Design


3 download

DESCRIPTION

HTML5 Resources for your projects

TRANSCRIPT

Page 1: HTML+CSS Resources

[email protected] @ramsescabello

know yourresources

Page 2: HTML+CSS Resources

#ProdGrafULPGC

Page 3: HTML+CSS Resources

[email protected] @ramsescabello

know yourresourcesvideoBEFORE HTML5

Page 4: HTML+CSS Resources

video inBEFORE HTML5

videoBEFORE HTML5

Page 5: HTML+CSS Resources

videoBEFORE HTML5

Adobe Flash

Page 6: HTML+CSS Resources

NEVERUSE

FLASH(at least not for the web)

Page 7: HTML+CSS Resources
Page 8: HTML+CSS Resources

NEVERUSE FLASHfor the web

Page 9: HTML+CSS Resources

NEVERUSE FLASHfor the web

USE FLASHFOR ANIMATION

& COMPLEXGAMES

Page 10: HTML+CSS Resources
Page 11: HTML+CSS Resources

video in

BEFORE HTML5

HTML5 videoformats

Page 12: HTML+CSS Resources

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>

Page 13: HTML+CSS Resources

awesomefont

Page 14: HTML+CSS Resources

awesomefont

YES IT IS AWESOME

Page 15: HTML+CSS Resources

awesomefontawesome fontis a resourcewhich allowsyou to usepictograms

awesome fontis a resourcewhich allowsyou to usepictograms

Page 16: HTML+CSS Resources

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

Page 17: HTML+CSS Resources

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

Page 18: HTML+CSS Resources

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

Page 19: HTML+CSS Resources

awesomefontpictograms helpcommunicatingthrough veryclear graphics.

Page 20: HTML+CSS Resources

awesomefont

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

Page 21: HTML+CSS Resources

the fonts

Page 22: HTML+CSS Resources

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

Page 23: HTML+CSS Resources

the fontsyou got websafe typefaces:

Page 24: HTML+CSS Resources

the fontsyou got websafe typefaces:

ArialAa Bb Cc

1234567890

Page 25: HTML+CSS Resources

the fontsyou got websafe typefaces:

Comic SansAa Bb Cc

1234567890

Page 26: HTML+CSS Resources

the fontsyou got websafe typefaces:

Comic SansAa Bb Cc

1234567890

Page 27: HTML+CSS Resources

the fontsyou got websafe typefaces:

GeorgiaAa Bb Cc

1234567890

Page 28: HTML+CSS Resources

the fontsyou got websafe typefaces:

CourierAa Bb Cc1234567890

Page 29: HTML+CSS Resources

the fontsyou got websafe typefaces:

Times News RomanAa Bb Cc

1234567890

Page 30: HTML+CSS Resources

the fonts

ENOUGH?

Page 31: HTML+CSS Resources

the fonts

N OWELL... YES, IT

COULD BEENOUGH.

Page 32: HTML+CSS Resources

the fonts

Page 33: HTML+CSS Resources

the fonts

http://www.google.com/fonts

Page 34: HTML+CSS Resources

before we start...

those are only examples.

Page 35: HTML+CSS Resources

before we start...

those are only examples.but very widely spreadresources.

Page 36: HTML+CSS Resources

before we start...

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

Page 37: HTML+CSS Resources

BUILD YOUROWN STACK

OF RESOURCES

Page 38: HTML+CSS Resources

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