Download presentation
Presentation is loading. Please wait.
1
Web Development Workshop
Cognitive Science 187A Winter 2014 Chris Keown Maybe start with something empowering. Why they should care? Why, not how. Steve Jobs had to buy stuff for his business, but this is pretty much free. Facebook is just a website. Ask them questions a little until I get comfortable. Mention our objectives for this workshop.
2
Pieces of the Puzzle HTML Add in CSS And finally jQuery
3
File Structure to Use
4
HTML - Basic Page Structure
<!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> Main content goes here </body> </html> HTML is not case sensitive. Most tags come in pairs, an opening and closing tag, with the content in between them. Line breaks and indentation are not required, but they make the code much more readable!
5
Basic HTML Tags Paragraph <p>Paragraph Text</p>
Image – absolute path <img src=“ /> Image – relative path <img src=“img/UCSD_logo.png” /> Link Text <a href=“ Tritons!</a> Image link <a href=“ src=“ width=“200”></a> Image and br tag don’t have a pair closing tag. Height on second image tag. Search for UCSD logo using Google Image. Show how to save the images and also how to copy the URL. Demo some code. Wouldn’t it be nice if there were a way to control the height of the images? Google “html img tag” and go to w3schools. Wouldn’t it be nice if we could change the font a bit and put line breaks where we want? Height with the image
6
Basic HTML Tags <!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <p>Paragraph Text</p> <img src=“ /> <a href=“ Tritons!</a> <a href=“ src=“ width=“200” /></a> </body> </html>
7
More Basic HTML Tags Block elements take up the whole line, and inline elements do not. Read more: Line break <br /> Headings <h1>My biggest heading</h1> … <h6>My smallest heading</h6> Bold <strong>HELP!</strong> Italics <em>Italicize me</em> Don’t forget comments <!-- Please ignore this stuff. --> In case they ask: Use <b> when you want the text to have a different style without contextual importance, but use <strong> when you want the text to have extra importance from a content or SEO perspective.
8
Lists <!-- unordered list --> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <!-- ordered list --> <ol> </ol>
9
Tables <table> <thead> <tr> <th>Student ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <td>A12345</td> <td>Bob</td> <td>Jones</td> <td>A54213</td> <td>Brandy</td> <td>Smith</td> </tbody> </table>
10
Forms <form action="next_page.php" method="get"> <label>First Name:</label> <input type="text" name="firstname" value="" /><br /> <label>Last Name:</label> <input type="text" name="lastname" value="" /><br /> <label>Gender:</label> <select name="gender"> <option value="young">10-20</option> <option value="middle">30-60</option> <option value="notsoyoung">60+</option> </select><br /> <input type="radio" name="gender" value="male" />Male<br /> <input type="radio" name="gender" value="female" />Female <br /> <input type=“reset” value=“Reset” /> <input type=“submit” value=“Submit” /> </form>
11
Give It Some Style Everything looks bland so far! How do we spice it up? Control the font size? Change the color of text and the background? Control the placement and alignment of content? Enter Cascading Style Sheets (CSS) and the style tag Remove CSS from facebook.com and hulu.com. Go to developer tools and search for “stylesheet.”
12
Inline CSS Two problems:
<p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>First paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Second paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Third paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Fourth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Fifth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Sixth paragraph</p> <p style=“font-size: 20px; color: red; text-decoration: underline; font-weight: bold”>Seventh paragraph</p> Two problems: We have to type the same text over and over and over—or copy and paste it many times. If we change the style, we have to change it in many places.
13
Style Sheets HTML File main.css
<!DOCTYPE html> <html> <head> <title>My title</title> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="maintext">First paragraph</p> <p class="maintext">Second paragraph</p> <p class="maintext">Third paragraph</p> <p class="maintext">Fourth paragraph</p> <p class="maintext">Fifth paragraph</p> <p class="maintext">Sixth paragraph</p> <p class="maintext">Seventh paragraph</p> </body> </html> .maintext { font-size: 20px; color: red; text-decoration: underline; font-weight: bold; }
14
CSS Format file.css /* Comments */ selector { property: value; … }
15
Common CSS Properties selector { Set the font size: font-size
property: value; … } Set the font size: font-size Set the color: color Set the background color: background-color Set the text alignment: text-align Set the height or width: height, width Set the padding or margin: padding, margin Large list of CSS properties can be found here:
16
CSS Selectors selector { property: value; … }
Set every paragraph to have font-size 12px: p { font-size: 12px; } Set every paragraph tag with class “maintext” to have font size of 12px: p.maintext { font-size: 12px; } Set anything with class “maintext” to have font size of 12px: .maintext { font-size: 12px; } Set every paragraph and link to have font-size of 12px: p, a { font-size: 12px; } General selector: set every font-size on the entire page to be 12px: * { font-size: 12px; }
17
CSS Pseudo-classes selector {
property: value; … } Psuedo-classes are use to add special effects to some selectors. Set all links to the color blue. Have links turn green if they have been visited: a:link { color: blue; } a:visited { color: green; } Have links turn red when the cursor rolls over them: a:hover { color: red; } They are several other pseudo-classes. Read more here:
18
Classes versus IDs HTML File main.css
<!DOCTYPE html> <html> <head> <link href="main.css" rel="stylesheet" type="text/css" /> <title>My title</title> </head> <body> <img id=“logo” src=“logo_url.gif” /> <p class="maintext">First paragraph</p> <p class="maintext">Second paragraph</p> <p class="maintext">Third paragraph</p> <p class="maintext">Fourth paragraph</p> <p class="maintext">Fifth paragraph</p> <p class="maintext">Sixth paragraph</p> <p class="maintext">Seventh paragraph</p> </body> </html> /* maintext is a CSS class. You can use it as many times as you like. */ .maintext { font-size: 20px; color: red; text-decoration: underline; font-weight: bold; } /* The hash tag (pound sign) means logo is an ID. You can only use it once in your entire HTML file. */ #logo { height: 100px; width: 200px; }
19
Layout Discuss briefly the design process and how we cut things up. Trade off of images and text.
20
Common Layouts Discuss briefly the design process and how we cut things up. Trade off of images and text.
21
Building the Layout <div> tag defines a section, or division, of a webpage and is used to structure the layout of the page. 960 x 50 960 x 50 660 x ?? *After doing this slide, do the demo. Then do the box model.* Demo the box model and then build out the div structure. Container/wrapper 660 x ?? 300 x ?? 960 x 50
22
Code for Previous Layout
HTML File main.css <!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div id="container"> <div id="header">Header</div> <div id="navigation">Navigation</div> <div id="sidebar">Sidebar</div> <div id="maincontent"> <div id="article">Article</div> <div id="section">Section</div> </div> <div id="footer">Footer</div> </body> </html> #container { width: 960px; margin: 10px auto 10px; } #header { height: 50px; float: left; #navigation { #sidebar { width: 300px; #maincontent { width: 660px; #article { #section { #footer { Show box model and that it works with other block elements. Inline elements behave a little differently. When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other. You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.
23
Box Model Elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify. The margin is the space around the element. The border is the edge of the element. The padding is the spacing between the content and the border. The content is the actual "stuff" in the box.
24
Chrome Developer Tools
25
Developer Tools The primary purpose of Chrome Developer Tools is to help you troubleshoot your code! Why is this link not red like I told it to be? Why is div in the wrong place? Where did my margin go? Why is my page not centered? FireFox also has a set of developer tools. If you see a webpage you like and want to mimic it, developer tools are useful for inspecting and understanding the webpage code. Advice: If you have are an issue with your code, Google it. The answers are all there; you just have to find them. Show the two ways to get to the tools. Usually you will come in using inspect element. Change some stuff in the right menu. Edit some HTML directly. Show the box model image at the bottom.
26
The Evolving Web Code doesn’t necessarily render the same in different browsers. Cross-browser testing is becoming less of a nuisance but still important. Know your audience. What browsers are they using? HTML5 has better support for audio and video, moving away from Adobe’s Flash. They have also created new tags such as <header>, <nav>, <aside> and <footer> to make layout more central to HTML. Read more about HTML 5: Mention that Google is helping to change the xbrowser issue with auto updates.
27
jQuery jQuery allows us to manipulate HTML and CSS after the page has been loaded, more formally known as the DOM (Document Object Model). It makes the pages dynamic. We can open and close things, drag stuff around, animate, etc. Two major aspects: Writing our own code using the jQuery API: Plugins: use other people’s code: Code Academy has a good tutorial to learn more about jQuery. Use hulu as a demo of jQuery Animation -> Scrollorama Slideshow -> jCarousel
28
jQuery Events: http://api.jquery.com/category/events/
Resize(), scroll(), submit(), click(), hover() Function calls: Hide, removeClass, addClass, animate, attribute, click, css, fadeIn, fadeOut Explain DOM
29
Sample jQuery HTML File main.css #container {
<!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="main.css"> <script src=" <script> $(document).ready(function(){ $("a.open").click(function(){ // Change the div display // $('#section').show(); // Change the content $('#section').html("Now I say open."); }); $("a.close").click(function(){ // $('#section').hide(); $('#section').html("Now I say close."); </script> </head> <body> <div id="container"> <div id="header">Header</div> <div id="navigation">Navigation</div> <div id="sidebar">Sidebar</div> <div id="maincontent"> <div id="article"> <a class="open" href="javascript:void(0);">Open Section</a><br /> <a class="close" href="javascript:void(0);">Close Section</a> </div> <div id="section">Section</div> <div id="footer">Footer</div> </body> </html> #container { width: 960px; margin: 10px auto 10px; } #header { height: 50px; float: left; #navigation { #sidebar { width: 300px; #maincontent { width: 660px; #article { #section { #footer {
Similar presentations
