SlideShare a Scribd company logo
1 of 34
ARTDM 171, Week 2:
   A Brief History
          Gilbert Guerrero
        gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/
Homework due today

• Read Intro and Ch.1 of the
  Dreamweaver textbook
• Read p.26-48 in The Future of Ideas
• Post a comment on the blog
“Freedom thus enhanced
  the social value of the
       controlled…”
             
Web Basics
General Folder Organization
General Folder Organization
Letʼs get coding!
Open the web page excerpt.html
HTML Reference
http://www.webmonkey.com
Dreamweaver Basics
And other survival techniques
Dreamweaver first steps
•   Use the Window menu
•   Workspaces
•   Panels
•   Tabs
•   Unsaved files *
•   Save All
•   Preview in Browser
HTML (Hyper Text Markup
Language)
• HTML is on the Web
  you see
          ultimately behind everything

• Final product displayed in the browser
  PHP, ASP, etc. are processed into
   HTML
  JavaScript becomes and interacts
   with HTML
  HTML pages are text files
HTML is designed to do three
things
• Formatting text into paragraphs,
  bold, italics, bullets, etc.
• Inclusion of images
• Hyperlinking
HTTP and HTML

• Basic protocols of the World Wide
  Web
• Specify how the Web will serve
  content and how browsers will
  retrieve content
• Web browsers can handle other
  protocols, or interconnnect
WWW is in the Public Domain

 • Free to use
 • Decentralized
 • Accessible
 • Visible code
 • Easy to learn
   (copy + paste + modify)
Acronyms of the Web

•HTML, XHTML, CSS, JS, PHP, ASP,
 JSP, DHTML, AJAX, XML,…
XHTML stands for Extensible
Hyper Text Markup Language. 
•   Based on HTML, uses rigid structure from XML
    •   Tags are always lower case
    •   Attributes must be contained within quotes
    •   Closing tag
    •   Empty tags must end with / to be closed
•   Portability
•   All code in this class will be XHTML valid by default
•   HTML 5 is in the works… http://www.alistapart.com/
    articles/previewofhtml5
What is XML?

• Allows you to create your own
  markup tags and attributes
• Use it anywhere, possibly as
  datasource
 • RSS feeds are based on this
• For more about XML, read “Using
  XML”  by J. David Eisenberg,  http://
  www.alistapart.com/articles/usingxml/  
CSS – the Designer's answer

• Separates presentation from
  structure
• Goes beyond the limits of basic
  HTML
• After markup is done, style it with
  CSS
Web Developer
    Firefox plugin
https://addons.mozilla.org/en-US/
          firefox/addon/60

    View CSS of the class blog
DHTML – XHTML, CSS,
JavaScript, and DOM
• Not  really another language.
• Examples: Pop up windows, flyout
 menus
JavaScript – client side
processing
• Scripting language that lets you
  process user interactions within the
  browser.
• Not to be confused with Java
• Rollovers, form validation, pop up
  alert messages, and other
  interactive responses
AJAX - Asynchronous
JavaScript and XML
• Another use of technology, not really a
  language
• Using DHTML with live data, no page
  reloads.
• Example: Google Maps
• More info, read AJAX: A New Approach
  to Web Applications by Jesse James
  Garrett, http://www.adaptivepath.com/
  ideas/essays/archives/000385.php
The Rest

• PHP, ASP, JSP, etc. – server side
  scripts
• Plugins – for everything else
The Internet and the
 World Wide Web
Infrastructure: Military

• In the shadow of Sputnik, Advanced
  Research Projects Agency (ARPA) was
  created
• In the late 1960s, Department of
  Defense contracted  Paul Baran at the
  Rand Corporation.
• Their Question: Could a nuclear attack
  or an accident disable the nation's
  telecommunications system? 
Paul Baran
http://www.ibiblio.org/pioneers/
          baran.html
Wikipedia: Internet:
      History
http://en.wikipedia.org/wiki/
       Internet#History
Technologies on the Internet

• World Wide Web
• Email
• Peer-to-Peer (BitTorrent)
• Chat and Instant Messaging
• Online Gaming
• VoIP (skype)
Principles of the Internet

• End-to-end – intelligence at the ends,
  not hidden within the network
• Network is neutral
• Not optimized for any existing
  application
