File References, Trees, and Computational Thinking Craig Miller School of Computing DePaul University.

Slides:



Advertisements
Similar presentations
How to Organize a Website Using Front Page to Manage Your Growing Needs By Cristiana and Fred Baggio
Advertisements

Web Development & Design Foundations with XHTML
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
Absolute vs. Relative Paths/Links
Project 1 Introduction to HTML.
Create internal and external links Create internal links to named anchors Insert Flash Text Create, modify, and copy navigation bar Manage Web site links.
Computing Concepts Advanced HTML: Tables and Forms.
HCI 201 Week 5 Loose Ends. Agenda Image stuff Image stuff File stuff File stuff Bandwidth Bandwidth UNIX UNIX HTML HTML Design elements Design elements.
Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.
Chapter 14 Introduction to HTML
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Images: HTML and CSS. The Bells page without images in Source View and Design View.
AdvWeb-1/13 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
CSS 404 Internet Concepts. XP Objectives Developing a Web page and a Website Working with CSS (Cascading Style Sheets) Web Tables Web Forms Multimedia.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
STILL CHAPTER 4 More Style. Topics How to specify “style” for beautifying your content?  Using tag and style attributes and values Separate file for.css.
 The tag to create a link is called, which stands for anchor.  You put the address of the page to link to in quotes after href=, like the following:
HTML, XHTML, and CSS Chapter 8 Adding Multimedia Content to Web Pages.
 Welcome to Web design with HTML & CSS. My name is Ms. Masihi pronounced masseehee My Credentials  I have been teaching Computer related subjects since.
Microsoft ® Office SharePoint ® Server 2007 Training SharePoint document libraries II: All about checkout Bellwood-Antis School District presents:
1 Midterm Review. 2 Midterm Exam  30% of your grade for the course  October14 at the regular class time  No makeup exam or alternate times  Closed.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
CS 3870/CS 5870 Web Protocols, Technologies and Applications.
XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.
Planning your site/organization on the Web Please use speaker notes for additional information!
Classroom Research Workshop at Darunsikkhalai, 2 November 2012 Richard Watson Todd King Mongkut’s University of Technology Thonburi
Ohio Technology Standards August 9, 2005 Why Standards in Technology? No Child Left Behind Technology Literacy requirement Computer and Multimedia Literacy.
1 Final Review. 2 Final Exam  30% of your grade for the course  December 9 at 7:00 p.m., the regular class time  No makeup exam or alternate times.
Site Organization. The Need to Organize Site Files Thus far, we have placed all our site files into the main (root) website folder. As a website becomes.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
Hit125 application concepts Types of links File paths & directory structures.
Web Development in Microsoft Visual Studio 2013 / 2015.
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
Year 8- Web Pages Worksheet 1 YOUR NAME:. Task 1 What Makes A Bad Website? Look at the following THREE web sites on the internet and describe what makes.
Chapter 5 BIE2313 | Web design. ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Lecture 8 Introduction to Web Programming. Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Unit 15 – Web Authoring Web Authoring Project.
HTML PROJECT #1 Project 1 Introduction to HTML. HTML Project 1: Introduction to HTML 2 Project Objectives 1.Describe the Internet and its associated key.
HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.
Web Basics: HTML/CSS/JavaScript What are they?
4.01 How Web Pages Work.
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Site Organization.
CISC103 Web Development Basics: Web site:
Chapter 1 Introduction to HTML.
Unit 4 - Web Design Project
Web Languages What Is a Web Page?
Project 1 Introduction to HTML.
The Internet and HTML Code
Objective % Select and utilize tools to design and develop websites.
Web Languages What Is a Web Page?
Site Organization.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Multimedia and Internet Technology
Enhancing Your Web Site—Adding Links Web Page
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
One Set of Styles Connected to As Many Pages as You Want!!!
© 2017, Mike Murach & Associates, Inc.
Presentation transcript:

File References, Trees, and Computational Thinking Craig Miller School of Computing DePaul University

Web Development Courses IT 130 (The Internet and the Web) – Formatting pages with HTML and CSS – Coding interactive pages with Javascript HCI 201 (Multimedia and the World Wide Web) – Elementary HTML – Multimedia presentations – Inquiry methods Both courses teach students to link to other pages and reference image files

File References Link to another web page Click Here Include a picture in a web page Reference a style sheet of formatting rules

Relative and Absolute References Relative link to file in the same folder as the current page My information Relative link to a file in a sub-folder in the same folder as the current page Kozy’s Absolute reference Contact us Absolute reference to page at another site DePaul University

File Structure as a Tree

Using the Tree to Answer Problems Examples: What is the absolute reference to the banner.jpg file? What is the relative reference to the home.html file if the current pageis bio.html?

Computational Thinking Concepts Distinction between relative and absolute references Working with formal, abstract representations

Empirical Studies Both studies presented students with the tree and examples and then asked 8 file reference problems. Pilot study with 9 students from IT 130 – Showed that students have difficulty with these problems – Identified common errors Full study with 95 students from IT 130 and HCI 201 – Corroborated frequencies of common errors – Examined relative benefits of different study strategies

Common Errors Failure to correctly use two dots (..) to go up a level. Inappropriate use of the slash to indicate an absolute reference. Inappropriate naming of a folder or file when constructing the path name.

Study Strategies Practice Tasks: Students specify paths based on examples. Conceptual Questions: Students answer conceptual questions based on examples. Conceptual questions are based on common errors that were identified in the preparatory analysis. Self Study: Students are asked to study the examples with no other direction for preparing for the (scored) path questions.

Findings Benefit of conceptual questions depend on level of the student Self study provides more benefit than performing practice tasks Our conjecture: 1.Students compare their task to an example. 2.They use simple pattern-matching to reconcile the differences between their task and the example. 3.The process only requires a minimal understanding of the relationship between a coded file reference and the tree representation.

Summary Constructing file references involves core concepts and skills for computational thinking – Distinction between relative and absolute references – Reasoning with formal, abstract representations (e.g. tree representations of file structures) Recommend limited use of practice tasks when students are still learning targeted concepts