WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS

Size: px

Start display at page:

Download "WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS"

Cody Oliver
10 years ago
Views:

1 HTML & WEB FUNDAMENTALS

2 TOPICS How the Web Works The Development Process Separation of Concerns Work Flow Habits Getting to know HTML elements Validation 2

3 HOW THE WEB WORKS Request/Response Rendering in the browser Local / Remote Frontend / Backend Development 3

4 REQUEST / RESPONSE 4

5 CONVERSATION: PASSING HTML, CSS, & JS 5

6 RENDERING IN THE BROWSER Each browser has its own rendering engine to interpret and display the markup 6

7 RENDERING IN THE BROWSER Top to bo8om, le: to right 7

8 LOCAL / REMOTE 8

9 FTP (FILE TRANSFER PROTOCOL) Things you will need to connect: Ftp Address User login Password Should be provided by your host company or server admin. 9 INTRODUCTION TO WEB DEVELOPMENT

10 DEVELOPMENT Front end (client-side) HTML CSS Javascript Back end (server-side) Ruby PHP Python PERL C++ Node.js 10

11 DEVELOPMENT PROCESS Work Cycle Planning Stages 11

12 A TYPICAL WEB DEVELOPMENT CYCLE User- Experience (UX) InformaCon Architecture (IA) Design Development 12

13 1 UX " Who is our target audience? How do we know if the user is hitting their goals? What are the most important features of this site? 13

14 1 UX " Business Needs User Needs Ideal Experience Best PracCces 14

15 2 IA " A model or blueprint for the site Resulting in deliverables such: wireframes flow diagrams sitemap 15

16 2 IA : The Blueprint" Sitemaps & Flow Diagrams Establish flow and order Wireframes & Content Define the user interaccon and ease the handoff process to the creacve team 16

17 SMALL SITE 17

18 LARGE SITE 18

19 HAND DRAWN 19

20 BRAINSTORMING 20

21 FUNCTIONAL 21

22 MINIMAL 22

23 IPHONE 23

24 3 DESIGN Wireframes become design comps 24

25 3 DESIGN Each wireframe template, becomes a comp template Homepage Blog 2 column top 1 column bo8om 2 column top 2 column bo8om 25

26 4 Comps become graphics & real text FRONT END DEVELOPMENT general- assembly- logo.png Real Text: General Assembly offers classes, and events at the interseccon of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned praccconers, we offer a robust curriculum focused on 26

27 5 BACK END DEVELOPMENT Interacts with database and executes commands accng as a controller that mediates between the database model and the front end users view. If we go to and search for a pair of shoes, the visual display of the images, the price and the green bu8on "Add To Cart" is all part of the frontend. Now, when I click "Add To Cart" and this an item is moved to my shopping cart in the backend there is some logic wri8en that says something like: "The user just clicked a bu8on, so add this item temporarily to the database and remember this item for the user." The backend takes care of the accons and the direccons of how and where to store data. 27

28 SEPARATION OF CONCERNS HTML = structure (content) CSS = style Javascript = behavior 28

29 SITE ORGANIZATION 29

30 HTML BASICS Syntax Document Structure Content Tags Element Display 30

31 SYNTAX 31

32 SYNTAX 32

33 BASIC DOCUMENT STRUCTURE <html> <head> Document metadata </head> <body> Document contents </html> </body> 33

34 CONTENT TAGS Heading Elements <h1>largest Heading</h1> <h2>... </h2> <h3>... </h3> <h4>... </h4> <h5>... </h5> <h6>smallest Heading</h6> 34

35 CONTENT TAGS Text Elements <p>this is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>this text is preformatted</pre> 35

36 CONTENT TAGS Text Elements Logical Styles <em>this text is emphasized</em> <strong>this text is strong</strong> <code>this is some computer code</code> 36

37 DEPRECATED TAGS L <b>bold</b> <i>italic</i> <u>underline</u> <s>strike through</s> <menu>creates a menu</menu> <center>centers content</center> <applet>creates an applet</applet> <font>font style</font> 37

38 CONTENT TAGS Unordered list <ul> <li>first item</li> <li>next item</li> </ul> 38

39 CONTENT TAGS Ordered list <ol> <li>first item</li> <li>next item</li> </ol> 39

40 CONTENT TAGS Definition list <dl> <dt>first term</dt> <dd>definition</dd> <dt>next term</dt> <dd>definition</dd> </dl> 40

41 IMAGES File Types Resolution & Color Mode Compression Attributes 41 INTRODUCTION TO WEB DEVELOPMENT

