Web Development Part 3 · Web viewof the page, the presentation (colors, fonts, and much more) ->...

1

Web Development Part 3

Web Directory Structure/Debugging

HTML, CSS, and JavaScript serve different purposesWe have looked at the 3 languages of the Web that we are using in our projects:

HTML: HyperText Markup Language – determines structure of the page content -> the SKELETON

CSS: Cascading StyleSheets – determines appearance of the page, the presentation (colors, fonts, and much more) -> the SKIN

JS: JavaScript – determines actions on the page, the behavior. For example, what happens when you click a button, hover with the mouse, or when the page loads -> the MUSCLE

Remember that the W3 Schools Tutorials are an excellent resource for learning these languages and many other Web Development skills

Good Web Architecture Separates out the code into files per purpose HTML pages should contain only the structural elements and should not be cluttered with code

(CSS) that sets appearance or determines behavior (JavaScript) The root directory contains the starting Web page for the site, typically index.html. The root

directory should not be cluttered with a lot of additional files Typically, a Web site’s folder structure will reflect this “separation of concerns” by having

separate folders below the root folder, one folder for each type of code or asseto Root Directory: Every Web site starts with a root directory; the base URL to access the

site will point here. The starting HTML page resides in the root directoryo Subdirectory for Stylesheets: all CSS files go here; naming convention for the folder is

“css” or “styles”o Subdirectory for Images: all images go here; naming convention for the folder is

“images”. If a site has a lot of images they will be organized in subdirectories below that o Subdirectory for JavaScript: all .js files go here; naming convention for the folder is “js”

or “scripts”o Additional Subdirectories as appropriate for the site: a “fonts” directory is common; in

the example below there is a “sound” subdirectory Directory structure of our HTML5 Games project: The actual Root directory for

the entire Web site is whatever you named your Repository; something like “learnhtml5-games”. Each game has its own subdirectory (named Chapter n) below the root. Chapter 4 contains a pretty good example of organization of subdirectories by type:

© Fox Valley Girls Coding Club Web Development Part 3

2

An Exercise in Cleaning up the Web Site StructureIn contrast to the organization of Chapter 4, the code for Chapter 3 violates best practices by including all of the CSS style code and the JavaScript script code inside the index.html file. Let’s clean this up to make it easier to work with the project:

STEP1: Create a subdirectory for the css: With your cursor on the “Chapter 3” folder, right-click and select “New Folder”

Change its name from “New Folder” to “css”

STEP2: Create a file for the css in the css directory With the new css folder selected, from the top menu choose File --> New From Template --> CSS

File to create a new file; it will open in the editor as “untitled.css”


3

Rename it to “styles.css” with File --> Save As; make sure it is saving to the css directory

STEP3: Move the style code from the index.html file to the new css file Select the style element: Open Chapter 3’s index.html file in the code editor and find the

<style> tag in the <head> element (starts at line 6). Collapse the entire <style></style> section by clicking the small downward arrowhead in the margin by the line number.

o Note: if you do not see the little arrowheads by the line numbers, turn on code folding from the menu Edit --> Code Folding --> Toggle Fold

Cut and paste the styles: Select the line <style>…</style>, right-click to choose “cut”; then go to your styles.css tab in the code editor and right-click “paste”

Remove the <style> tags: In the styles.css code remove the <style> and </style> tags at the top and the end of the file; these were needed in the index page but not in the stylesheet

STEP4: Modify the file paths in the css Relative Paths: The styles in the CSS for this project include paths to images and fonts; each of these file paths is a relative path based on where the image or font is in relation to where the CSS file resides. For example, the way to display the image for the “good guy” is originally defined in the CSS like this:

.track span[data-name='goodGuy'] {

background: url("img/good-guy-icon.png") no-repeat;

}

The URL says: you will find the “img” directory at the same level of the directory tree as this CSS; look there for the image. This was correct when the CSS was in the index.html file because it does indeed reside at the same level as the “img” folder.

The collapsed styles will be easier to copy


4

Now we need to navigate to the images from the CSS code in the styles.css file which resides within the css folder. The styles.css file is not at the same level as the “img” folder, but its parent, the css folder, is. Our URL’s therefore have to be adjusted to move up one level from the styles.css file to its parent folder. The symbol ../ (two periods followed by a forward slash) means move up one level in your directory path. This new URL says move up to my parent (i.e. parent of styles.css = css folder); you will find the “img” directory at that level

.track span[data-name='goodGuy'] {

background: url("../img/good-guy-icon.png") no-repeat;

}

Search the styles.css file for all occurrences of img/ and replace with ../img/

You can use Find --> Replace from the menu to open up the find/replace boxes below the code.

Bonus: Fix the font error: When running the game and using the Developer Tools in Chrome, notice that we get an errors that it can’t find the fonts. Look at the paths in the css for the fonts and see if you spot the problem.

Tip: Path to the Root: Especially if files are several levels deep in your directory structure it may be easier to use the full path to the Root directory rather than worrying about how many ../ are needed. The path to the root always starts with a forward slash. In Cloud9 you can easily get this full path by right-clicking a file in the directory tree and selecting Copy File Path. Then paste into your url parameter:


