Monday + Wednesday 12:00-1:50pm. CompThink ARTS Andrew Ilnicki

Transcription

1 Monday + Wednesday 12:00-1:50pm CompThink ARTS Andrew Ilnicki ilnickiap@vcu.edu

2 Course Website VCUarts CompThink

3 Software Design Software - Adobe Creative Suite Text Editor - Sublime, Brackets, Coda, Komodo Edit, Espresso Personal Web Server - MAMP, Reclaim Hosting FTP Client - CyberDuck, FileZilla

4 Digital Resources Digital Tutors Pluralsight W3 Schools

5 Optional Books HTML5 For Web Designers By Jeremy Keith Handcrafted CSS By Dan Cederholm [other references will be distributed in class]

6 You Will Learn HTML / CSS Best Practices JavaScript / jquery Best Practices PHP - dynamic web development CMS - content management systems (Wordpress)

7 You Will Try CSS3 Responsive Web Design Custom CMS Development with Wordpress for a real client SEO - search engine optimization

8 You Will Benefit From Real world experience Responsive Web Design implementation Professional Practices, tips, and tricks Your new found hire-ability as a hybrid graphic designer / web developer

9 QUESTION What is your understanding of computational thinking, and how can you leverage that knowledge in your chosen life path?

10

11 WEB BROWSERS What do web browsers do and What is the DOM?

12 What do web browsers do?

13 The web is an illusion Computers Files Folders

14 The web is an illusion Computers Files Folders Servers Documents Directories

15

16 The DOM The Document Object Model (DOM)

17 The DOM The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree.

18 The DOM HTML HEAD BODY

19 DOM to Document Begin HTML Head Space Body Content Space End HTML

20 DOM to Document <html> <head> </head> <body> </body> </html>

21 DOM to Document HTML Code as seen in Sublime Text Editor

22 DOM to Document

23 HTML PRIMER View Source

24

25 Web Development Layers <DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <script type="text/javascript" src="behaviors.js"></script> </head> <body> This is where the content goes... </body> </html>

26 Web Development Layers doctype - begin html declaration - begin head tag - meta tag - stylesheet url - javascript url - begin head tag - begin body tag - end body tag - end html declaration - <DOCTYPE html"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <script type="text/javascript" src="behaviors.js"></script> </head> <body> This is where the content goes... </body> </html>

27 Web Development Layers Begin HTML Head Space Body Content Space End HTML

28 Web Development Layers <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Begin HTML doctype - <html xmlns=" begin html declaration - <head> begin head tag - </head> <body> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> meta tag - <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> stylesheet url - <script type="text/javascript" src="behaviors.js"></script> javascript url - begin head tag - This is where the content begin goes... body tag - </body> </html> end body tag - end html declaration -

29 Web Development Layers Document Start Head Add extra behaviors + styles Body Content Space Document Finish

30 What is XHTML? HTML means Hyper Text Markup Language

31 What is XHTML? XHTML means that when developing webpages, you must keep your presentation separate from your content

32 Why Use XHTML? XHTML adherence encourages good practice. All your markup will be well-formed and all your tags will be closed. Makes page rendering easier for browsers Makes bug-tracking easier for you. Web pages will be easier to edit, particularly in terms of site-wide changes.

33 Layers within Layers Content Layer Presentation Layer Behavior Layer

34 Layers within Layers Content Layer Text and Images Presentation Layer Styles color, composition, typography Behavior Layer Interaction Javascript, Actionscript/Flash

35 But, here s the catch... XHTML is now considered a series of Best Practices it is too stringent, too complicated, and too limiting to enforce sweepingly across the WWW. However, the philosophy and concept of XHTML separation lives on as a basis for...

36 HTML5 HTML5 is relatively new it s a simpler syntax to learn and memorize, so feel lucky intended to force the browser to handle commonly used solutions like video and audio innately... instead of using plugins.

37 HTML5 Example doctype OLD <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " NEW <DOCTYPE html>"

38 HTML5 Example scripts, styles, and types OLD <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> NEW <link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>

39 HTML5 Example Video embedding OLD <object classid="clsid:d27cdb6e-ae6d-11cf-96b " width="100" height="100" codebase=" pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value=" Sv5iEK-IEzw?fs=1&hl=en_GB" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="100" height="100" src=" fs=1&hl=en_gb" allowscriptaccess="always" allowfullscreen="true"></embed></object> NEW <video src=myvideo.mp4 width=640 height=480 controls poster=myimage.jpg></video>"

