introduction to web development
DESCRIPTION
Introduction to web development slides during the 4th UdG - SIGTE Summer SchoolTRANSCRIPT
INTRODUCTIONTO WEB
DEVELOPMENTAlberto Romeu - @alrocarJorge Sanz - @xurxosanz
AGENDA1. HTML (15')2. CSS (15')3. JavaScript (60')4. Lab (30')
WEBDEVELOPMENT
TOOLSA text editorA browserA web server
INTRO TO HTMLHyper Text Markup LanguageStandard for writing web pagesHTML Tags - 1991HTML 2.0 - 1995HTML 4.0 - 1997HTML 5.0 - ¿2014?
WHAT IS HTML?WEB PAGES that run in a web browser (client side)
<html>
<head> <meta charset="utf-8" /> <title>A tiny document</title> </head>
<body>
<p>My dog ate all the guacamole.</p>
</body></html>
THE DOCUMENTTREE
TAGS<tag>content</tag>
<span style="font-family: monospace;"><!--paragrapah--></span>
<span style="font-family: monospace;"><p>This is text within a paragraph.</p></span><br>
<br>
<!--nested tags-->
<p>I <strong>really</strong> mean that</p><br>
<br>
<!-- single elements -->
<img src="smileyface.jpg" /><br>
ATTRIBUTES<tag attributeName="attributeValue">content</tag>
<p id="myinput">
<br>
<p class="foo"><br>
<br>
<img src="picture.gif" width="40" height="20" alt="I am a picture" />
HEAD<head>
<meta name="keywords" content="HTML, CSS, JavaScript"><meta name="description" content="Intro to web dev"><meta name="author" content="Alberto Romeu"><meta http-equiv="refresh" content="30">
<title>Title of the document</title><br>
</head>
BODY <body>
Write here the content of your web page
</body>
HEADING <h1>I'm a very big heading</h1>
<br>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"> <h2>I'm a quite big heading</h2></span><br>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"> <h3>I'm a big heading</h3></span><span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"> <h4>I'm a heading</h4></span><span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;">.</span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;">.</span>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: normal; font-variant: normal;">.</span>
PARAGRAPH<p> Here’s a paragraph.</p><p> And here’s a different one. It’s as simple as that.</p>
LINE BREAK I’d like to write some text<br>and then have the next bit on the line below.
span<p>Here’s a paragraph of text. What I want to happen is to make <span style="font-weight:bold;"
link <a href="http://www.prodevelop.es" target="blank">This is a link</a>
IMAGE<img src="picture.jpg" width="104" height="142" />
<br>
<a href="http://www.prodevelop.es" target="blank">
<span style="font-family: monospace;"> <img src="picture.jpg" width="104" height="142"/></span>
</a>
DIVHere’s some content…<div>This is a div.</div><div>And this is another one. Works pretty much like a new paragraph for now.</div>Here’s some more content…
TABLE<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>
list<ul> <li>Coffee</li> <li>Milk</li></ul>
<br>
<ol> <li>Coffee</li> <li>Milk</li></ol><br>
html layouts<!DOCTYPE html><html><body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"<b>Menu</b><br>HTML<br>CSS<br>JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">I'm the footer</div>
</div>
</body></html>
FORM AND INPUT<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
<br>
<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form><br>
IFRAME <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
LEARNINGRESOURCES
Mozilla Intro to web development Intro to HTML W3Schools intro to HTML
INTRO TO CSSCascading Style SheetsStandard for styling HTML elementsCSS 1 1996CSS 2 1998CSS3 2012Browser support!! http://caniuse.com/
INTERNALSTYLESHEET
<head><title><title><br>
<style type=”text/css”>CSS Content Goes Here</style><br>
</head><body>
EXTERNALSTYLESHEET
<head><title><title><br>
<link rel=”stylesheet” type=”text/css” href=”style.css” /><br>
</head><body>
INLINE STYLES <p style=”color: #ff0000;”>Some red text</p>
CSS SYNTAXselector { property: value }
body { background: #eeeeee; font-family: “Trebuchet MS”, Verdana, Arial, serif;}
INHERITANCEbody {font-family: Verdana, serif;}
h1 {font-family: Georgia, sans-serif;}p {font-family: Tahoma, serif;}
TAG SELECTOR <p>this is a paragraph</p>
<span style="font-family: monospace;"> </span><span style="font-family: monospace;"
CLASS SELECTOR <span> <span class="greentext">I'm green</span></span>
.greentext {
font-size: small;
color: #008080;
}
id selector<div id="container">
This is a div
</div>
#container {
width: 80%;
margin: auto;
padding: 20px;
background: #ffffff;
border: 1px solid #666;
}
NESTEDSELECTORS
30 css selectors you must memorize
PROPERTIES CSS 2.1 properties
Comprehensive list of properties
LEARNINGRESOURCES
Intro to CSSCSS syntaxCSS basicsCSS selectorsCSS specsTwitter bootstrap
INTRO TOJAVASCRIPT
Scripting programming languageClient side (also server side)Interpreted (runtime evaluation)JavaScript 1.0 - 1996Javascript 1.8.5 - 2010
JAVASCRIPT INHTML
<script type="text/javascript">
</script>//JavaScript goes here
<script src="whatever.js" type="text/javascript"></script>
JAVASCRIPT LAB
JSONJavaScript Object NotationPlain TextHuman readableJSON.parse(), JSON.stringify()Faster, shorter, easier... than XML
THE DOCUMENTTREE
DOMDocument oBJECT MODEL
Access with JavaScriptBetter with jQuery
DOMvar element = document.getElementById("theID");
document.getElementByClass('a');
<br>
element.innerHTML = "Write the HTML";
<br>
element.style.color = "blue";
WEBPROGRAMMING
LAB
Complete the HTMLSet the title of the web pageAdd the link tag to import the profile.css fileAdd the script tag to import the profile.js fileAdd a VERY BIG header in the div 'container' with the id'myname'
COMPLETE THECSS
Change the body color to #444Set the container width to 800pxCreate a style for h2 tags
Change the weight, size and color of the font
COMPLETE THEJAVASCRIPTOpen the profile.jsWrite the code necessary after the comments
libraries vs
micro-frameworks VS
TOOLKITS
JAVASCRIPTLIBRARIES
A collection of functionality you can call.Integrated.Tested
BIG
JAVASCRIPT MICRO-FRAMEWORKS
Solves a single problemModularNot always integratedSmall
http://microjs.com/
javascript toolkitsSeveral libraries together Set of components you can use (or not) Integrated
BIGGER
widgetSjQuery UIExtJSMochaUIDijit
GraphicalD3RaphaelKineticThree
MAPPINGOpenLayersLeafletJS (MF)ModestMaps (MF)PolyMapS
MAPPING GUIMapQuery (jQuery)GeoExt (ExtJS)
LEARNINGRESOURCES
W3Schools JavaScript introMozilla Intro to JSJavaScript tutorialList of JavaScript librariesMapping libraries comparisonPros and cons of Micro-frameworks
