Mannheim Web 2.0 Systems Development. Plan Being an early-adopter Web 2.0 technologies Mashups Google Earth and kml XQuery and eXist.

Slides:



Advertisements
Similar presentations
Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.
Advertisements

Introduction to JavaScript
The North American Carbon Program Google Earth Collection Peter C. Griffith, NACP Coordinator; Lisa E. Wilcox; Amy L. Morrell, NACP Web Group Organization:
Lesson 12- Unit L Programming Web Pages with JavaScript.
UFCEKG-20-2 Data, Schemas & Applications Lecture 6 The Web of Data, API’s & PHP.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
IS 360 Course Introduction. Slide 2 What you will Learn (1) The role of Web servers and clients How to create HTML, XHTML, and HTML 5 pages suitable for.
DSA week 161 XML Data and Schemas DSA Week 16. DSA week 162 News Bloglines wall of images –
DSA Week 151 Mashups, Google Earth and Geo-coding.
Week 23 - Revision1 Week 23 Revision DSA. Week 23 - Revision2 Agenda Section A: Multiple choice Section B: Problem-oriented questions Topics for revision.
Introduction to XQuery and eXist Week 17 DSA. DSA - XQuery2 XPath. Hierarchical file systems have been navigable with path expression since Unix –/abc/cde/../../efg.
Multiple Tiers in Action
Dynamic Web Pages Bert Wachsmuth. Review  Internet, IP addresses, ports, client-server, http, smtp  HTML, XHTML, XML  Style Sheets, external, internal,
UFIEKG-20-2 / 06 / Week 131 Data, Schemas and Applications Term 2 Week 13.
Introduction to XML Extensible Markup Language
RSS RSS is a method that uses XML to distribute web content on one web site, to many other web sites. RSS allows fast browsing for news and updates.
Chapter 14 Introduction to HTML
Web Design Basic Concepts.
Web Page Introduction. What is a web page? A web page is a text file containing markup language tags. –A markup language combines text and extra information.
Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.
CS 299 – Web Programming and Design CS299: Web Programming and Design Instructor: Dr. Fang (Daisy) Tang.
1 Homework / Exam Exam 3 –Solutions Posted –Questions? HW8 due next class Final Exam –See posted schedule Websites on UNIX systems Course Evaluations.
WaveMaker Visual AJAX Studio 4.0 Training Studio Overview.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
Additional Topics. Tutorial #9 Review – Forms Forms Legend and fieldset Fields Text Password Radio buttons, check box, text area, select lists Buttons.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
Server-side Scripting Powering the webs favourite services.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
XP New Perspectives on XML, 2 nd Edition Tutorial 10 1 WORKING WITH THE DOCUMENT OBJECT MODEL TUTORIAL 10.
Lecture 2 : Understanding the Document Object Model (DOM) UFCFR Advanced Topics in Web Development II 2014/15 SHAPE Hong Kong.
Tutorial 1: Getting Started with Adobe Dreamweaver CS4.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
Creating Web Documents XHTML Project II topics should be posted Start Forms Homework: Forms not required for midterm or project 2. At some point, read.
JavaScript is a client-side scripting language. Programs run in the web browser on the client's computer. (PHP, in contrast, is a server-side scripting.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
University of Sunderland CDM105 Session 5 Web Authoring Tools The past and present A history of web authoring tools and an overview of Macromedia Dreamweaver.
Lecture # 3 HTML and Arrays. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML.
Introduction to XML Extensible Markup Language. What is XML XML stands for eXtensible Markup Language. A markup language is used to provide information.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
JavaScript – Quiz #9 Lecture Code:
Creating Dynamic Web Pages Using PHP and MySQL CS 320.
Active Server Pages  In this chapter, you will learn:  How browsers and servers interacted on the Internet when the Internet first became popular 
Date : 3/3/2010 Web Technology Solutions Class: Application Syndication: Parse and Publish RSS & XML Data.
Website Development with PHP and MySQL Saving Data.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
ITCS373: Internet Technology Lecture 5: More HTML.
Intro to PHP IST2101. Review: HTML & Tags 2IST210.
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
 Previous lessons have focused on client-side scripts  Programs embedded in the page’s HTML code  Can also execute scripts on the server  Server-side.
HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.
CO1552 – Web Application Development Further JavaScript: Part 1: The Document Object Model Part 2: Functions and Events.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Creating Databases applications for the Web: week 2 Basic HTML review, forms HW: Identify unique source for asp, php, Open Source, MySql, Access.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
HTML Hyper Text Markup Language. The Basics u HTML documents contain “tags” which instruct the Browser software on how to present the information within.
10 Copyright © 2004, Oracle. All rights reserved. Building ADF View Components.
This is the software we will use to load our html page up to the server. You can download a copy for home if you want to.
HTML Hyper Text Markup Language. Agenda Basics Tools Important tags Tables & databases Forms Publishing at Stern.
HTML III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
Javascript and Dynamic Web Pages: Client Side Processing
Programming Web Pages with JavaScript
Mapping for the interwebs
Introduction and Principles
IS 360 Course Introduction
Presentation transcript:

