IDM 221. Web Design I. IDM 221: Web Authoring I 1

Transcription

1 IDM 221 Web Design I IDM 221: Web Authoring I 1

2 Week 2 IDM 221: Web Authoring I 2

3 Tools for Development Text Editor Hos.ng Version Control FTP (later) IDM 221: Web Authoring I 3 Last week we discussed some of the tools we'll be using for our development process. You should all have installed a (click) text editor, Sublime Text or whichever other option you prefer. You also should all have (click) hosting taken care of, and you should all have a (click) GitHub or Bitbucket account for version control, which we'll talk about tonight. (click) FTP will come later.

4 Cri$cal Concepts Users/Usability Cross browser compa4bility User accessibility Search engine op4miza4on (SEO) Responsive web design (RWD) IDM 221: Web Authoring I 4 There are some critical concepts we need to be familiar with before we begin a project. Without considering these concepts, you're project will probably lack components that make it stand out as a well functioning, enjoyable experience.

5 Users and usability IDM 221: Web Authoring I 5 Before you design a website, you need to think about who your users are going to be and what they are going to expect. Remember, users determine the success of a website. What do users want when the reach a website? The want to find what they're looking for as quickly and easily as possible. When they find it, they want to extract the information or do the task as quickly and easily as possible.

6 IDM 221: Web Authoring I 6 How do users use a page? They don't read it in an orderly fashion, and they don't like to scroll any more than they have to. If they can't find what they're looking for or get frustrated, they leave the site. In web development terms, what users want is usability. The term refers to how easy it is to use a website. If a site is easy to use, it has a chance to be effective. 1. present critical content above the fold 2. group related items and limit the number of groups 3. include a header that identifies the site and provides navigation 4. use current navigation conventions (e.g. logo goes to home page)

7 Cross browser compa-bility IDM 221: Web Authoring I 7 If you want your website to be used by as many visitors as possible, you need to make sure that your web pages are compatible with as many browsers as possible. That's known as cross browser compatibility. Modern browsers also include special Developer Tools that include Emulation options that will help us test our code.

8 Guidelines use supported HTML5 and CSS3 features test all pages on all major browsers Can I Use? HTML 5 Test IDM 221: Web Authoring I 8 Let's go over a few basic guidelines. (click) Make sure to use supported HTML5 and CSS3 features when coding your site, (click) test all pages on all major browsers, not just your favorite browser. Before using a feature or tag, (click) check it's current availability on all modern browsers.

9 User accessibility IDM 221: Web Authoring I 9 Accessibility refers to the qualities that make a website accessible to as many users as possible, especially disabled users. Visually impaired users may not be able to read text that's in images, so you need to provide other alternatives for them. Users with motor disabilities may not be able to use a mouse, so you need to make sure that all of the content and features can be accessed through the keyboard.

10 IDM 221: Web Authoring I 10 There are many information sources on accessibility, we'll review the guidelines for coding the elements and attributes that provide accessibility as we progress through the course.

11 Search engine op-miza-on IDM 221: Web Authoring I 11

12 IDM 221: Web Authoring I 12 SEO refers to the goal of optimizing your website so your pages rank higher in search engines like Google, Bing and Yahoo. Although the search algorithms that are used by search engines change frequently, there are some common coding techniques that will help your pages do better in the search engines. We'll review these guidelines as we build our pages.

13 Responsive web design IDM 221: Web Authoring I 13