42 COMMON FILE TYPES GIF (Graphics Interchange Format) JPG (JPEG) (Joint Photographic Experts Group) PNG (Portable Network Graphic) BMP (Bitmap) SVG (Scalable Vector Graphic) 42 INTRODUCTION TO WEB DEVELOPMENT

43 LOSSY VS LOSSLESS Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data Lossy data compression does not allow the exact original data to be reconstructed from the compressed data. 43 INTRODUCTION TO WEB DEVELOPMENT

44 GIF (GRAPHIC INTERCHANGE FORMAT) Lossless compression that simplifies color pallette to reduce file size. Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons) Not good for complex gradients or millions of colors (ex: photos) 44 INTRODUCTION TO WEB DEVELOPMENT

45 JPG (JOINT PHOTOGRAPHIC EXPERTS GROUP) Lossy compression that reduces file size by loss in image fidelity. Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors. Not as sharp at depicting text, and icons as GIF or PNG. 45 INTRODUCTION TO WEB DEVELOPMENT

46 PNG-8 (PORTABLE NETWORK GRAPHIC 8 BIT) Lossless data compression that was meant to replace GIF. PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes. Creates much larger file sizes on photos than JPGs. 46 INTRODUCTION TO WEB DEVELOPMENT

47 PNG-24 (PORTABLE NETWORK GRAPHIC 24 BIT) A higher 24 bit version of PNG. Excellent results for images with transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients. Will create a larger file size than JPG for photos however. 47 INTRODUCTION TO WEB DEVELOPMENT

48 BMP (BITMAP) Left over from the days of oldver vesions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size. Good for making retro web 1.0 graphics. Not ideal for maintaining clarity in web images at reasonable file sizes. 48 INTRODUCTION TO WEB DEVELOPMENT

49 SVG (SCALABLE VECTOR GRAPHIC) Lossless format that can optionally be defined as vector points instead of pixels allowing scaling. Good for scalable graphics. Has limited support in older versions of Internet Explorer 8 and below. 49 INTRODUCTION TO WEB DEVELOPMENT

50 CHOOSING IMAGE RESOLUTION There are only 72 pixels per inch on your screen. Web = 71 dpi (ppi) Print Newspaper = 100 dpi (ppi) Print Magazine = 300 dpi (ppi) 50 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

51 CHOOSING COLOR MODES Our screens display colors in RGB. Web = RGB (Red, Green, Blue) Print = CMYK (Cyan, Magenta, Yellow, Black) 51 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

52 IMAGE TAG <img src= myimage.jpg" alt="alternate Text" title= Display Title width= 800" height= 600" /> 52 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

53 LINKS Attributes (href, target) Relative vs Absolute Types (url, named anchor, mailto) 53 INTRODUCTION TO WEB DEVELOPMENT

54 LINK TAGS <a href=" is a Link</a> <a href=" <img src="url" alt="alternate Text"> </a> <a href="mailto:[email protected]">send </a> A named anchor: <p id="tips">useful Tips Section</p> <a href="#tips">jump to the Useful Tips Section</a> 54 INTRODUCTION TO WEB DEVELOPMENT

55 RELATIVE VS ABSOLUTE <a href=" is an absolute url Link</a> VS <a href= about.html">this is a relative url Link</a> Relative urls, link to content inside the same site and provides a file path relative to the relationship between the two files. Whether internal to the site or on an external domain, absolute urls provide the full http url in the file path. 55 INTRODUCTION TO WEB DEVELOPMENT

56 ELEMENT DISPLAY 56

57 META DATA Keywords Descriptions OGP (open graph protocol) 57 INTRODUCTION TO WEB DEVELOPMENT

58 KEYWORDS Comma seprated list of terms to improve search engine optomization. <meta name="keywords" content="wikipedia,encyclopedia" /> 58 INTRODUCTION TO WEB DEVELOPMENT

59 DESCRIPTION Paragraph description of your site page. Google displays first 69 characters of the description in the search results under the site title and url. <meta name="description" content=" " /> 59 INTRODUCTION TO WEB DEVELOPMENT

60 OGP (OPEN GRAPH PROTOCOL) Enables any web page to become a rich object in a social graph. <meta property="og:title" content="blue Valentine"/> <meta property="og:type" content="movie"/> <meta property="og:url" content=" <meta property="og:image" content="/images/facebookthumb.jpg"/> 60 INTRODUCTION TO WEB DEVELOPMENT

61 W3C VALIDATION h8p://validator.w3.org/ 61

62 62 INTRODUCTION TO WEB DEVELOPMENT

38 Essential Website Redesign Terms You Need to Know

38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready