Post on 13-Jan-2015
description
Web-enhanced teaching and learning environment
S.Lariccia Sapienza Università di Roma – Medialab Centre
stefano.lariccia@uniroma1.it
Education is deeply changing. And becoming more and more universal
Web-enhanced teaching and learning environment
Day2 Lesson 1: An introduction on the Web evolution, 1989-1999
Education is deeply changing. And becoming more and more universal
YOUR LOGO
Day 1: A more detailed view on the Eurodidaweb programme
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
Day 3: e-learning: an introduction to LMS Moodle
Day 4: From e-learning to web-enhanced learning
Day 5: Web 2.0, Semantic Web and web-learning
1
2
3
4
5Conclusion
Objectives and expectations
Evaluation
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 4
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusions
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 5
Placeholder for your content description
This text can be replaced with your own text
This is a placeholder text
This is a placeholder text
1
2
3
4
5
Placeholder for your content description
Placeholder for your own subheadline
YOUR LOGOPage 6
The World Wide Web (commonly abbreviated as "the Web") is a system of interlinked hypertext documents accessed via the Internet The underlying ideas of the Web can be traced as far back as 1980, when, at
CERN in Switzerland, Sir Tim Berners-Lee built ENQUIRE
On 1989 was launched the "Hypertext project" called "WorldWideWeb" as a "web of nodes" with "hypertext documents" to store data.
A NeXT Computer was used by Berners-Lee as the world's first Web server and also to write the first Web browser, WorldWideWeb, in 1990. By Christmas 1990, Berners-Lee had built all the tools necessary for a working Web: the first Web browser (which was a Web editor as well), the first Web server, and the first Web pages which described the project itself.
Berners-Lee's breakthrough was to marry hypertext to the Internet.
.
The WorldWideWeb, first steps
YOUR LOGO
A brief history of the digital technology universe…
First came the Computer 1950
then the Apple Computer … 1975
then the Personal Computer 1984
then the Network Computer 1999
Today, the Net IS the Computer
'The network is the computer'," said Sun CEO Scott McNealy, 2001
YOUR LOGO
First was Internet .. then came the WorldWideWeb
First came Internet => 1969
…and 100.000 geeks in the the world became aware of Internet
Then came the Web => 1989
… and shortly 100.000.000 of common people in the the world were starting to use Internet
Eventually, today 1.000.000.000 of common people in the the world are using Internet, by mean of the WorldWideWeb, at the simplest level
YOUR LOGO
Is the WorldWideWeb perfect?
Is the WorldWideWeb perfect?
far from perfect.
Tim Berners-Lee, the WorldWideWeb inventor,
argues that we have to wait another 10-15 years before we shall see the WorldWideWeb as he had conceived it in Geneva during the year 1989.
YOUR LOGO
What the WorldWideWeb is usefull for?
A lot of things. Really a lot. to buy and sell: e-commerce
to ad and to find products: search engines
to book and to plan: e-logistics
to read geographic information:
to communicate 1 to 1, 1 to many, many to 1
and … most of all
to learn! (and teach)
YOUR LOGO
The Learning Society
What we can do better on the WorldWideWeb … is by far to learn …
even on the WorldWideWeb as it is now ..
and even better on the WorldWideWeb to come .. The Semantic Web.
Lisbon Treaty defines the european (and universal) Learning Society
(http://europa.eu/lisbon_treaty/index_en.htm )
YOUR LOGO
The Learning network machine
A new process of knowledge structuring and production just began With the mass diffusion of the WorldWideWeb
With the early adoption of the WorldWideWeb by children and teenagers
Knowledge is in the end a product of linking and referencing of other knowledge, informations and data
YOUR LOGO
To whom the WorldWideWeb is useful?
To everyone, but mostly: researchers
learners
Teachers:
i.e, The Knowledge Workers of the present and future european society
YOUR LOGO
At the beginning of the Web..
There were a bunch of protocols, like: HTTP, HyperTextTransferProtocol
HTML, HyperTextMarkupLanguage
URL, Unified Resource Locator (or URI, Unified Resource Indentifier)
later on, today, we will discuss in a very synthetic presentation what HTML is ..
And who are his descendants ..
YOUR LOGO
From HTML to …
Now let’s discuss what we all miss in the WorldWideweb (even if we are not really aware of what we could have!)
What its wrong with the web today?
When we ask for something, we gather to much of nothingWhen we want to correct an information, we can’t identify
the autorithy for that informationWhen TBL conceived the Web he was thinking at
democracy of knowledge: everyone must have his opportunity to write and access the web. It is like that?
YOUR LOGO
the polarized Web
After 15 years of WorldWideWeb …
The web is: As concentrated and polarized as the broadcast media are
Almost as asymmetric (one-way) as the traditional media are..
WWW: What Went Wrong?
References: Link, A.L.Baràbasi
YOUR LOGO
A page, not a book
In fact it’s just so easy to get a personal Webpage up and running…
But unfortunately it’s not as easy to let that page survive, be mantained, and be traceable, available and accessible as millionaire sites pages are.
Yes, you can publish your Blog in minutes ..
Yes you can do your first websites in less than an hour.
It’s different when you want that your scripts on the WorldWideWeb are read as authoritative pages on some subject.
YOUR LOGO
From focusing on the layout to the contents structuring
We shall see HTML shortly.
Let me just present what came after HTML page composing: CMS and LMS, based on XML, HXML, CSS and scripting languages.
Content Management System, are systems where users are authors and authors are users (at least, it should be like that)So what, it’s so much easier now? Yes and No
YOUR LOGO
An HTML parser to learn and fun with HTML
We shall use a resource available on the Web to learn HTML: www.w3schools.com
W3schools covers many subject in the web design field: HTML, XHTML, XML, CSS.
Let’s start with a fresh lesson on basic HTML W3Schools is special because uses a “parser” a kind of simulator that shows on the left side of the screen the “recipes” and on the right side of the screen the “cakes”; you can interact and experience waht command, what tag, what attribute have that effect on the browser.
YOUR LOGO
A recipe and a cake
This, shown above, is the parser: the button on hte left upper corner functions as a switch that “cooks” the recipe and shows the results on the right side of the screen:
www.w3schools.com
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
YOUR LOGO
Step by step, build up your HTML competence
Tags: paragraph tag
YOUR LOGO
Step by step, build up your HTML competence
Tags: Headings tag
YOUR LOGOPage 23
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 24
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 25
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 26
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 27
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 28
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 29
Lesson 1: An introduction on the Web evolution, 1989-1999
Practice on lesson 1 (www.w3schools.com;)
Lesson 2: An introduction on the Web evolution, 1999-2009
Practice on lesson 2 (www.w3schools.com;)
Lesson 3: Web technology for teaching and learning
1
2
3
4
5Practice on lesson 2 (www.w3schools.com;)
Question and Answers
Conclusion
6
7
8
Day 2: How research, education and the WorldWideWeb are increasingly interconnected with each other
YOUR LOGOPage 30
Insert your own text here Insert your own text here
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
This is a placeholder text. This text can be replaced with your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
This is a placeholder text. This text can be replaced with your own text.
Placeholder for your own subheadline
YOUR LOGOPage 31
Insert your own text here
This is a placeholder text. This text can be replaced with your own text.
Insert your own text here
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
This is a placeholder text. If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
Insert your own text here
Placeholder for your own subheadline
YOUR LOGOPage 32
Insert your own text here
This is a placeholder text. This text can be replaced with your own text.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
Placeholder for your own subheadline
YOUR LOGOPage 33
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
This is a placeholder text
Placeholder for your text
The text demonstrates how your own text will look when you replace the placeholder with your own text.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
Insert your own text here
The text demonstrates how your own text will look when you replace the placeholder with your own text.
This is a placeholder text.
Placeholder for your text
Placeholder for your own subheadline
YOUR LOGOPage 34
The text that you insert will retain the same style and format as the placeholder text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
The text that you insert will retain the same style and format as the placeholder text.
Placeholder for your own subheadline
YOUR LOGOPage 35
Placeholder for the headline
Placeholder foryour text
Insert your own text here
Placeholder foryour text
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
This is a placeholder text.
This is a placeholder text. This text can be replaced with your own text.
Placeholder for your own subheadline
YOUR LOGOPage 36
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
Placeholder for your own subheadline
YOUR LOGOPage 37
This is a placeholder text. This text can be replaced with your own text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
Placeholder for your own subheadline
YOUR LOGOPage 38
Placeholder for your own subheadline
YOUR LOGOPage 39
34
45
5563
3038
45
56
34
46
6773
41
58
8591
0
10
20
30
40
50
60
70
80
90
100
2007 2008 2009 2010
Description 1 Description 2 Description 3 Description 4
Enter your
own text
here
Enter your
own text
here
+24
Placeholder for your own subheadline
YOUR LOGOPage 40
91
86
81
73
65
43
USA
China
Germany
France
Italy
Spain
Placeholder for your own subheadline
YOUR LOGOPage 41
3439
49 48
6561
71
1519
27 29
3641
50
0
10
20
30
40
50
60
70
80
2004 2005 2006 2007 2008 2009 2010
Description A Description B
Forecast
2009-2010Forecast
2009-2010
Placeholder for your own subheadline
YOUR LOGOPage 42
34
45
55
63
30
38
45
56
2007 2008 2009 2010
Description 1 Description 2 Insert your own text here
This is a placeholder text. This text can be replaced with your own text.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
Placeholder for your own subheadline
YOUR LOGOPage 43
5
42
2750
10
27
Description A Description BDescription C Description DDescription E Description E
Insert your own text here
This is a placeholder text. This text can be replaced with your own text.
For replacing the placeholder text you need to click on the placeholder text and insert your own text.
If you don’t want to use the style and size of the fonts as used in this placeholder it is possible to replace it by selecting different options.
Placeholder for your own subheadline
YOUR LOGOPage 44
Description 2005 2006 2007 FC 2008
This is a placeholder text xx xx xx xx
Insert your own text here xx xx xx xx
Placeholder for text xx xx xx xx
Placeholder for your own text xx xx xx xx
Placeholder for text xxx xxx xxx xxx
Placeholder for your own text xxx xxx xxx xxx
Insert your own text here xxx xxx xxx xxx
Placeholder for your own text xxxx xxxx xxxx xxxx
This is a placeholder text xx xx xx xx
Placeholder for text xx xx xx xx
Total xxxx xxxx xxxx xxxx
Placeholder for your own subheadline
YOUR LOGOPage 45
Description 2007 FC 2008
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xxx xxx
Placeholder for text xxx xxx
Insert your own text here xxx xxx
Placeholder for text xxxx xxxx
This is a placeholder text xx xx
Placeholder for text xx xx
Total xxxx xxxx
Description 2007 FC 2008
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xx xx
Placeholder for text xxx xxx
Placeholder for text xxx xxx
Insert your own text here xxx xxx
Placeholder for text xxxx xxxx
This is a placeholder text xx xx
Placeholder for text xx xx
Total xxxx xxxx
Placeholder for your own subheadline
YOUR LOGOPage 46
This is a placeholder text. This text can be replaced with your own text.
The text that you insert will retain the same style and format as the placeholder text.
The text demonstrates how your own text will look when you replace the placeholder with your own text.
Placeholder
Placeholder for text
Insert your own text here
Pla
ceho
lder
text
Placeholder for your own subheadline
YOUR LOGOPage 47
This is a placeholder text. This text can be replaced with your own text.
This is a placeholder text. This text can be replaced with your own text.
The text that you insert will retain the same style and format as the placeholder text.
The text that you insert will retain the same style and format as the placeholder text.
This is a placeholder text. This text can be replaced with your own text.
Step 1Step 1 Step 2Step 2 Step 3Step 3 Step 4Step 4 Step 5Step 5
Placeholder for your own subheadline
YOUR LOGOPage 48
For replacing the placeholder text you need to click on the
placeholder text and insert your own text.
This is a place-holder text. This text can be replaced with
your own text.
This is a placeholder text. This text can be replaced with your own text.
For replacing the placeholder text you need to click on the placeholder text andinsert your own text.
Placeholder for your own subheadline
YOUR LOGOPage 49
Placeholder, enter yourown text here
Do You Have Any Questions?