14 img { max-width: 100%; }.flex { background-color: red; display: flex; flex-direction: column; (min-width: 48rem) {.flex { background-color: white; flex-direction: row; } (min-width: 64rem) {.flex { background-color: blue; } } IDM 221: Web Authoring I 14 The term Responsive web design refers to the theory and practice of creating websites that adapt gracefully to all viewing mediums, from desktop computers to mobile phones. The layout of a website adapts to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

15 Fun RWD sta+s+cs more people in the world own smartphones than toothbrushes 80% of all consumers do some shopping on smartphones 70% of mobile searches lead to some type of ac;on within an hour 40% of users will choose a different search result if the first one isn't mobile friendly 45% of mobile users ages 18 to 29 use smartphones every day for searches as of 2017, 87% of connected devices are smartphones and tablets IDM 221: Web Authoring I 15

16 HTML Structure IDM 221: Web Authoring I 16

17 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>my Document Title</title> </head> <body> <h1>welcome to my page.</h1> <img src="../images/skatedog.jpg" alt="a dog on a skateboard" /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html> IDM 221: Web Authoring I 17 An HTML document contains HTML elements that define the content and structure of a web page.

18 The DocType <!DOCTYPE html> IDM 221: Web Authoring I 18 Each HTML document consists of two parts: the DOCTYPE declaration and the document tree. The DOCTYPE declaration shown here indicates that the document is going to use HTML5. You need this at the start of every HTML document.

19 <html lang="en"> <head> <meta charset="utf-8"> <title>my Document Title</title> </head> <body> <h1>welcome to my page.</h1> <img src="../images/skatedog.jpg" alt="a dog on a skateboard" /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html> IDM 221: Web Authoring I 19 The document tree starts with the html element, which marks the beginning and end of the HTML code. This element can be referred to as the root element of the document. The html element always contains one head element that provides information about the document and one body element that provides the structure and content of the document.

20 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> IDM 221: Web Authoring I 20 It's a good practice to start every HTML document from a template that contains this code or from another HTML document similar to the one you are going to create. When you use HTML5, you can code elements using lowercase, uppercase, or mixed case. For consistency, you should use lowercase unless uppercase is required. Best practice

21 Opening and closing tags <h1>refresh Philly</h1> <p>our goal is to bring together the best and brightest web professionals in the Philadelphia area so that we may learn from one another.</p> IDM 221: Web Authoring I 21 As you've seen, most HTML elements start with an opening tag and end with a closing tag that is like the opening tag but has a slash within it.

22 Empty tags <br> <img src="logo.gif" alt="logo"> IDM 221: Web Authoring I 22 Some elements have no content or closing tag. These tags are referred to as empty tags.

23 Nes$ng <!-- correct nesting --> <p>order your copy <i>today</i></p> <!-- incorrect nesting --> <p>order your copy <i>today</p></i> IDM 221: Web Authoring I 23 This example shows the right and wrong way to code tags when one element is nested within another. The tags for one element shouldn't overlap with the tags for another element.

24 Text <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> <p>hello there, I am a paragraph.</p> IDM 221: Web Authoring I 24 Let's try some simple examples in our editor.

25 Comments <!DOCTYPE html> <!-- This document display the home page --> IDM 221: Web Authoring I 25 Here is an example of how to code HTML comments. One common use of comments is to describe or explain portions of code.

26 Comments <body> <h1>my Home Page</h1> <!-- <ul> <li>eagles</li> <li>flyers</li> <li>phillies</li> <li>76ers</li> </ul> --> <p>contact us... IDM 221: Web Authoring I 26 Another common use of comments is to comment out a portion of the code. This is useful when you're testing a web page and you want to temporarily disable a portion of code that you're having trouble with.

27 Whitespace <html lang="en"> <head> <meta charset="utf-8"> <title>my Document Title</title> </head> <body> <h1>welcome to my page.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </body> </html> IDM 221: Web Authoring I 27 Whitespace is ignored when an HTML document is rendered. You can use the whitespace characters to format your HTML, so it is easier to read. In this example, you can see how whitespace has been used to indent and align the HTML elements. This is considered a best practice. Although whitespace doesn't effect the way an HTML document is rendered, it does take up space in the HTML file. As a result, you shouldn't overdo your use of it. Just use enough to make your code easy to ready.

28 A"ributes <!-- opening tag, one attribute --> <a href="contact.html"> <!-- opening tag, three attributes --> <a href="contact.html" title="click to contact us" class="nav_link"> <!-- empty tag attributes --> <img src="logo.gif" alt="logo"> IDM 221: Web Authoring I 28 Attributes are coded within the opening tag of an element or within an empty tag. For each attribute, you code the attribute name, an equals sign, and then the attribute value.

29 A"ributes <!-- Boolean attribute --> <input type="checkbox" name="maillist" checked> IDM 221: Web Authoring I 29 A Boolean attribute can have just two values, which represent either on or off. To turn a Boolean attribute on, you code the name of the attribute. In this example, The check attribute turns the attribute on, which causes the related checkbox to be checked when it is rendered by the browser. If you want the attribute to be off when the pages remember, you don't go the attribute.

30 Iden%fying elements <!-- `id` attribute --> <div id="page"> <!-- `class` attribute --> <a href="contact.html" class="nav_link"> IDM 221: Web Authoring I 30 This example illustrates the use of two attributes that are commonly used to identify HTML elements. The ID attribute is used to uniquely identify just one element, so each ID attribute must have a unique value. The class attribute can be used to mark one or more elements, so the same value can be used for more than one class attribute.

31 HTML Valida+on IDM 221: Web Authoring I 31 To validate and HTML document, you use a program where website for that purpose. One of the most popular websites for validating HTML is the one for the W3C markup validation service. When you use this website, you can provide the HTML document that you want to validate and three ways. You can provide the URL for the page. You can upload the document. And you can copy and paste the document into the Validate by Direct Input tab. Once that's done, you click the Check button to validate the document.

32 IDM 221: Web Authoring I 32 If the HTML code is valid when the document is validated, the validator displays a message to that effect. If the code contains errors, the message will indicate the number of errors that were detected. Then, you can scroll down to a list of the errors.

33 Version control IDM 221: Web Authoring I 33 Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. If you want to keep every version of a file or project, a Version Control System (VCS) is a very wise thing to use. It allows you to revert files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also generally means that if you screw things up or lose files, you can easily recover. In addition, you get all this for very little overhead.

34 GIT IDM 221: Web Authoring I 34 Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes.

35 Try GIT try.github.io IDM 221: Web Authoring I 35 Lets try it out!

36 GUI Git Clients GitHub Desktop Source Tree IDM 221: Web Authoring I 36

37 Source Tree GUI IDM 221: Web Authoring I 37

38 IDM 221: Web Authoring I 38 Setup git accounts like GitHub and Bitbucket within the app so that repositories can be pushed/pulled from any account(s).

39 IDM 221: Web Authoring I 39 You can create a local repository out of any folder on your computer. Note that you can also select to have the new repository be created remotely as well.

40 IDM 221: Web Authoring I 40 You can create a remote repository directly from the app. This can also be done by logging into your GitHub/BitBucket account via the web browser.

41 IDM 221: Web Authoring I 41 Once the repo is setup, you can view the current status in the workspace to review files and changes that have been made.

42 IDM 221: Web Authoring I 42 Here's a look at our initial files for our project.

43 IDM 221: Web Authoring I 43 SourceTree shows the new files as unstaged, meaning they are in our repository folder but have not yet been added to the repository.

44 IDM 221: Web Authoring I 44 Add the files (stage) to prepare the changes for submission to the repository. Add a commit message to for the log. Git messages should explain what and why as opposed to how.

45 IDM 221: Web Authoring I 45 Once the files have been committed to the local repository, you should sync (push) the updates to the remote copy of the repository.

46 GitHub Desktop GUI IDM 221: Web Authoring I 46 A live demo of the software.

47 What goes in a repo?.html.css.js.md IDM 221: Web Authoring I 47 The repository should be free of bloat, and contain the source files for your project. Media assets should not be included in your repository, even if they are part of your project.

48 What does not go in a repo?.psd.ai.jpg.mov.mp4 IDM 221: Web Authoring I 48 Media files add tremendous bloat to your repository. They should be stored and hosted separately from the repository files. Some examples include this list of binary file types.

49 .gi$gore Windows Mac Linux IDM 221: Web Authoring I 49 You can create a.gitignore file and include it in your repository as a list of files/file types to be specifically ignored when maintaining the repository files. Let's take a look at the.gitignore file for this IDM project.

50 For Next Week... IDM 221: Web Authoring I 50 Draw a sitemap example on whiteboard.