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

		

	


	

		

		

			

			

		

	








	

		

			

					

						Made with Slides.com
					

				

					
					
				

			


			

				
				
			

		


		

			
		


		


		

			

				
Introduction to web development

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

				
    
					
  • 
						
						
					
    • 
					
  • 
						
						
					
    • 
					
  • 
						
						7,753
					
    • 
				

			


			

			

		

	


	

		
More from Alberto Romeu