Prof. Cesare Pautasso http://www.pautasso.info [email protected] Informatica08 – Atelier 2 1 Agenda 1. 2. 3. 4. Web 1.0 Web 2.0 Mashups Popfly.ms September 2008 Informatica08 – Atelier 2 September 2008 USI Mashups Workshop September 2008 3 USI Mashups Workshop • You will learn how the Web works • You will discover many new, useful and exciting Web 2.0 services • You will program your own Web application by mashing up existing Web services and data sources Informatica08 – Atelier 2 2 USI Mashups Workshop USI Mashups Workshop Progettazione di Applicazioni per Internet Atelier Objectives World Wide Web 1.0 September 2008 Informatica08 – Atelier 2 4 • The Web contains approx. 27.61 billion pages The Internet Archive contains almost 2 Petabytes of data and is currently growing at a rate of 20 Terabytes per month. URL Web Page URL URL Hyperlink HTML URL Web Architecture HTTP Client Informatica08 – Atelier 2 September 2008 USI Mashups Workshop 5 Uniform Resource Identifier • URI Examples: Server http://tools.ietf.org/html/rfc3986 URI Scheme Authority Path https://www.google.ch/search?q=rest&start=10#1 URL Query Web Server Web Browser 6 USI Mashups Workshop Informatica08 – Atelier 2 September 2008 Fragment Web Page September 2008 USI Mashups Workshop How big is the Web? http://www.worldwidewebsize.com/ • On the Web anyone can access, publish and share pages with multimedia information USI Mashups Workshop World Wide Web Informatica08 – Atelier 2 7 September 2008 Informatica08 – Atelier 2 8 <HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> <H1>Welcome to My Homepage</H1> Visit <A HREF=“http://www.unisi.ch”> My University</A> </BODY> </HTML> 9 World Wide Web 2.0 September 2008 Informatica08 – Atelier 2 Beginner’s tutorials: http://www.w3schools.com/HTML/ http://www.echoecho.com/it/htmlbasics.htm September 2008 11 Informatica08 – Atelier 2 10 USI Mashups Workshop Informatica08 – Atelier 2 Learning HTML By Example: whenever you find an interesting page, Look at the source! USI Mashups Workshop September 2008 USI Mashups Workshop USI Mashups Workshop Writing Web Pages What is Web 2.0? • Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform Web Service API Web The Cloud Browser September 2008 Informatica08 – Atelier 2 WebData Data Web Feeds Feeds 12 • Web 2.0 is about the convergence of different industry trends without necessarily implying a new revision of the underlying Web technologies Web 2.0 • More than online shopping www.amazon.com • Mapping of the whole planet www.maps.google.com • Share your best photos www.flickr.com • The future of television User Participation (Read+Write) www.youtube.com • Blogs, Wikis, and Social Networks www.blogger.com www.wikipedia.com www.delicious.com “New” Technology Informatica08 – Atelier 2 13 What is a blog? • blog – n. A Web log. – vi. To run a Web log. – n. a set of log entries, usually structured in reverse chronological order, published in a web-based personal journal Informatica08 – Atelier 2 Informatica08 – Atelier 2 14 What is RSS? RDF Site Summary… … or Rich Site Summary… … or Really Simple Syndication • An RSS Feed publishes a list of updates of a frequently changing Website (e.g., news headlines, blog entries, school events) • Users can subscribe to RSS feeds identified by URI and aggregate multiple feeds of interest using RSS readers. • RSS Feeds contain links to the original Web site so that more information for interesting items can be found • Web log September 2008 September 2008 USI Mashups Workshop September 2008 USI Mashups Workshop New Web Applications New Web Applications USI Mashups Workshop USI Mashups Workshop What is Web 2.0? 15 September 2008 Informatica08 – Atelier 2 16 <?xml version="1.0"?> <rss version="2.0"> <channel> <title>Cesare Pautasso</title> <link>http://www.pautasso.info</link> <description>My Lectures</description> <item> <title>Software Atelier III</title> <link>http://www.inf.unisi.ch/education/…</link> <description>Web Development Lab</description> </item> <item> <title>RESTful Web Services</title> <link>http://www.iks.ethz.ch/education/…</link> <description>A simpler way to build Web services</description> </item> </channel> </rss> 17 What is a Mashup? • • • Web Application composing existing Web services and Web data sources Ease of software reuse inspires innovation through original mix and assembly Revolution in Web development – anyone can do it! September 2008 September 2008 • • “Mashup” originates from musical domain Informatica08 – Atelier 2 19 18 What is a Mashup? • • Informatica08 – Atelier 2 USI Mashups Workshop Informatica08 – Atelier 2 Mashups USI Mashups Workshop September 2008 USI Mashups Workshop USI Mashups Workshop What’s inside an RSS feed? Aggregate content from more than one source – Public Web Service APIs – Extract data from existing Web pages – Additional local data owned by Mashup provider – User-provided information (shared wiki or “private”) Lightweight programming effort – Visual tools require little programming skills – HTML and JavaScript enough to get started Ad-hoc composition – Not concerned with long term stability and robustness September 2008 Informatica08 – Atelier 2 20 AJAX SOAP HTTP RSS Client September 2008 L XM P/ N T HT /JSO P T HT Mashup HTTP/RSS/ATOM Local Database Informatica08 – Atelier 2 Databases Web Data Feeds 21 Mashup Examples • • • • • • • weatherbonk.com doggdot.us flashearth.com wikimapia.org netvibes.com immo.search.ch swisstrains.ch USI Mashups Workshop Web Web Server Service APIs • Map Example: immo.search.ch – Not only Google Maps • Calendar/Timeline – Collection of Events Example: diggdot.us • Data Stream – Aggregated over multiple source feeds • Wiki – Shared Document Space • Portal Example: netvibes.com – Juxtaposed Web Widgets September 2008 USI Mashups Workshop Web Browser Mashup User Methaphors Informatica08 – Atelier 2 22 USI Mashups Workshop USI Mashups Workshop Mashup Architecture More Information • Cesare Pautasso, USI Faculty of Informatics – Atelier 3: Web Development Lab (2nd Year Bachelor Informatics) • http://delicious.com/cesare.pautasso/mashup • Eric Griffin, Foundations of Popfly Rapid Mashup Development, apress, 2008 • Raymond Yee, Pro Web 2.0 Mashups: Remixing Data and Web Services, apress, 2008 • http://www.programmableweb.com September 2008 Informatica08 – Atelier 2 23 September 2008 Informatica08 – Atelier 2 24 Agenda 1. Introduzione all’uso di Popfly 2. Mashup di prova 3. Pubblica il mashup sulla tua Homepage 4. Progetta il tuo mashup 5. … Popfly Popfly è una comunità online che permette ai suoi membri di creare, condividere, e valutare i propri mashups. Con Popfly anche chi non ha conoscienze di programmazione può facilmente creare il proprio mashup e condividerlo Sign In www.popfly.com “Sign In”, se non avete un account basta crearne uno cliccando su “Sign up” Popfly non lo si installa nel proprio computer, è sufficiente connettersi per usarlo tramite un browser al sito: www.popfly.com Settembre 2008 2 Informatica08 – Atelier 2 Settembre 2008 Informatica08 – Atelier 2 Settembre 2008 ID: [email protected] Password: pwd Informatica08 – Atelier 2 3 Settembre 2008 Informatica08 – Atelier 2 4 Maps: Images: Tools: Blocks window: I blocks rappresentano delle funzionalità (web services, tecnologie, ...) I blocks sono suddivisi per categorie Settembre 2008 5 Informatica08 – Atelier 2 Libreria Display: Tre icone: cancellare il block cercare blocks compatibili configurare il block Drag & Drop: I blocks possono essere semplicemente selezionati e trascinati nell'area di lavoro Selezionare “Create” >> “Mashup” Settembre 2008 Mashup Creator Block: I due cerchi blu permettono di connettere due blocks e rappresentano gli input e gli output della funzione Informatica08 – Atelier 2 6 Creare un mashup Configurare il block Operations: Operazione permesse getGeotaggedPhotos -> permette di aggiungere le foto su una mappa getPhotos -> ritorna solo le foto richieste ... News & RSS: Inputs: Value = input di default Source = da dove gli input arrivano Settembre 2008 Informatica08 – Atelier 2 7 Settembre 2008 Informatica08 – Atelier 2 8 Ogni block può avere degli input e degli output Gli input o parte di loro possono essere dei valori di default Gli output possono essere visualizzati oppure passati ad un'altro block come input La freccia che collega due blocks trasmette i dati di ouput dell'uno negli input dell'altro Connettere i blocks Input da definire Il segnale indica che c'è qualcosa da configurare nel block, ad esempio specificare l'input source. PhotoFlip.input = flickr.output Run Clicca su “Run” per testare il tuo mashup 10 Informatica08 – Atelier 2 Settembre 2008 9 Informatica08 – Atelier 2 Settembre 2008 Share My Stuff >> Projects Per poter essere usato e visto dall'esterno il progetto deve essere condiviso (Share) ... su “Edit” per cambiare il mashup Il progetto può sempre essere modificato con “Edit”, cancellato con “Delete”, e nascosto con “Unshare” ... su “Save” per salvare il mashup ... su “Html” per aggiungere del codice HTML Settembre 2008 Informatica08 – Atelier 2 11 Settembre 2008 Informatica08 – Atelier 2 12 Due possiblità per integrare il mashup in una pagina web Usando il “Web Page Creator” di Popfly Esercizi Ora provate voi a fare un mashup Visualizzare le immagini su una mappa “Create” >> “Web page” Permettere di visualizzare le immagini partendo da un input fornito dall'utente Copiando l'HTML fornito da Popfly all'interno della propria pagina Settembre 2008 Integrare il mashup in una pagina web Combinare e visualizzare le immagini provenienti da “Flickr” e “Yahoo Images” Elencare le notizie da un feed RSS Informatica08 – Atelier 2 13 Settembre 2008 Informatica08 – Atelier 2 14
Scarica
![proloco carnival[1] - PRO LOCO Scandiano](http://s2.diazilla.com/store/data/000123747_1-8b445159b7c9f9c88994d7e3c2e18821-260x520.png)
