INTRODUCTION TO 

WEB DEVELOPMENT

Alberto Romeu -  @alrocar
Jorge Sanz - @xurxosanz

AGENDA


  1. HTML (15')
  2. CSS (15')
  3. JavaScript (60')
  4. 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>

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


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



Introduction to web development

By Alberto Romeu

Introduction to web development

Slides for the Open Source Opportunities in GIS Summer School, Open Web Services and Web Map Applications.

  • 5,295
Loading comments...

More from Alberto Romeu