• Built for unrestricted growth, not even
  the designers knew
• No assumptions
Electronic Frontier
   Foundation
   http://www.eff.org
Standards
Vannevar Bush's Memex

• “As we may think”, Atlantic Monthly
  1945
• http://www.theatlantic.com/doc/
  194507/bush
W3C – WWW Consortium

• Tim Berners-Lee, director of W3C
• In October 1994, Tim Berners-Lee
  left CERN and founded the World
  Wide Web Consortium (W3C)
• Created to ensure compatibility and
  agreement in the adoption of
  standards. 
• http://www.w3c.org  
Homework, due Feb 9
• Read Chapter 2: Starting your first site
  • free accounthosting with Dreamhost or get a
     Setup Web
                  at http://xtreemhost.com/
• Read Chapter 3: Building your first page 
• Create a Web page using Dreamweaver:
  • Heading
  • At least two paragraphs  
  • Link colors other than the default
  • Font faces and sizes

More Related Content

What's hot

Week 1 - Intro to the Internet
Week 1 - Intro to the InternetWeek 1 - Intro to the Internet
Week 1 - Intro to the Internet
brianjihoonlee
 
So You Want A Personal Website?
So You Want A Personal Website?So You Want A Personal Website?
So You Want A Personal Website?
Myles Braithwaite
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
Chamnap Chhorn
 
UVA MDST 3703 JavaScript 2012-09-27
UVA MDST 3703 JavaScript 2012-09-27UVA MDST 3703 JavaScript 2012-09-27
UVA MDST 3703 JavaScript 2012-09-27
Rafael Alvarado
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web development
Ujjwal Ojha
 
Create and manage_a_website_1
Create and manage_a_website_1Create and manage_a_website_1
Create and manage_a_website_1
David
 

What's hot (20)

Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
 
Week 1 - Intro to the Internet
Week 1 - Intro to the InternetWeek 1 - Intro to the Internet
Week 1 - Intro to the Internet
 
So You Want A Personal Website?
So You Want A Personal Website?So You Want A Personal Website?
So You Want A Personal Website?
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
UVA MDST 3703 JavaScript 2012-09-27
UVA MDST 3703 JavaScript 2012-09-27UVA MDST 3703 JavaScript 2012-09-27
UVA MDST 3703 JavaScript 2012-09-27
 
BASICS OF HTML
BASICS OF HTMLBASICS OF HTML
BASICS OF HTML
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Realtools for Realtors
Realtools for RealtorsRealtools for Realtors
Realtools for Realtors
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web development
 
WordPress 15th Meetup - Build a Child Theme
WordPress 15th Meetup - Build a Child ThemeWordPress 15th Meetup - Build a Child Theme
WordPress 15th Meetup - Build a Child Theme
 
It4k12 wordpress
It4k12 wordpressIt4k12 wordpress
It4k12 wordpress
 
HTML 5
HTML 5HTML 5
HTML 5
 
The Augmented Wiki
The Augmented WikiThe Augmented Wiki
The Augmented Wiki
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a BossSocial Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
Social Media, Academics, & You: How to Use Evernote and Dropbox Like a Boss
 
Introduction to web page
Introduction to web pageIntroduction to web page
Introduction to web page
 
L5 keoj
L5 keojL5 keoj
L5 keoj
 
Web design
Web designWeb design
Web design
 
HTML5 security
HTML5 securityHTML5 security
HTML5 security
 
Create and manage_a_website_1
Create and manage_a_website_1Create and manage_a_website_1
Create and manage_a_website_1
 

Viewers also liked (7)

ARTDM170 Week 7: ActionScript Basics
ARTDM170 Week 7: ActionScript BasicsARTDM170 Week 7: ActionScript Basics
ARTDM170 Week 7: ActionScript Basics
 
What you missed when you skipped design school - Visual Thinking
What you missed when you skipped design school - Visual ThinkingWhat you missed when you skipped design school - Visual Thinking
What you missed when you skipped design school - Visual Thinking
 
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group Projects
 
ARTDM 170, Week13: Processing
ARTDM 170, Week13: ProcessingARTDM 170, Week13: Processing
ARTDM 170, Week13: Processing
 
ARTDM 171, Week 14: Multimedia on the Web
ARTDM 171, Week 14: Multimedia on the WebARTDM 171, Week 14: Multimedia on the Web
ARTDM 171, Week 14: Multimedia on the Web
 
ARTDM 170, Week9: Encapsulation + Paper Prototypes
ARTDM 170, Week9: Encapsulation + Paper PrototypesARTDM 170, Week9: Encapsulation + Paper Prototypes
ARTDM 170, Week9: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 

Similar to ARTDM 171, Week 2: A Brief History + Web Basics

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
Introduction to Web Standards
Introduction to Web StandardsIntroduction to Web Standards
Introduction to Web Standards
Jussi Pohjolainen
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
Gennady Feldman
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
Jeanho Chu
 
Activity 11 common online terminologies
Activity 11 common online terminologiesActivity 11 common online terminologies
Activity 11 common online terminologies
Lee_Subin
 

Similar to ARTDM 171, Week 2: A Brief History + Web Basics (20)

Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
9 10 july2020
9 10 july20209 10 july2020
9 10 july2020
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Tech talk php_cms
Tech talk php_cmsTech talk php_cms
Tech talk php_cms
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
 
web development process WT
web development process WTweb development process WT
web development process WT
 
Wt unit 1 ppts web development process
Wt unit 1 ppts web development processWt unit 1 ppts web development process
Wt unit 1 ppts web development process
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
 
Introduction to Web Standards
Introduction to Web StandardsIntroduction to Web Standards
Introduction to Web Standards
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
Geek basics
Geek basicsGeek basics
Geek basics
 
Module 5 and 6
Module 5 and 6Module 5 and 6
Module 5 and 6
 
Internet
InternetInternet
Internet
 
JavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefoxJavaScript debugging diagnostic web tools and firefox
JavaScript debugging diagnostic web tools and firefox
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Module 3
Module 3Module 3
Module 3
 
Activity 11 common online terminologies
Activity 11 common online terminologiesActivity 11 common online terminologies
Activity 11 common online terminologies
 
Multimedia- How Internet Works
Multimedia- How Internet WorksMultimedia- How Internet Works
Multimedia- How Internet Works
 
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLWEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
 

More from Gilbert Guerrero

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
Gilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
Gilbert Guerrero
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
Gilbert Guerrero
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
Gilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
Gilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
Gilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
Gilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
Gilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
Gilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
Gilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 

More from Gilbert Guerrero (20)

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 

Recently uploaded

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 

Recently uploaded (20)

Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 

ARTDM 171, Week 2: A Brief History + Web Basics

  • 1. ARTDM 171, Week 2: A Brief History Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
  • 2. Homework due today • Read Intro and Ch.1 of the Dreamweaver textbook • Read p.26-48 in The Future of Ideas • Post a comment on the blog
  • 3. “Freedom thus enhanced the social value of the controlled…”  
  • 7. Letʼs get coding! Open the web page excerpt.html
  • 9. Dreamweaver Basics And other survival techniques
  • 10. Dreamweaver first steps • Use the Window menu • Workspaces • Panels • Tabs • Unsaved files * • Save All • Preview in Browser
  • 11. HTML (Hyper Text Markup Language) • HTML is on the Web you see ultimately behind everything • Final product displayed in the browser  PHP, ASP, etc. are processed into HTML  JavaScript becomes and interacts with HTML  HTML pages are text files
  • 12. HTML is designed to do three things • Formatting text into paragraphs, bold, italics, bullets, etc. • Inclusion of images • Hyperlinking
  • 13. HTTP and HTML • Basic protocols of the World Wide Web • Specify how the Web will serve content and how browsers will retrieve content • Web browsers can handle other protocols, or interconnnect
  • 14. WWW is in the Public Domain • Free to use • Decentralized • Accessible • Visible code • Easy to learn (copy + paste + modify)
  • 15. Acronyms of the Web •HTML, XHTML, CSS, JS, PHP, ASP, JSP, DHTML, AJAX, XML,…
  • 16. XHTML stands for Extensible Hyper Text Markup Language.  • Based on HTML, uses rigid structure from XML • Tags are always lower case • Attributes must be contained within quotes • Closing tag • Empty tags must end with / to be closed • Portability • All code in this class will be XHTML valid by default • HTML 5 is in the works… http://www.alistapart.com/ articles/previewofhtml5
  • 17. What is XML? • Allows you to create your own markup tags and attributes • Use it anywhere, possibly as datasource • RSS feeds are based on this • For more about XML, read “Using XML”  by J. David Eisenberg,  http:// www.alistapart.com/articles/usingxml/  
  • 18. CSS – the Designer's answer • Separates presentation from structure • Goes beyond the limits of basic HTML • After markup is done, style it with CSS
  • 19. Web Developer Firefox plugin https://addons.mozilla.org/en-US/ firefox/addon/60 View CSS of the class blog
  • 20. DHTML – XHTML, CSS, JavaScript, and DOM • Not  really another language. • Examples: Pop up windows, flyout menus
  • 21. JavaScript – client side processing • Scripting language that lets you process user interactions within the browser. • Not to be confused with Java • Rollovers, form validation, pop up alert messages, and other interactive responses
  • 22. AJAX - Asynchronous JavaScript and XML • Another use of technology, not really a language • Using DHTML with live data, no page reloads. • Example: Google Maps • More info, read AJAX: A New Approach to Web Applications by Jesse James Garrett, http://www.adaptivepath.com/ ideas/essays/archives/000385.php
  • 23. The Rest • PHP, ASP, JSP, etc. – server side scripts • Plugins – for everything else
  • 24. The Internet and the World Wide Web
  • 25. Infrastructure: Military • In the shadow of Sputnik, Advanced Research Projects Agency (ARPA) was created • In the late 1960s, Department of Defense contracted  Paul Baran at the Rand Corporation. • Their Question: Could a nuclear attack or an accident disable the nation's telecommunications system? 
  • 27. Wikipedia: Internet: History http://en.wikipedia.org/wiki/ Internet#History
  • 28. Technologies on the Internet • World Wide Web • Email • Peer-to-Peer (BitTorrent) • Chat and Instant Messaging • Online Gaming • VoIP (skype)
  • 29. Principles of the Internet • End-to-end – intelligence at the ends, not hidden within the network • Network is neutral • Not optimized for any existing application • Built for unrestricted growth, not even the designers knew • No assumptions
  • 30. Electronic Frontier Foundation http://www.eff.org
  • 32. Vannevar Bush's Memex • “As we may think”, Atlantic Monthly 1945 • http://www.theatlantic.com/doc/ 194507/bush
  • 33. W3C – WWW Consortium • Tim Berners-Lee, director of W3C • In October 1994, Tim Berners-Lee left CERN and founded the World Wide Web Consortium (W3C) • Created to ensure compatibility and agreement in the adoption of standards.  • http://www.w3c.org  
  • 34. Homework, due Feb 9 • Read Chapter 2: Starting your first site • free accounthosting with Dreamhost or get a Setup Web at http://xtreemhost.com/ • Read Chapter 3: Building your first page  • Create a Web page using Dreamweaver: • Heading • At least two paragraphs   • Link colors other than the default • Font faces and sizes

Editor's Notes

  1. "Yet we are trained to ignore another form of governmental intervention that also made the Internet possible. This is the regulation that assured that the platforform upon which the Internet was built would not turn against it." p44, Future of Ideas, Lessig, L. Question: What can we interpret from Lessig’s final sentence in the reading, “Freedom thus enhanced the social value of the controlled…”? Question: How does our understanding of the Language of the Internet, both code and content, affect how we design for it and how we use it? Think about the RFC’s (request for comments in the design of the protocol.)
  2. Content is at the Core • Code a page with no tags – content comes through • Easy to create Web pages • Linear format, top to bottom
  3.   
  4.   
  5.   
  6. It’s a method of using XHTML, CSS, JavaScript, and DOM (Document Object Model) to add motion and fluid interactivity to your pages.
  7. It’s a method of using XHTML, CSS, JavaScript, and DOM (Document Object Model) to add motion and fluid interactivity to your pages.
  8.   
  9.   
  10. Question:    Based on the reading (by Lessig), how might the Internet’s origins affect it’s behavior?     Lessig points out a lot of the benefits from the architecture, but is there anything else there?
  11.   
  12.   
  13.   Not all networks are this way. Consider the telephone network.
  14.   
  15.   
  16.