Mannheim Web 2.0 Systems Development

Plan Being an early-adopter Web 2.0 technologies Mashups Google Earth and kml XQuery and eXist

Being an Early Adopter Learning new technologies when: –No official textbooks –No definitive documentation –You need to get ahead of the game Use –Examples –Discussion groups –Application Programmer interfaces –Reading page sources –Digging and delving –Experimenting with small examples, smaller changes to larger examples –Keep a lab book (or a blog) of results and lessons learnt

Web 2.0 Key ideas –Sharing information (blogs, wikis, RSS, ICQ/IM, social book-marking) –Information reuse (mashups, tagging A couple of Key Technologies –Hosted applications (Basecamp, Campfire, Stikipad) –Mapping –XML

Individual Task Start a blog The blog will be submitted for evaluation Exercise results should be entered into the blog, with discussion Later you can edit the spreadsheet of all blogs with your name and blog address

Wiki This wiki has been developed to provide an overview of Web 2.0 stuff for this class and another running next year. Task (during the day) –Add a new page to the wiki and link it in to the appropriate place. Document this and reference the new page in your blog

Mashups Combining information from multiple sources –Application gets data from a source Page-scraping (parsing HTML) Application Programmer Interface (API) –SOAP / REST /JavaScript functions RSS (Real Simple Syndication) E.g. –housing

TASK (in Pairs) Browse through ProgrammeableWeb and select a mash-up of interest. – Questions to answer and document in your blog: –What sources of information are being used? –How is the data obtained technically? –How are the sources combined –How useful is this mashup? –What questions does it raise?

Google Earth Google Earth is a client-side application (needs a download) so not used in this list of Mashups Location-based browsing will be a big thing

Google Earth Demo StudentsOnline Google Earth operations –Creating Folders –Creating Placemarks –Editing Location and Description –Editing Icons –Saving as kml Partner Organisations map

Google Earth Task (pairs) Decide on a trip (last holiday), place (home town), news event for the pair to document using GE, or the CEMS partner map Create an overlay 20 minutes only – can finish in your own time! Save as kml

Understanding kml Experimental: –Use a text editor (Notepad, PFE32) to load the text file, change a description, save and reload (after deleting the original) –Use Word 2003 to load the file – what doesit tell you about the file? Online documentation– the Google Earth specification Draw a tree diagram to explain the general structure

Understanding Latitude and Longitude Lines of equal latitude Lines of equal longitude (0, 0) of the West coast of Africa 0 longitude is the Greenwich Meridian 0 latitude is the Equator +,+ +, - Bristol 51 ° 27 ‘19.08 “ N 2 ° 35’ 30.76” W 1 minute of latitude = 1 Nautical Mile = miles 60 seconds in 1 minute 60 minutes in 1 degree 360 degrees in a full circle 1 minute of longitude goes to zero at the poles GE Reference system is WGS84

Geocoding To determine the latitude and longitude of an address or postcode US zipcodes geocoded UK Postcodes –commercially available in bulk –Individual geocoding in Google Earth, Google Map ? Other countries.

Advanced Google Earth Icons –Style can be designed For each Placemark For a set of placemarks by creating a style with an id Small icons can be selected from the big pallette png’s – each is 32* 32 pixels, arranged in 8 rows of 8, numbered 0- 7 from the bottom-left. Specific icons can be selected with the appropriate x, y, h, w parameters

XML Well-formed –Tags nested, attributes quoted, single root ‘Self-describing’ –So you can guess at the meaning of each item of data Terms –Root –Element –Attribute –Child and Parent –Typed values and CDATA Draw a diagram (however you like) to show the general structure of a kml file Review the structures

Using an XML database kml is just text, so any scripting programme can generate it (PHP, ASP JSP etc) kml is XML so any XML tools can process it an XML database –Stores XML documents (and other things) –Provides an XQuery interpreter to query the documents and to generate new documents.

Exist database Exist: Working System: Students OnlineStudents Online My links: Student server Sandbox interface for executing simple queries Admin interface for browsing collections JavaStart interface for adding resources, XML files and XQuery files to the database

XPath A language for selecting nodes in a tree structure - TreesTrees

XQuery Michael Kays’s 10 minute tutorial10 minute tutorial Exist is similar – can’t set the context node in the Sandbox, but only one file like this so queries should still work (ignore any leading.) Go on the FLOWR tutorial

XQueries in EXist You can store XQueries in Exist –Save to a text file –Using the webstart client, ad them to your user area –Execute them by using the admin interface to locate the script and running it.

Added functions XQuery Functions –See w3schools –String functions… Exist functions –See eXist functions –Input HTTP request parameters…

Example Trip spreadsheet Trip2kml.xql

Final task Your task in pairs is to choose a news story for Google news Find using Google or a geocoder the location of places relevant to the story The class will agree a common format for geocoded news stories Adapt the XML spreadsheet to hold the data you need about the story Adapt the trip2kml XQuery to convert your story into a kml file Collect all the stories into one collection Create a query to find all the news stories about places within N miles of a given location