40 My hypothesis HTML5 Improves: Learning and retention of web design and development best practices

41 New content areas include: <header> <nav> <section> <article> <aside> <footer> HTML5 Tags

42 What is CSS?

43 Primer - CSS CSS Cascading Stylesheets example: html { margin:0; padding:0; }

44 Why Use CSS? Your pages will be smaller. Much, much, much smaller. Without the bloat that comes with nested tables, spacer images and font tags, your mark-up will be leaner and meaner. Easier to edit website styles all in one place That will also appeal to search engines.

45 SAY YES TO CSS Life will be simpler for the people in charge of the design The presentation of an entire site full of documents can be changed by altering just one file without ever touching the content.

46 SAY YES TO CSS Life will also be simpler for the people in charge of the content Your mark-up will be human readable allowing the content to be updated without changing the rules that govern the presentation.

47 SAY YES TO CSS Your content will be accessible to all browsing devices, past and present That means web-enabled mobile devices too

48 A DETAILED EXAMPLE

49 (re-define the defaults)

50 reset.css

51 reset.css Selectors

52 reset.css Elements

53 reset.css Rules or Styles

54 reset.css Pseudo-elements

55 reset.css Pseudo-classes

56 SEMANTICS of code use <h*> tags Put headings and subheadings into <h> tags, or <h1>, <h2>, <h3>, etc. (HINT) h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } is equivalent to... h1, h2, h3 { font-family: sans-serif }

57 SEMANTICS of code EXAMPLE CODE: <h1>not green</h1> <h1 class="pastoral">very green</h1> You can assign style information to all elements with a class of "pastoral" as follows:.pastoral { color: green } /* all elements with class~=pastoral */ The following assigns style only to H1 elements with class of "pastoral": h1.pastoral { color: green } /* H1 elements with class~=pastoral */ [ Given these rules, the first H1 instance in the example code would not have green text, while the second would ]

58 SEMANTICS of code use graphs + lists Wrap your paragraphs in <p> tags. If you have a list of links, then put them in a list (<ul> or <ol>) and make each of them a list item, <li>. EXAMPLE CODE: <p>this is a Paragraph</p> <ol> <li>this is an ORDERED list</li> </ol> <ul id="stylename"> <li>this is an UNORDERED list</li> </ul>

59 DON T WORRY The default presentation of a tag is ONLY a result of browsers following rules... CSS CHANGES ALL THAT

60 NOW TO THE LAYOUT <div> and <span> EXAMPLE CODE: <div> <p>this is a Paragraph inside a DIV element</p> <span> This is a specific content set that needs to be treated differently inline </span> <p>this is another Paragraph after the span</p> </div>

61 NOW TO THE LAYOUT <div> A <div> is a block level element. That means it s self-contained and comes with a built-in line break. <span> A <span> is an inline element. Inline elements don t include a line break and must be contained within a block level element. Both are like blank slates just waiting for styles to be applied to them.

62 body, If Classes and IDs table, th, td, p, ul, li... etc. you want to apply a style to all instances of a certain tag, then you simply reference that tag in your stylesheet. body,table,th,td { margin:0; padding:0; } p { margin-bottom:18px; }

63 Classes <p but <body Be Selective are intended to be reusable... class="myclass"> an ID is unique... id="myid"> So an HTML document would only contain one instance of <body id="myid">

64 Most XHTML So <div <div then HIERARCHY web pages can be divided up into sections like "main navigation", "sub navigation", "main content" "related material", etc. does not give us the tags to describe these chunks of content. But if we take the blank slate block-level tag (<div>) and give each section a unique identifier (id= ), then we ve taken semantic description to the next level. if you mark up your pages with areas like: id="branding">, or id="footer">... you have a way to reference those chunks of content. You will then be able to affect their visual appearance and even change how they are positioned.

65 The <div <h1 <p <span <ul <br CLASSES same rules apply to classes, and other elements as well: class="specialheading">, or class="redhead">, or class="big-red-text">, or class="inline-pink-notation">, or class="bulleted-list">, or class="clear">...

66 All for today, thank you