INTRODUCTION TO
WEB DEVELOPMENT
Alberto Romeu -
@alrocar
AGENDA
- HTML (15')
- CSS (15')
- JavaScript (60')
- Lab (30')
WEB DEVELOPMENT TOOLS
- A text editor
- A browser
- A web server
INTRO TO HTML
- Hyper Text Markup Language
- Standard for writing web pages
- HTML Tags - 1991
- HTML 2.0 - 1995
- HTML 4.0 - 1997
- HTML 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>
1
THE DOCUMENT TREE
TAGS
<tag>content</tag>
<!--paragrapah-->
<p>This is text within a paragraph.</p>
<!--nested tags-->
<p>I <strong>really</strong> mean that</p>
<!-- single elements -->
<img src="smileyface.jpg" />
ATTRIBUTES
<tag attributeName="attributeValue">content</tag>
<p id="myinput">
<p class="foo">
<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>
</head>
BODY
<body>
Write here the content of your web page
</body>
HEADING
<h1>I'm a very big heading</h1>
<h2>I'm a quite big heading</h2>
<h3>I'm a big heading</h3>
<h4>I'm a heading</h4>
.
.
.
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;">some of the text bold</span></p>
link
<a href="http://www.prodevelop.es" target="blank">This is a link</a>
IMAGE
<img src="picture.jpg" width="104" height="142" />
<a href="http://www.prodevelop.es" target="blank">
<img src="picture.jpg" width="104" height="142"/>
</a>
DIV
Here’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>
<ol> <li>Coffee</li> <li>Milk</li> </ol>
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>
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
IFRAME
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
LEARNING RESOURCES
INTRO TO CSS
- Cascading Style Sheets
- Standard for styling HTML elements
- CSS 1 1996
- CSS 2 1998
- CSS3 2012
- Browser support!! http://caniuse.com/
INTERNAL STYLESHEET
<head> <title><title>
<style type=”text/css”> CSS Content Goes Here </style>
</head> <body>
EXTERNAL STYLESHEET
<head> <title><title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head> <body>
INLINE STYLES
<p style=”color: #ff0000;”>Some red text</p>
CSS SYNTAX
selector { property: value }
body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}
INHERITANCE
body {font-family: Verdana, serif;}
h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}
TAG SELECTOR
<p>this is a paragraph</p>
p {font-family: Tahoma, serif;}
CLASS SELECTOR
<span class="greentext">I'm green</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;
}
NESTED SELECTORS
PROPERTIES
LEARNING RESOURCES
INTRO TO JAVASCRIPT
- Scripting programming language
- Client side (also server side)
- Interpreted (runtime evaluation)
- JavaScript 1.0 - 1996
- Javascript 1.8.5 - 2010
JAVASCRIPT IN HTML
<script type="text/javascript">
//JavaScript goes here
</script>
<script src="whatever.js" type="text/javascript"></script>
JAVASCRIPT LAB
JSON
- JavaScript Object Notation
- Plain Text
- Human readable
- JSON.parse(), JSON.stringify()
- Faster, shorter, easier... than XML
THE DOCUMENT TREE
DOM
Document oBJECT MODEL
- Access with JavaScript
- Better with jQuery
DOM
var element = document.getElementById("theID");
document.getElementByClass('a');
element.innerHTML = "Write the HTML";
element.style.color = "blue";
WEB PROGRAMMING LAB
Complete the HTML
- Set the title of the web page
- Add the link tag to import the profile.css file
- Add the script tag to import the profile.js file
- Add a VERY BIG header in the div 'container' with the id 'myname'
COMPLETE THE CSS
- Change the body color to #444
- Set the container width to 800px
- Create a style for h2 tags
- Change the weight, size and color of the font
COMPLETE THE JAVASCRIPT
- Open the profile.js
- Write the code necessary after the comments
libraries
vs
micro-frameworks
VS
TOOLKITS
JAVASCRIPT LIBRARIES
- A collection of functionality you can call.
- Integrated.
- Tested
-
BIG
JAVASCRIPT MICRO-FRAMEWORKS
- Solves a single problem
- Modular
- Not always integrated
- Small
- http://microjs.com/
javascript toolkits
-
Several libraries together
-
Set of components you can use (or not)
-
Integrated
-
BIGGER
widgetS
- jQuery UI
- ExtJS
- MochaUI
- Dijit
Graphical
- D3
- Raphael
- Kinetic
- Three
MAPPING
- OpenLayers
- LeafletJS (MF)
- ModestMaps (MF)
- PolyMapS
MAPPING GUI
- MapQuery (jQuery)
- GeoExt (ExtJS)
LEARNING RESOURCES
Copy of Introduction to web development
By Prashanth Reddy
Copy of Introduction to web development
Slides for the Open Source Opportunities in GIS Summer School, Open Web Services and Web Map Applications.
- 921