Introduction to web development

740 views

Published on

Introduction to web development slides during the 4th UdG - SIGTE Summer School

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to web development

  1. 1. INTRODUCTION TO WEB DEVELOPMENT Alberto Romeu - @alrocar Jorge Sanz - @xurxosanz
  2. 2. AGENDA 1. HTML (15') 2. CSS (15') 3. JavaScript (60') 4. Lab (30')
  3. 3. WEB DEVELOPMENT TOOLS A text editor A browser A web server
  4. 4. 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?
  5. 5. 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>
  6. 6. THE DOCUMENT TREE
  7. 7. 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> <!--nested tags--> <p>I <strong>really</strong> mean that</p><br> <br> <!-- single elements --> <img src="smileyface.jpg" /><br>
  8. 8. 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" />
  9. 9. 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>
  10. 10. BODY <body> Write here the content of your web page </body>
  11. 11. HEADING <h1>I'm a very big heading</h1> <br> <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n <span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n
  12. 12. PARAGRAPH <p> Here’s a paragraph. </p> <p> And here’s a different one. It’s as simple as that. </p>
  13. 13. LINE BREAK I’d like to write some text<br>and then have the next bit on the line below.
  14. 14. span <p>Here’s a paragraph of text. What I want to happen is to make <span style="font-w
  15. 15. link <a href="http://www.prodevelop.es" target="blank">This is a link</a>
  16. 16. 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=" </a>
  17. 17. 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…
  18. 18. 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>
  19. 19. list <ul> <li>Coffee</li> <li>Milk</li> </ul> <br> <ol> <li>Coffee</li> <li>Milk</li> </ol><br>
  20. 20. 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:le Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> I'm the footer</div> </div> </body> </html>
  21. 21. 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>
  22. 22. IFRAME <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
  23. 23. LEARNING RESOURCES Mozilla Intro to web development Intro to HTML W3Schools intro to HTML
  24. 24. INTRO TO CSS Cascading Style Sheets Standard for styling HTML elements CSS 1 1996 CSS 2 1998 CSS3 2012 Browser support!! http://caniuse.com/
  25. 25. INTERNAL STYLESHEET <head> <title><title> <br> <style type=”text/css”> CSS Content Goes Here </style> <br> </head> <body>
  26. 26. EXTERNAL STYLESHEET <head> <title><title> <br> <link rel=”stylesheet” type=”text/css” href=”style.css” /> <br> </head> <body>
  27. 27. INLINE STYLES <p style=”color: #ff0000;”>Some red text</p>
  28. 28. CSS SYNTAX selector { property: value } body { background: #eeeeee; font-family: “Trebuchet MS”, Verdana, Arial, serif; }
  29. 29. INHERITANCE body {font-family: Verdana, serif;} h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;}
  30. 30. TAG SELECTOR <p>this is a paragraph</p> <span style="font-family: monospace;"> </span><span style="font-family: monospace;"
  31. 31. CLASS SELECTOR <span> <span class="greentext">I'm green</span></span> .greentext { font-size: small; color: #008080; }
  32. 32. id selector <div id="container"> This is a div </div> #container { width: 80%; margin: auto; padding: 20px; background: #ffffff; border: 1px solid #666; }
  33. 33. NESTED SELECTORS 30 css selectors you must memorize
  34. 34. PROPERTIES CSS 2.1 properties Comprehensive list of properties
  35. 35. LEARNING RESOURCES Intro to CSS CSS syntax CSS basics CSS selectors CSS specs Twitter bootstrap
  36. 36. INTRO TO JAVASCRIPT Scripting programming language Client side (also server side) Interpreted (runtime evaluation) JavaScript 1.0 - 1996 Javascript 1.8.5 - 2010
  37. 37. JAVASCRIPT IN HTML <script type="text/javascript"> </script> //JavaScript goes here <script src="whatever.js" type="text/javascript"></script>
  38. 38. JAVASCRIPT LAB
  39. 39. JSON JavaScript Object Notation Plain Text Human readable JSON.parse(), JSON.stringify() Faster, shorter, easier... than XML
  40. 40. THE DOCUMENT TREE
  41. 41. DOM Document oBJECT MODEL Access with JavaScript Better with jQuery
  42. 42. DOM var element = document.getElementById("theID"); document.getElementByClass('a'); <br> element.innerHTML = "Write the HTML"; <br> element.style.color = "blue";
  43. 43. WEB PROGRAMMING LAB
  44. 44. 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'
  45. 45. 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
  46. 46. COMPLETE THE JAVASCRIPT Open the profile.js Write the code necessary after the comments
  47. 47. libraries vs micro-frameworks VS TOOLKITS
  48. 48. JAVASCRIPT LIBRARIES A collection of functionality you can call. Integrated. Tested BIG
  49. 49. JAVASCRIPT MICRO-FRAMEWORKS Solves a single problem Modular Not always integrated Small http://microjs.com/
  50. 50. javascript toolkits Several libraries together Set of components you can use (or not) Integrated BIGGER
  51. 51. widgetS jQuery UI ExtJS MochaUI Dijit
  52. 52. Graphical D3 Raphael Kinetic Three
  53. 53. MAPPING OpenLayers LeafletJS (MF) ModestMaps (MF) PolyMapS
  54. 54. MAPPING GUI MapQuery (jQuery) GeoExt (ExtJS)
  55. 55. LEARNING RESOURCES W3Schools JavaScript intro Mozilla Intro to JS JavaScript tutorial List of JavaScript libraries Mapping libraries comparison Pros and cons of Micro-frameworks

×