The path starts with “/” meaning start at the root “learnhtml5-games-

1”. Then move to the Chapter 3 subdirectory, then to the img

subdirectory to find the image.

5

STEP5: Link the stylesheet file to the index pageNow that we have the styles nicely organized in their own file we need to tell the index.html page how to get to those styles since they are no longer embedded in the page.

Add the Link in the Head element: In your index.html page we removed the <style></style> tags and the content between them. We need to add a link instead. Add this right below the title:

<link rel="stylesheet" href="css/styles.css" />

o Make sure that the directory/filename.css matches what you named yourso The rel attribute tells the page that the relationship is a stylesheet; the href tells it

where to find the file containing the styleso By putting this in the <head> we make the styles available to the Browser before it starts

to load the content in the <body>

STEP6: TEST to make sure the styles are being applied properly Run the project and make sure that the images load as expected If you make changes to css and are not seeing them, Shift-F5 to force Chrome to reload the css

STEP7: Create a subdirectory for the JavaScript With your cursor on the “Chapter 3” folder, right-click and select “New Folder” Change its name from “New Folder” to “js”

STEP8: Create a file for the js in the js directory With the new css folder selected, from the top menu choose File --> New From Template -->

JavaScript File to create a new file; it will open in the editor as “untitled.js” Rename it to “game.js” with File --> Save As; make sure it is saving to the js directory

STEP9: Move the JavaScript code from the index.html file to the new game.js file

Select the script element: In the code editor for the index.html file find the <script> tag in the <body> element. Collapse the entire <script></script> section by clicking the small downward arrowhead in the margin by the line number.

Cut and paste the JavaScript code: Select the whole line <script>…</script> containing the collapsed JavaScript code, right-click to choose “cut”; then go to your game.js tab in the code editor and right-click “paste”

Remove the <script> tags: In the game.js code remove the <script> and </script> tags at the top and the end of the file; these were needed in the index page but not in the js file

STEP10: Link the JavaScript file to the index pageAs we did with the styles, we need to tell the index.html page how to get to the JavaScript code since it is no longer embedded in the page. However, we add the link to the script in a different place than we did for the styles

Add the Script at the bottom of the <body> element: Find the closing body tag </body>. Just above </body> add the <script></script> tags back in, providing the src attribute with the path to the code


6

<script src="js/game.js"></script>

</body>

o Make sure that the directory/filename.js matches what you named yourso By putting this at the end of the body, the page is able to load and display content to the

user without waiting for potentially large scripts to load; user perception of speed is important

STEP11: TEST to make sure the code is hooked up correctly Run the project and make sure that when you click the Play button the game starts as expected


7

Debugging and Analysis with Developer ToolsDebugging tools are used not only to find “bugs” in the code but to analyze running code to understand what is going on. Since developers are very often working on projects that they did not code themselves, it is often one of the first steps the developer will take when tackling changes to an existing project.

Developer Tools in ChromeChrome provides excellent tools for Developers. As well, it is one of the 2 supported Browsers for Cloud9: Cloud9 Supported Browsers

To use Chrome’s Developer tools: Several ways to get to the Developer Tools while browsing a Web site

F12 function key – if on a laptop, you may have to toggle your function keys on; if it doesn’t work, use one of the other methods

Right-click something on the Web page and select “Inspect”. This opens the Developer Tools with the element you clicked on selected

Ctrl-shift-I Or from Chrome menu (the 3 stacked dots at upper right): More tools --> Developer Tools

Chrome Debugging Tutorial:This is a good tutorial for learning the basics of debugging. It explains how to set breakpoints to stop your code when an event happens (example is a mouse click) and to set a breakpoint to stop on a specific line of code.

Get Started with Debugging JavaScript in Chrome DevTools

Explore Colors: Look at your page in Chrome and hit the F12 key to bring up the Tools

In the Tools windows make sure “Elements” tab is selected on the left panel and “Styles” on the right

Select an element in your page that has some CSS specifying a color; in this example the styles.css stylesheet has defined a style for the track class. Select the div class = “track” element

Clicking on the colored square (the grey one in this example) brings up a color picker!!!

You can change the color format between hex, rgb, and others by clicking the little arrows Selecting by color name: If you click on the color number or name in your style you can type over it;

e.g. click on “#888” in the color:#888 line; then start typing “bl” to bring up a dropdown of all the named colors containing “bl”; you will see a lot of blues from which to choose

Preview different colors this way, when you find one you like note the value (hex, color name, RGBA, or whatever format you chose) so you can change it in your code

In your styles.css find .tracks .track and change background: #888 with the value you like


https://developers.google.com/web/tools/chrome-devtools/javascript/

Web Development Part 3 · Web viewof the page, the presentation (colors, fonts, and much more) ->...

Documents

Transcript of Web Development Part 3 · Web viewof the page, the presentation (colors, fonts, and much more) ->...