future shock treatment ctrl+s SVN HTML CSS JavaScript elements - - PowerPoint PPT Presentation

▶
future shock treatment ctrl s svn
SMART_READER_LITE
LIVE PREVIEW

future shock treatment ctrl+s SVN HTML CSS JavaScript elements - - PowerPoint PPT Presentation

Apr 11, 2023 227 likes •790 views

future shock treatment ctrl+s SVN HTML CSS JavaScript elements attributes class names IDs HTML body id="users" /users/ body id="users" class="view" /users/username body id="users"

slide-1
SLIDE 1

future shock treatment

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

ctrl+s SVN

slide-6
SLIDE 6

HTML CSS JavaScript

slide-7
SLIDE 7

HTML

elements attributes class names IDs

slide-8
SLIDE 8

body id="users"

/users/

body id="users" class="view"

/users/username

body id="users" class="edit"

/users/username/edit

HTML

slide-9
SLIDE 9

<body> <div class="section"> ... </div><!-- /.section --> .section { width: 60%; }

site

slide-10
SLIDE 10

<body id="users"> <div class="section"> ... </div><!-- /.section --> #users .section { width: 40%; }

site-area

slide-11
SLIDE 11

<body id="users" class="view"> <div class="section"> ... </div><!-- /.section --> #users.view .section { width: 100%; } #users.edit .section { width: 80%; }

site-area-page

slide-12
SLIDE 12

CSS

element selectors attribute selectors class selectors ID selectors

slide-13
SLIDE 13

CSS

global styles helper styles page structure styles page-specific styles

slide-14
SLIDE 14

CSS

typography.css colour.css layout.css

slide-15
SLIDE 15

CSS

screen.css print.css handheld.css

slide-16
SLIDE 16

CSS

<link rel="stylesheet" media="screen" type="text/css" href="screen.css?20090622">

screen.css

slide-17
SLIDE 17

CSS library

reset lists tables forms

slide-18
SLIDE 18

CSS framework

slide-19
SLIDE 19

framework JavaScript

slide-20
SLIDE 20
slide-21
SLIDE 21

jQuery

“Find stuff and do stuff to it.”

CSS selectors

slide-22
SLIDE 22

jQuery

jQuery(selector).event(function(){ action; }); document .getElementById('foo') .getElementsByTagName('bar') jQuery('#foo .bar')

slide-23
SLIDE 23
slide-24
SLIDE 24

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1/jquery.min.js"> </script>

slide-25
SLIDE 25

jQuery

jQuery(function($) { $('body').addClass('hasJS'); });

.hasJS .module { display: none; }

slide-26
SLIDE 26

pattern recognition

progressive disclosure

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

<a href="#login" class="toggler">log in</a> ... <div id="login"> ... </div><!-- /#login --> jQuery('a.toggler').click(function() { var id = jQuery(this).attr('href'); jQuery(id).slideToggle('fast'); }); .hasJS #login { display: none; position: absolute; }

slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39

table:hover thead th a table tbody tr:hover th a table tbody tr td a:hover

slide-40
SLIDE 40

a-grade c-grade x-grade

browser support

known knowns known unknowns unknown unknowns

IE6

slide-41
SLIDE 41

p = 50 log ––––– + 1 a aie6 t tie6

[ ]

IE6

slide-42
SLIDE 42
slide-43
SLIDE 43

box-shadow: 5px 5px 0 rgba(0,0,13,0.3)

slide-44
SLIDE 44

blockquote p:last-child

slide-45
SLIDE 45

text-shadow: 1px 1px 1px #fff; border-radius: 1em;

slide-46
SLIDE 46

800 1024 1280

screen support

640 %

slide-47
SLIDE 47

min-width: px max-width: em

screen support

slide-48
SLIDE 48

formats

text binary simple complex

  • pen

closed

slide-49
SLIDE 49

standards

OED Duden microformats W3C

HTML5 2022?

slide-50
SLIDE 50

HTML5

<header></header> <nav></nav> <section> <header></header> <article></article> <article></article> <footer></footer> </section> <aside></aside> <footer></footer>

slide-51
SLIDE 51

HTML5

<div class="header"></div><!-- /.header --> <div class="nav"></div><!-- /.nav --> <div class="section"> <div class="header"></div><!-- /.header --> <div class="article"></div><!-- /.article --> <div class="article"></div><!-- /.article --> <div class="footer"></div><!-- /.footer --> </div><!-- /.section --> <div class="aside"></div><!-- /.aside --> <div class="footer"></div><!-- /.footer -->

slide-52
SLIDE 52

/users/ /users/username /users/username/edit

URIs

/does/ /does/teach/ /does/teach/ajax

slide-53
SLIDE 53
slide-54
SLIDE 54

http://www.w3.org/Provider/Style/URI

“Cool URIs don’t change” —Tim Berners-Lee, 01998

Historical note: At the end of the 20th century when this was written, “cool” was an epithet of approval particularly among young, indicating trendiness, quality, or appropriateness.

slide-55
SLIDE 55
slide-56
SLIDE 56

http://www.flickr.com/photos/rachelandrew/357308665/ http://www.flickr.com/photos/withassociates/3212670286/ http://www.flickr.com/photos/eggplant/44101381/