The document describes an assignment to create an HTML/JavaScript program that parses an XML file containing Olympic sports results, and displays the data in an interactive accordion widget. The program must:
1. Parse the XML file using the DOM parser and display sport event names as menu items.
2. When an item is clicked, display a table under it with details on the event winner from the XML, including name, country, results, a picture, and embedded YouTube video.
3. Support expanding and collapsing multiple event details simultaneously without page refresh.
4. Gracefully handle errors if the XML file is invalid.
Hints on using the DOM parser, jQuery, and embedding YouTube videos are
The document summarizes key concepts about browsing the web, including describing web sites and pages, explaining how IP addresses and URLs locate web content, and outlining how to navigate and customize a web browser. It also discusses risks of using the web like viruses and privacy concerns, emphasizing the importance of installing protection software and understanding sites' privacy policies.
This is a basic tutorial presentation explaining how to get started with magento 2. Can be useful for programmers who wants a concise step by step starting tutorial on magento 2.
The document discusses different navigation concepts in APEX including APEX tabs, the APEX navigation tree, ExtJS navigation tree, and iframe tabs. APEX tabs provide a well-arranged menu overview but have static data and hard-coded configurations. The APEX navigation tree is dynamically created through table data but requires a page refresh with each click. The ExtJS navigation tree has enhanced graphical interfaces and functionality but is more complicated to integrate. Iframe tabs prevent full page reloads, saving traffic, and allow jumping between open pages using JavaScript.
The document provides instructions on various content management and configuration tasks in Drupal, such as:
1) Creating and moderating forums, including enabling forum modules, adding forum containers and topics.
2) Organizing content using taxonomy by adding vocabularies and terms to categorize content.
3) Using the Views module to build customized lists and tables of content through configurable queries.
The document discusses how to create a new theme in Magento by setting up folder structure and configuration files. It explains how to set up a new theme directory, create layout and template files, add custom CSS/JS, and modify layout and meta settings using XML. Key aspects of creating a compatible theme include using a single layout file (local.xml), avoiding duplicate file names, and only modifying necessary template files.
The document discusses various topics related to web programming using Visual Basic and ASP.NET, including the client-server model, creating and laying out web forms, adding controls and images, validating user input, maintaining state, and some common web acronyms.
The document summarizes key concepts about browsing the web, including describing web sites and pages, explaining how IP addresses and URLs locate web content, and outlining how to navigate and customize a web browser. It also discusses risks of using the web like viruses and privacy concerns, emphasizing the importance of installing protection software and understanding sites' privacy policies.
This is a basic tutorial presentation explaining how to get started with magento 2. Can be useful for programmers who wants a concise step by step starting tutorial on magento 2.
The document discusses different navigation concepts in APEX including APEX tabs, the APEX navigation tree, ExtJS navigation tree, and iframe tabs. APEX tabs provide a well-arranged menu overview but have static data and hard-coded configurations. The APEX navigation tree is dynamically created through table data but requires a page refresh with each click. The ExtJS navigation tree has enhanced graphical interfaces and functionality but is more complicated to integrate. Iframe tabs prevent full page reloads, saving traffic, and allow jumping between open pages using JavaScript.
The document provides instructions on various content management and configuration tasks in Drupal, such as:
1) Creating and moderating forums, including enabling forum modules, adding forum containers and topics.
2) Organizing content using taxonomy by adding vocabularies and terms to categorize content.
3) Using the Views module to build customized lists and tables of content through configurable queries.
The document discusses how to create a new theme in Magento by setting up folder structure and configuration files. It explains how to set up a new theme directory, create layout and template files, add custom CSS/JS, and modify layout and meta settings using XML. Key aspects of creating a compatible theme include using a single layout file (local.xml), avoiding duplicate file names, and only modifying necessary template files.
The document discusses various topics related to web programming using Visual Basic and ASP.NET, including the client-server model, creating and laying out web forms, adding controls and images, validating user input, maintaining state, and some common web acronyms.
This document provides instructions for configuring the database development view in Eclipse to access and work with a Derby database. It describes how to install the database development plugin, create a new Derby connection, specify driver details, and access the Derby database from the command line. It also gives an overview of exploring the database structure in Eclipse and editing, loading, and extracting data from tables.
The document outlines a lesson plan for a class on creating dynamic webpages. It covers three units: HTML form tools, JavaScript, and internet safety. For unit 1, students will learn how to add text boxes, radio buttons, and other elements to forms. They will then design a webpage to collect user data. Unit 2 focuses on JavaScript, including using functions and if statements to add interactivity. Students will learn to validate user-entered data. The final unit discusses safely using the internet and designing an online safety guide. Interactive projects are included each week to apply the concepts covered.
We’re going to explain how to develop a Magento 2 Custom Shipping module that features some basic functionality and covers most of the development aspects.
The document discusses different types of frames that can be used to organize content on a web page, including:
- Horizontal frames that divide the page into sections side-by-side.
- Vertical frames that divide the page into sections stacked vertically.
- Mixed frames that use both horizontal and vertical divisions.
- Inline frames that display within the normal page content rather than dividing the entire page.
- Nested frames where one frame is contained entirely within another frame.
The document provides examples of code to create each type of frame and screenshots of example page layouts using different framing techniques. Hands-on exercises are also included to practice implementing frames.
This document provides information about using Scratch and internet safety. It includes:
1) An overview of Scratch, including its importance as an educational programming tool and how to open and navigate the Scratch interface.
2) Details on the main components of the Scratch interface, how to control sprites and change the language. It also explains how to create repeating motions using different block types.
3) Instructions for saving Scratch projects, opening new or existing projects, and adding new sprites.
4) A section about internet safety, including proper ergonomics for computer use, definitions of cyberbullying and online scams, and the importance of internet security.
This document provides instructions for installing, configuring, and managing content on an AIESEC CMS website. It covers installation options for beginner and expert users, general settings configuration, adding and editing different types of content like pages, files, news, photo albums and events. It also provides directions for user administration and customization like adding languages. The goal is to guide users through setting up and populating an AIESEC website built with the CMS Made Simple platform.
CRUD, form management, and how Dojo solves it. It was delivered at ClubAJAX on 12/2/2009. Blog post: http://lazutkin.com/blog/2009/dec/2/crud-with-dojo/
This document summarizes the steps to create a basic CRUD (create, read, update, delete) application in Django:
1. Set up a Django project with manage.py and configure the database in settings.py.
2. Create a Django app using manage.py startapp and define a model in the app's models.py.
3. Add the app to INSTALLED_APPS and sync the database.
4. Build out views to handle CRUD functions like listing, adding, editing, and deleting data and link them to URLs.
5. Create templates to display data and forms for user interaction.
This document discusses a case study of using microformats, GeoRSS, REST, and KML to share scientific data from the PolarGrid project on the web. Key points include converting unstructured metadata to microformats, embedding geographic annotations in RSS feeds to plot on maps, and generating corresponding KML files for Google Earth. Examples show how to describe radar data and extend XHTML to capture semantic information for sharing structured scientific content on the web.
This document provides instructions for several labs on testing a timeclock application using Ruby. It begins by having the student experiment with making mistakes using the timeclock commands to learn how errors are handled. It then guides them through setting up a testing framework using assertions and the Test::Unit library. Finally, it instructs them to write tests for the timeclock application's web services interface by checking that jobs are started, paused, stopped correctly and have the expected effects.
This document provides instructions for creating collapsible panels in JavaScript without using frameworks. It describes using JavaScript to detect panel elements, add click handlers to toggle their collapsed/expanded state, and save the state of each panel in a cookie to remember the state between page loads. The code provided analyzes the page to find panel elements, toggles their class on click to change appearance, and uses a cookie to save which panels are open and closed.
This document describes an experiment that evaluated the effectiveness of different online advertising models. The study tested a background sound model, where advertisements were played as streaming audio, and a hybrid model, which combined elements of banner, pop-up, pop-under, and background sound ads. The experiment measured advertisement recall/recognition, brand recall/recognition, and perceived annoyance. Results showed the background sound and hybrid models had higher rates of ad and brand recall/recognition than traditional banner, pop-up, and pop-under ads. The background sound model was most effective for advertisement recall, while both new models reduced perceived annoyance compared to other ad types.
This document provides the course syllabus for INFS 730 Programming for E Commerce. The 3 credit course is offered online through Dakota State University in the spring of 2009. It will cover client-side web programming and use Desire2Learn for course materials, assignments, and communication. Students will complete labs, quizzes, and exams online. The course aims to introduce students to web architecture, usability, and client programming based on topics from the required textbooks.
This newsletter provides a summary of new free online computer training resources and tutorials. It describes the editor's greeting and mission to provide free IT education resources. It then lists and links to over 100 new free online tutorials, books, and training sites covering various computer and programming topics such as web development, Java, Linux, databases, and networking. It encourages subscribers to explore these free resources and the editor's websites to support their computer education and training.
This document provides instructions for creating a basic Joomla template by outlining the necessary files, code, and folder structure. It explains how to create a templateDetails.xml file to define metadata and module positions, and an index.php file that uses PHP code to display module and component content. Minimal CSS and images are also included. The template can then be tested, packaged, and installed on a Joomla site to display content in a basic layout.
This tutorial describes using recursive XSLT calls and JavaScript to display an expanding and collapsing tree view of an XML purchase order document. Key aspects covered include using recursion in the XSLT stylesheet to process the XML data hierarchically, invoking JavaScript from XSLT to make the display interactive, and generating HTML output with calls to the JavaScript functions. The code sample demonstrates techniques for parsing XML data recursively and creating an interactive user interface using XSLT and JavaScript.
This tutorial describes using recursive XSLT calls and JavaScript to display an expanding and collapsing tree view of an XML purchase order document. Key aspects covered include using recursion in the XSLT stylesheet to process the XML data hierarchically, invoking JavaScript from XSLT to make the display interactive, and generating HTML output with calls to the JavaScript functions. The code sample demonstrates techniques for parsing XML data recursively and creating an interactive user interface using XSLT and JavaScript.
Browser extensions are programs that add new functionality to browsers. They are developed using technologies like HTML, CSS, JavaScript, and XML. The general structure of an extension includes metadata, a user interface, and functionality. Chrome extensions have a manifest file and folder structure that includes optional files. Firefox extensions have an install manifest file and chrome folder structure that can include XUL, JavaScript, images and more. Extensions are loaded by clicking "Load unpacked extension" in the browser extensions page after placing the extension files in a folder.
New Flash Builder 4 WSDL and HTTP Connectorsrtretola
This document provides instructions for setting up a Java SDK and Tomcat server on Windows and Mac OS X systems in order to run a Flash Builder project. It describes downloading and configuring a Java SDK by setting the JAVA_HOME environment variable. It then explains how to navigate to the Tomcat directory in the command line and start the server using specific commands for Windows and Mac. The document tests that the server is running properly by accessing certain URLs and describes how a crossdomain.xml policy file works to allow access to remote data services. It concludes by outlining the initial steps to create a new Flash Builder project and connect to REST data from an XML service using MXML and ActionScript.
Creating xml publisher documents with people codeRandall Groncki
The document discusses various methods for creating XML files to use as data sources for XML Publisher reports in PeopleSoft, including manually creating XML strings, using file layout objects, rowset objects, and XMLDoc objects. It also covers considerations for generating XML files like ensuring unique file names for concurrent report generation and sample files for defining data sources in XML Publisher. The document is intended for users familiar with creating XML Publisher reports and outlines four sections: XML file creation methods, report invocation and creation using application packages, output presentation options, and XML file generation considerations.
This document provides an introduction and overview for developing Firefox add-ons. It discusses what Firefox add-ons are, the necessary skills and tools for creating extensions, and walks through the development process including setting up the environment, file structure, manifest files, using XUL, JavaScript and the DOM, packaging extensions into XPI files, and resources for further learning.
This document provides instructions for debugging NetSim simulations using both the graphical user interface (GUI) and command line interface (CLI). It describes making backups of simulation files, setting breakpoints in protocol initialization functions, attaching the Visual Studio debugger to NetSimCore.exe, and correlating the debug session with generated event traces to view variable values at different points in the simulation run.
This document provides instructions for configuring the database development view in Eclipse to access and work with a Derby database. It describes how to install the database development plugin, create a new Derby connection, specify driver details, and access the Derby database from the command line. It also gives an overview of exploring the database structure in Eclipse and editing, loading, and extracting data from tables.
The document outlines a lesson plan for a class on creating dynamic webpages. It covers three units: HTML form tools, JavaScript, and internet safety. For unit 1, students will learn how to add text boxes, radio buttons, and other elements to forms. They will then design a webpage to collect user data. Unit 2 focuses on JavaScript, including using functions and if statements to add interactivity. Students will learn to validate user-entered data. The final unit discusses safely using the internet and designing an online safety guide. Interactive projects are included each week to apply the concepts covered.
We’re going to explain how to develop a Magento 2 Custom Shipping module that features some basic functionality and covers most of the development aspects.
The document discusses different types of frames that can be used to organize content on a web page, including:
- Horizontal frames that divide the page into sections side-by-side.
- Vertical frames that divide the page into sections stacked vertically.
- Mixed frames that use both horizontal and vertical divisions.
- Inline frames that display within the normal page content rather than dividing the entire page.
- Nested frames where one frame is contained entirely within another frame.
The document provides examples of code to create each type of frame and screenshots of example page layouts using different framing techniques. Hands-on exercises are also included to practice implementing frames.
This document provides information about using Scratch and internet safety. It includes:
1) An overview of Scratch, including its importance as an educational programming tool and how to open and navigate the Scratch interface.
2) Details on the main components of the Scratch interface, how to control sprites and change the language. It also explains how to create repeating motions using different block types.
3) Instructions for saving Scratch projects, opening new or existing projects, and adding new sprites.
4) A section about internet safety, including proper ergonomics for computer use, definitions of cyberbullying and online scams, and the importance of internet security.
This document provides instructions for installing, configuring, and managing content on an AIESEC CMS website. It covers installation options for beginner and expert users, general settings configuration, adding and editing different types of content like pages, files, news, photo albums and events. It also provides directions for user administration and customization like adding languages. The goal is to guide users through setting up and populating an AIESEC website built with the CMS Made Simple platform.
CRUD, form management, and how Dojo solves it. It was delivered at ClubAJAX on 12/2/2009. Blog post: http://lazutkin.com/blog/2009/dec/2/crud-with-dojo/
This document summarizes the steps to create a basic CRUD (create, read, update, delete) application in Django:
1. Set up a Django project with manage.py and configure the database in settings.py.
2. Create a Django app using manage.py startapp and define a model in the app's models.py.
3. Add the app to INSTALLED_APPS and sync the database.
4. Build out views to handle CRUD functions like listing, adding, editing, and deleting data and link them to URLs.
5. Create templates to display data and forms for user interaction.
This document discusses a case study of using microformats, GeoRSS, REST, and KML to share scientific data from the PolarGrid project on the web. Key points include converting unstructured metadata to microformats, embedding geographic annotations in RSS feeds to plot on maps, and generating corresponding KML files for Google Earth. Examples show how to describe radar data and extend XHTML to capture semantic information for sharing structured scientific content on the web.
This document provides instructions for several labs on testing a timeclock application using Ruby. It begins by having the student experiment with making mistakes using the timeclock commands to learn how errors are handled. It then guides them through setting up a testing framework using assertions and the Test::Unit library. Finally, it instructs them to write tests for the timeclock application's web services interface by checking that jobs are started, paused, stopped correctly and have the expected effects.
This document provides instructions for creating collapsible panels in JavaScript without using frameworks. It describes using JavaScript to detect panel elements, add click handlers to toggle their collapsed/expanded state, and save the state of each panel in a cookie to remember the state between page loads. The code provided analyzes the page to find panel elements, toggles their class on click to change appearance, and uses a cookie to save which panels are open and closed.
This document describes an experiment that evaluated the effectiveness of different online advertising models. The study tested a background sound model, where advertisements were played as streaming audio, and a hybrid model, which combined elements of banner, pop-up, pop-under, and background sound ads. The experiment measured advertisement recall/recognition, brand recall/recognition, and perceived annoyance. Results showed the background sound and hybrid models had higher rates of ad and brand recall/recognition than traditional banner, pop-up, and pop-under ads. The background sound model was most effective for advertisement recall, while both new models reduced perceived annoyance compared to other ad types.
This document provides the course syllabus for INFS 730 Programming for E Commerce. The 3 credit course is offered online through Dakota State University in the spring of 2009. It will cover client-side web programming and use Desire2Learn for course materials, assignments, and communication. Students will complete labs, quizzes, and exams online. The course aims to introduce students to web architecture, usability, and client programming based on topics from the required textbooks.
This newsletter provides a summary of new free online computer training resources and tutorials. It describes the editor's greeting and mission to provide free IT education resources. It then lists and links to over 100 new free online tutorials, books, and training sites covering various computer and programming topics such as web development, Java, Linux, databases, and networking. It encourages subscribers to explore these free resources and the editor's websites to support their computer education and training.
This document provides instructions for creating a basic Joomla template by outlining the necessary files, code, and folder structure. It explains how to create a templateDetails.xml file to define metadata and module positions, and an index.php file that uses PHP code to display module and component content. Minimal CSS and images are also included. The template can then be tested, packaged, and installed on a Joomla site to display content in a basic layout.
This tutorial describes using recursive XSLT calls and JavaScript to display an expanding and collapsing tree view of an XML purchase order document. Key aspects covered include using recursion in the XSLT stylesheet to process the XML data hierarchically, invoking JavaScript from XSLT to make the display interactive, and generating HTML output with calls to the JavaScript functions. The code sample demonstrates techniques for parsing XML data recursively and creating an interactive user interface using XSLT and JavaScript.
This tutorial describes using recursive XSLT calls and JavaScript to display an expanding and collapsing tree view of an XML purchase order document. Key aspects covered include using recursion in the XSLT stylesheet to process the XML data hierarchically, invoking JavaScript from XSLT to make the display interactive, and generating HTML output with calls to the JavaScript functions. The code sample demonstrates techniques for parsing XML data recursively and creating an interactive user interface using XSLT and JavaScript.
Browser extensions are programs that add new functionality to browsers. They are developed using technologies like HTML, CSS, JavaScript, and XML. The general structure of an extension includes metadata, a user interface, and functionality. Chrome extensions have a manifest file and folder structure that includes optional files. Firefox extensions have an install manifest file and chrome folder structure that can include XUL, JavaScript, images and more. Extensions are loaded by clicking "Load unpacked extension" in the browser extensions page after placing the extension files in a folder.
New Flash Builder 4 WSDL and HTTP Connectorsrtretola
This document provides instructions for setting up a Java SDK and Tomcat server on Windows and Mac OS X systems in order to run a Flash Builder project. It describes downloading and configuring a Java SDK by setting the JAVA_HOME environment variable. It then explains how to navigate to the Tomcat directory in the command line and start the server using specific commands for Windows and Mac. The document tests that the server is running properly by accessing certain URLs and describes how a crossdomain.xml policy file works to allow access to remote data services. It concludes by outlining the initial steps to create a new Flash Builder project and connect to REST data from an XML service using MXML and ActionScript.
Creating xml publisher documents with people codeRandall Groncki
The document discusses various methods for creating XML files to use as data sources for XML Publisher reports in PeopleSoft, including manually creating XML strings, using file layout objects, rowset objects, and XMLDoc objects. It also covers considerations for generating XML files like ensuring unique file names for concurrent report generation and sample files for defining data sources in XML Publisher. The document is intended for users familiar with creating XML Publisher reports and outlines four sections: XML file creation methods, report invocation and creation using application packages, output presentation options, and XML file generation considerations.
This document provides an introduction and overview for developing Firefox add-ons. It discusses what Firefox add-ons are, the necessary skills and tools for creating extensions, and walks through the development process including setting up the environment, file structure, manifest files, using XUL, JavaScript and the DOM, packaging extensions into XPI files, and resources for further learning.
This document provides instructions for debugging NetSim simulations using both the graphical user interface (GUI) and command line interface (CLI). It describes making backups of simulation files, setting breakpoints in protocol initialization functions, attaching the Visual Studio debugger to NetSimCore.exe, and correlating the debug session with generated event traces to view variable values at different points in the simulation run.
This document introduces the Eclipse Infocenter content management system. It provides an overview of Infocenter's capabilities including organizing content into books and topics, customizing the user interface, deploying on servers, searching content, integrating with other systems, and supporting multiple languages. The document demonstrates how to set up and configure an Infocenter instance to manage technical documentation and help systems.
This document provides a tutorial for using Dojo 1.0 to create a rich internet application. It demonstrates how to set up the development environment, install Dojo, and create a basic application with Dojo widgets like DateTextBox, ComboBox, CheckBox, RadioButton, and Button. Event handling in Dojo is also discussed, noting that event handler methods only receive the Event object as a parameter rather than this and event like standard DOM event handling. The tutorial code is analyzed and additional widgets are added to the sample application.
This document provides a tutorial for using Dojo 1.0 to create a rich internet application. It demonstrates how to set up the development environment, install Dojo, and create a basic application with Dojo widgets like DateTextBox, ComboBox, CheckBox, RadioButton, and Button. Event handling in Dojo is also discussed, noting that event handler methods only receive the Event object as a parameter rather than this and event like standard DOM event handling. The tutorial code is analyzed and additional widgets are added to the sample application.
For this project your task is to update the RSS Reader program you w.pdffathimahardwareelect
For this project your task is to update the RSS Reader program you wrote for the previous
project so that it reads multiple RSS feeds and generates the same nicely formatted HTML page
of links for each feed, plus an HTML index page with links to the individual feed pages.
Your new program should ask the user for the name of an XML file containing a list of URLs for
RSS v2.0 feeds (see below for the format of this file) and for the name of an output file in which
to generate an HTML page with links to the pages for the individual RSS feeds (see below for an
example). It should then read the input XML file into an XMLTree object and then process the
list of RSS feeds from the XMLTree. For each RSS feed, the program should generate an HTML
page with a table of links to all the news items in the feed (just like in the previous project). The
program should also generate an HTML page with an index of links to the individual feed pages.
Format of the Input XML Document
The input XML document is pretty simple. This is the general structure:
1
2
3
4
5
6
...
The top-level tag, , has a required attribute, title, whose value is the title to be used in the index
page; nested inside the top-level tag are 1 or more tags with the following required attributes:
url, the URL of the RSS feed, name, the name to use for the link to the feed in the index page,
and file, the name of the HTML file in which to generate the feed\'s table of links to news items
(with the same format as the output in the previous project).
Here is an example of a valid XML input file.
Format of the HTML Output Index Page
The HTML index page should include the following information:
the title as the page title
a header with the page title inside
an unordered list where each item is the name of a feed linked to the feed URL
You can see an example of the index output here.
Method
Create a new Eclipse project by copying your RSSReader project and name the new project
RSSAggregator.
Open the src folder of this project and then open (default package). Rename the RSSReader.java
file to RSSAggregator.java. Open the RSSAggregator.java file in the editor.
Edit RSSAggregator.java to satisfy the problem requirements stated above. You should factor
out the code in your previous project that processed the RSS feed into the following separate
static method:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* Processes one XML RSS (version 2.0) feed from a given URL converting it
* into the corresponding HTML output file.
*
* @param url
* the URL of the RSS feed
* @param file
* the name of the HTML output file
* @param out
* the output stream to report progress or errors
* @updates out.content
* @requires out.is_open
* @ensures
* [reads RSS feed from url, saves HTML document with table of news items
* to file, appends to out.content any needed messages]
*
*/
private static void processFeed(String url, String file, SimpleWriter out) {...}
1
2
3
4
5
6
...
Solution
import components.simplereader.SimpleRead.
1 Web Page Foundations Overview This lab walk.docxhoney725342
1
Web Page Foundations
Overview
This lab walks you through creating and deploying a simple web page. The web page you create in this
lab will have no functionality yet. It just contains many of the html elements you will see on most web
pages today. We will turn this web page into a working web application next week. A text editor will be
used to create the web page. You are welcome to use an html editor or Integrated Development
Environment (IDE) to help you generate the web pages if you like. Please be sure you have read the
“Creating Web Pages” competencies prior to completing this Lab. The online textbook has many html
code examples that will help you become comfortable with the most popular html tags.
Learning Outcomes:
At the completion of the lab you should be able to:
1. Create a web page comprised of formatted text, images, lists, tables, hyperlinks and forms.
2. Review and analyze Apache Web server logs notating http access, http methods and http error
codes
Lab Submission Requirements:
After completing this lab, you will submit a word (or PDF) document that meets all of the requirements in
the description at the end of this document. In addition several html and image files along with the
Apache2 access.log file will be submitted. You can submit all files in a zip file.
Virtual Machine Account Information
Your Virtual Machine has been preconfigured with all of the software you will need for this class. The
default username and password are:
Username : umucsdev
Password: umuc$d8v
Part 1 – Create a Web page
We will use the gedit text editor to create the web page. The web page will resemble a company home
page with an introduction, some formatted text, links to other web pages, images and a form designed
to gather customer information.
1. Assuming you have already launched and logged into your SDEV32Bit Virtual Machine (VM)
from the Oracle VirtualBox, click on the gedit icon found on the left side of the screen of your
VM.
2
2. After clicking the terminal icon a terminal will appear
Click to open text editor
3
3. To create a new document just begin typing or copying and pasting the html code from the
examples. We will create the web page in several steps adding a few paragraphs and sections at
time. Viewing the web page between each step will help minimize errors in the html code. To
add the first section of the html web page copy and paste the following html code into the gedit
editor:
<!DOCTYPE html>
<!-- CNShome.html -->
<!-- Jan 22, XXXX -->
<html>
<head>
<title>Computer Security Home Page </title>
</head>
<body>
<h1>Welcome to Computer Security Consultants! </h1>
<p>
</body>
</html>
Save the file in the /var/www/html/week2 folder in a file named CNShome.html. Note, you may need to
create a folder named week2. Recall the /var/www/html is the location of the Apache2 web server html
files. Creating ...
Introduction Dojo Toolkit & IBM Lotus DominoRolf Kremer
This presentation shows an introduction to the usage of the dojo toolkit in an IBM Lotus Domino application. The presentation based on a three hour workshop in which the sample application 'Phone Directory' was developed.
The document discusses using DOM objects to access and manipulate XML documents programmatically. It describes validating an XML document against a schema using the DOMDocument and XMLSchemaCache objects. It also covers applying different XSLT stylesheets to an XML document dynamically using the XSLTemplate and XSLProcessor objects, allowing the same data to be displayed in different formats.
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityTeamstudio
IBM Champion Johnny Oldenburger from Kranendonk Smart Robotics shows how to develop very user friendly and fully responsive web applications (with XPages of course!) by making use of Bootstrap and jQuery Plugins.
He shows how to use the Select2, DateTimePickers, Multiselect, Bootstrap-select, Modals, Popovers, and Notifications plugins to deliver the ultimate in usability. Learn how to solve the AMD issue when incorporating JavaScript libraries in XPages. Go beyond the basics and create applications that nobody ever thought possible using XPages.
Creating reports in oracle e business suite using xml publisherSamchi Fouzee
This document provides instructions for creating reports in Oracle E-Business Suite using XML Publisher. It describes how to set the Oracle Reports report output to XML, use Concurrent Manager to generate a sample XML file, create an RTF template in Word, and deploy the template to the Template Manager. The goal is to create a customer balance letter report that lists unpaid invoices for a customer using XML Publisher templates.
This document provides an overview of the templating framework for Pinnacle Cart versions 3.7 and above. It describes the layered template structure, which compiles skins by stacking templates from three folders in order of priority: the base template folder, prebuilt template folder, and custom template folder. The compiled skin files are then saved to the compiled folder. It also outlines the languages and technologies used in Pinnacle Cart templates, including HTML, CSS, JavaScript, Xajax, jQuery, XML, and Smarty.
This document provides a help and tutorial for TopStyle Pro version 3.11. It covers getting started with TopStyle, editing style sheets and HTML/XHTML, working with colors, previews, validation, site management, reports, mappings, customization, and third-party integration. It also includes appendices on CSS basics and tips, TopStyle tips and tricks, style sheet resources, keyboard shortcuts, and regular expressions.
TopStyle Help & <b>Tutorial</b>tutorialsruby
This document provides a table of contents for the TopStyle Pro Help & Tutorial, which teaches how to use the TopStyle software for editing style sheets and HTML/XHTML documents. It lists over 50 sections that provide explanations and instructions for features like creating and opening files, editing styles, working with colors, previews, validation, site management, reports and customizing the software. The document was created by Giampaolo Bellavite from the online help provided with TopStyle version 3.11.
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>tutorialsruby
This document provides the course outline for IMD 210 Fundamentals of Scripting Languages at The Art Institute of Atlanta during the Spring 2005 quarter. The course focuses on integrating programming concepts with interface design using scripting languages like JavaScript and CSS. It will cover topics like DOM, CSS layout, JavaScript variables, conditionals, and events. Students will complete 4 assignments including redesigning existing websites, and there will be weekly quizzes, a midterm, and final exam. The course is worth 4 credits and meets once a week for class and lab.
This document provides the course outline for IMD 210 Fundamentals of Scripting Languages at The Art Institute of Atlanta during the Spring 2005 quarter. The course focuses on integrating programming concepts with interface design using scripting languages like JavaScript and CSS. It will cover topics like DOM, CSS layout, JavaScript variables, conditionals, and events. Students will complete 4 assignments including redesigning existing websites, and there will be weekly quizzes, a midterm, and final exam. The course is worth 4 credits and meets once a week for class and lab.
The group aims to bridge gaps between peer-to-peer database architectures and scaling multimedia information retrieval. They develop a probabilistic multimedia database system with abstraction layers for applications and researchers. They also research challenges of peer-to-peer networks for distributed data management. Both lines are supported by the MonetDB platform to exploit custom hardware and adaptive query optimization. The goal is a modular solution linking theoretical optimal solutions to application demands under resource limitations.
Standardization and Knowledge Transfer – INS0tutorialsruby
The group aims to bridge gaps between peer-to-peer database architectures and scaling multimedia information retrieval. They develop a probabilistic multimedia database system with abstraction layers and a flexible model. They also research challenges of peer-to-peer networks for distributed data management. Both lines are supported by the MonetDB platform to exploit custom hardware and adaptive query optimization. The goal is a modular solution linking theoretical optimal solutions to application demands under resource limitations.
This document provides an introduction to converting HTML documents to XHTML, including the basic syntax changes needed like making all tags lowercase and closing all tags. It provides examples of correct XHTML markup for different tags. It also explains the new DOCTYPE declaration and shows a sample well-formed XHTML document incorporating all the discussed changes. Resources for learning more about XHTML are listed at the end.
This document provides an introduction to converting HTML documents to XHTML, including the basic syntax changes needed like making all tags lowercase and closing all tags. It provides examples of correct XHTML markup for different tags. It also explains the new DOCTYPE declaration and shows a sample well-formed XHTML document incorporating all the discussed changes. Resources for learning more about XHTML are listed at the end.
XHTML is a markup language that provides structure and semantics to web pages. It is based on XML and is more strict than HTML. XHTML pages must have a document type definition, html and head tags, and a body where the visible content goes. Common XHTML tags include paragraphs, lists, links, images, and divisions to logically separate content. While XHTML provides structure, CSS is used to style pages and control visual presentation by defining rules for tags. CSS rules are defined in external style sheets to keep presentation separate from structure and content.
XHTML is a markup language that provides structure and semantics to web pages. It is based on XML and is more strict than HTML. XHTML pages must have a document type definition, html and head tags, and a body where the visible content goes. Common XHTML tags include paragraphs, lists, links, images, and divisions to logically separate content. While XHTML provides structure, CSS is used to style pages and control visual presentation through rules that target specific XHTML elements.
This document discusses how to create and use external cascading style sheets (CSS) in Dreamweaver. It provides steps to:
1. Open the CSS Styles tab in Dreamweaver and create a new external CSS stylesheet using a sample text style.
2. Save the stylesheet and link it to a new HTML page to style elements like headings, text sizes, and boxes.
3. Edit existing styles by selecting a tag in the CSS Styles panel and modifying properties directly, or by clicking the tag and using the pencil icon to edit in a window. This allows customizing styles globally across all linked pages.
This document provides an overview of how to create and use cascading style sheets (CSS) in Dreamweaver. It describes the different types of style sheets, including external and internal style sheets. It outlines the steps to create an external style sheet in Dreamweaver using the CSS Styles panel and provides instructions for linking the external style sheet to an HTML page. The document demonstrates how to experiment with predefined styles and how to edit, add, and delete styles in the CSS stylesheet.
This document appears to be a weekly update from an intro to computer science course. It includes summaries of classmates' demographics, comfort levels, and prior experience. It also discusses time spent on problem sets and recommends upcoming courses in CS51 and CS61. Finally, it recommends reading on TCP/IP, HTTP, XHTML, CSS, PHP, SQL and using the bulletin board for questions.
This document appears to be a weekly update from an intro to computer science course. It includes summaries of classmates' demographics, comfort levels, and prior experience. It also discusses time spent on problem sets and recommends upcoming courses in CS51 and CS61. Finally, it recommends reading on topics like TCP/IP, HTTP, XHTML, CSS, PHP, SQL and using bulletin boards, and includes images related to these topics.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables adapting appearance for different devices. The document provides examples of using CSS classes to style template elements and explains how to set up a demo system using the included CSS and templates.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables customization of appearance for different devices. The document provides examples of how to apply CSS classes and rules to Corvid template elements to control fonts, colors, positioning and more.
The document provides an introduction to CSS and how it works with HTML to control the presentation and styling of web page content. It explains basic CSS concepts like selectors, properties and values, and how CSS rules are used to target specific HTML elements and style them. Examples are given of common CSS properties and selectors and how they can be used to style elements and format the layout of web pages.
The document introduces CSS and how it works with HTML to separate content from presentation, allowing the styling of web pages through rules that target HTML elements. It explains CSS syntax and various selectors like type, class, ID, and descendant selectors. Examples are provided of how CSS can be used to style properties like color, font, padding, and layout of elements on a page.
Cascading Style Sheets (CSS) allow users to define how HTML elements are presented on a page. CSS enables changing the appearance and layout of an entire website by editing just one CSS file. CSS uses selectors to apply styles to HTML elements via properties and values. Styles can be defined internally in HTML or externally in CSS files. CSS can control text formatting, colors, spacing, positioning and more to achieve visual consistency across web pages.
Cascading Style Sheets (CSS) allow users to define how HTML elements are presented on a page. CSS enables changing the appearance and layout of an entire website by editing just one CSS file. CSS uses selectors to apply styles to HTML elements via properties and values. Styles can be defined internally in HTML or externally in CSS files. CSS can control text formatting, colors, spacing, positioning and more to achieve visual consistency across web pages.
Driving Business Innovation: Latest Generative AI Advancements & Success StorySafe Software
Are you ready to revolutionize how you handle data? Join us for a webinar where we’ll bring you up to speed with the latest advancements in Generative AI technology and discover how leveraging FME with tools from giants like Google Gemini, Amazon, and Microsoft OpenAI can supercharge your workflow efficiency.
During the hour, we’ll take you through:
Guest Speaker Segment with Hannah Barrington: Dive into the world of dynamic real estate marketing with Hannah, the Marketing Manager at Workspace Group. Hear firsthand how their team generates engaging descriptions for thousands of office units by integrating diverse data sources—from PDF floorplans to web pages—using FME transformers, like OpenAIVisionConnector and AnthropicVisionConnector. This use case will show you how GenAI can streamline content creation for marketing across the board.
Ollama Use Case: Learn how Scenario Specialist Dmitri Bagh has utilized Ollama within FME to input data, create custom models, and enhance security protocols. This segment will include demos to illustrate the full capabilities of FME in AI-driven processes.
Custom AI Models: Discover how to leverage FME to build personalized AI models using your data. Whether it’s populating a model with local data for added security or integrating public AI tools, find out how FME facilitates a versatile and secure approach to AI.
We’ll wrap up with a live Q&A session where you can engage with our experts on your specific use cases, and learn more about optimizing your data workflows with AI.
This webinar is ideal for professionals seeking to harness the power of AI within their data management systems while ensuring high levels of customization and security. Whether you're a novice or an expert, gain actionable insights and strategies to elevate your data processes. Join us to see how FME and AI can revolutionize how you work with data!
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Best 20 SEO Techniques To Improve Website Visibility In SERPPixlogix Infotech
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Taking AI to the Next Level in Manufacturing.pdfssuserfac0301
Read Taking AI to the Next Level in Manufacturing to gain insights on AI adoption in the manufacturing industry, such as:
1. How quickly AI is being implemented in manufacturing.
2. Which barriers stand in the way of AI adoption.
3. How data quality and governance form the backbone of AI.
4. Organizational processes and structures that may inhibit effective AI adoption.
6. Ideas and approaches to help build your organization's AI strategy.
How to Get CNIC Information System with Paksim Ga.pptxdanishmna97
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
Fueling AI with Great Data with Airbyte WebinarZilliz
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
Monitoring and Managing Anomaly Detection on OpenShift.pdfTosin Akinosho
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
Generating privacy-protected synthetic data using Secludy and MilvusZilliz
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfChart Kalyan
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
GraphRAG for Life Science to increase LLM accuracyTomaz Bratanic
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
Your One-Stop Shop for Python Success: Top 10 US Python Development Providersakankshawande
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
Building Production Ready Search Pipelines with Spark and MilvusZilliz
Spark is the widely used ETL tool for processing, indexing and ingesting data to serving stack for search. Milvus is the production-ready open-source vector database. In this talk we will show how to use Spark to process unstructured data to extract vector representations, and push the vectors to Milvus vector database for search serving.
Building Production Ready Search Pipelines with Spark and Milvus
hw4_specifications
1. Homework: XML Exercise
1. Objectives
• Become familiar with the DOM paradigm;
• Use an existing XML parser;
• Transform the content of an XML document into an HTML page containing a
widget.
2. Description
You are required to write an HTML/JavaScript program, which takes the URL of an
XML document containing the final results of selected sports at the 2008 Olympic
Games, parses the XML file, and displays results in an HTML document. The resulting
HTML document will display a collapsible accordion widget with titles of different
sports events. Clicking on a title will display information about the winner of the event in
an HTML table along with a picture and a video related to the event or the athlete from
youtube.com. The JavaScript program will be implemented by embedding it in a HTML
file, so that it can be executed within a browser. You will use jquery library to implement
the widget.
• Your program should display a widget with names of the different events listed as
menu items.
• When the page loads, it would call an HTML/JavaScript function within the
HTML file that parses the XML document given as an input.
• After parsing the XML document, a widget should be displayed consisting of
names of the sports events, read from the XML document, listed as menu items.
For example, given the following XML document:
http://www-scf.usc.edu/~csci571/2009Fall/hw4/Swimming.xml
your program should produce the web page shown in Figure 1 below.
1
2. Figure 1. Resulting web page
• After clicking any menu item, a table should be displayed under the menu item
containing the details of the event winner including the name of the event winner,
winner’s country, the final timing of the event, the picture of the athlete and a
youtube.com video embedded in the last row of the table as shown in Figure 2.
The data shown in the table cells and the URLs for the pictures and the videos are
to be read from the XML document. You will have to embed the video in the
HTML page. See Section 3, Step 5 for details about embedding a YouTube video
in a webpage.
2
3. Figure 2. Table Containing Details of the Event After Clicking the Event Title in Accordion Menu
• If another menu item is clicked, the table containing details of the event should be
shown under it. This action should not affect the state of any other menu item.
That is, if any other menu item is in expanded state (showing the table of details
below it), it should maintain its state as shown in Figure 3.
• Clicking on the menu item in expanded state should result in collapsing it.
• You should use the XML DOM Parser that comes as a built-in component in both
IE and Firefox to parse and validate the XML document. Your code can assume
3
4. that the XML files your program will process will be structured as a “two level
tree” as described in Section 3, Step 1.
• If the XML file is invalid (e.g. missing the closing tag or having tags that
overlap), an error message should be generated as shown in Figure 4.
Figure 3. Multiple menu items in expanded state
4
5. In case of a parsing error, your program should show the following web page:
Figure 4. Page generated from error.xml
For example, the error above is displayed when parsing the file:
http://www-scf.usc.edu/~csci571/2009Fall/hw4/error.xml
Since Firefox DOM implementations do not contain the parseError object, you should
show an alert box if the XML file is not valid, as shown in the following Figure 5:
Figure 5. Error generated from error.xml in Firefox
3. Hints
• Step 1: Writing Your HTML/JavaScript program - Using the DOM Parser
IE and Firefox have a built-in DOM parser. Microsoft DOM implementation is
part of Microsoft XML Core Services (MSXML). An introduction to the
Microsoft DOM can be found at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/xmlsdk/html/a09c098b-7e5a-45ff-b5ad-bc910f736a3f.asp
5
6. The set of DOM enumerated constants can be found at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/xmlsdk/html/e94d1cdf-3d7f-4ac0-8c51-a17d2801519c.asp
Please note that since the MS XML parser does not define the DOM constants as
in Node.ELEMENT_NODE, you will have to define them in your code, as in:
ELEMENT_NODE = 1;
The set of DOM properties, methods and events can be found at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/xmlsdk/html/d051f7c5-e882-42e8-a5b6-d1ce67af275c.asp
Here's how you could use the Microsoft DOM API and the Mozilla DOM API
used in Firefox to load and parse an XML document into a DOM tree, and then
use the DOM API to extract information from that document.
<script LANGUAGE=JavaScript>
//create an instance of the XML parser
if (window.ActiveXObject){ //Checking if the browser is IE
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false" //make sure doc is fully loaded
xmlDoc.load(filename) //load the file in the parser
if (xmlDoc.parseError.errorCode != 0) {
var myError = xmlDoc.parseError;
alert("You have error " + myError.reason);
} else {
// ....... processing the document goes here
alert(xmlDoc.xml);
}
}
else if (document.implementation && document.implementation.createDocument)//for
mozilla based browsers
{
var xmlDoc= document.implementation.createDocument("","doc",null); // NS
xmlDoc.async=false; //make sure doc is fully loaded
loaded = xmlDoc.load(URL);
if(!loaded){
alert(“Error”);
}
else
{
alert(xmlDoc.xml);
}
}
</script>
Now you can generate the widget from the DOM tree. You must make sure to
write your program so it does not explicitly make use of the tag names in the
sample XML file mentioned above. Instead, your program should assume that the
XML files that your program will process will be structured as a three level tree
with the following format:
6
7. <Results>
<event>
<name> . . . </name>
<winner> . . . </winner>
<country> . . .</country>
<final>. . . </final>
<picture>. . . </picture>
<video>. . . </video>
</event>
. . .
<event>
<name> . . . </name>
<winner> . . . </winner>
<country> . . .</country>
<final>. . . </final>
<picture>. . . </picture>
<video>. . . </video>
</event>
. . .
</Results>
Your task is to write a program that transforms this structure into the widget,
where first level tags contain the events, the first tag at the second level for each
event will have the name of the event in the tag name,
e.g.<name>Swimming</name>. All the tags appearing at the second level
<name>, <winner>, <country>, <final>, <picture> and <video> are fixed and
your program may assume that in a certain XML document, the entries at level 2
are always in the same order, and that no entries are missing. However, you do
not know how many records of events may occur in the file. When producing the
output, your program should use the tag names “name”, “winner”, “country”,
“final” and “picture” as the table headers as shown in Figure 2. Please note, the
headers should be dynamically populated from the XML file tags and not from
some constant strings written in the code. Please also note that after clicking the
menu items the tables should be updated dynamically and no page refresh should
occur.
You can access the child nodes of the documents as follows:
mynodes=xmlDoc.documentElement.childNodes;
Note that unlike the Java-based DOM, which provides methods such as
getChildNodes() and getNodeType() that return a node list of children of a
current node and the type of a node respectively, with the DOM you have to
access the element properties directly, as in:
myNodeList= mynodes.item(i).childNodes;
if (myNodeList.item(j).nodeType==ELEMENT_NODE)
7
8. • Step 2: Display the Resulting HTML Document
You should use the DOM document.getElementById(' ').innerHTML method
to produce the required HTML, as in:
html_text="<html><head><title>XML Result</title></head><body>";
document.getElementById('IDofDiv').innerHTML=html_text;
• Step 3: Use JavaScript control syntax
The only program control statements that you will need to use for this exercise are
the “if”, the “for” and some basic string manipulation statements. The syntax of
both “if” and “for” statements is practically identical to the syntax of the
corresponding statement in the C, C++ and Java languages, as in:
if(xmlDoc.documentElement.hasChildNodes()) {
// do stuff
}
for (j=0;j<albumNodeList.length;j++) {
// do more stuff
}
• Step 4: Use JQuery to make widget
•
The documentation for jquery can be found at http://jquery.com or at
http://www-scf.usc.edu/~csci571/Slides/jQueryTutorial.ppt. Jquery has its own UI
library that has multiple widgets in it including the accordion widget. In this
exercise you will NOT use jquery UI library, but make the widget
programmatically. You will need to include the basic jquery library in your page
to make the widget work. You should download the library from
http://jquery.com and include it in your page. One way to include the library and
the JavaScript code in your page is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Assignment 4</title>
<link type="text/css" href="default.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){ // This functions executes when the page has loaded completely
Your jquery and other javascript code goes here
});
</script>
</head>
You just need a few jquery functions to make the widget work. Please look up
the jquery documentation for hide , toggle, slidetoggle(“slow”), removeclass and
8
9. addclass functions. The whole widget functionality can be achieved by writing
less than 10 lines of code.
You can write your own CSS file or use the default.css available at
http://www-scf.usc.edu/~csci571/2009Fall/hw4/default.css
The images maximize.png and minimize.png can be downloaded from:
http://www-scf.usc.edu/~csci571/2009Fall/hw4/images/maximize.png
and
http://www-scf.usc.edu/~csci571/2009Fall/hw4/images/minimize.png
• Embedding a YouTube video in the html document
To show a YouTube video, the webpage should contain the following embedding
code:
<object width="425" height="344"><param name="movie"
value="URL"></param><param name="allowFullScreen"
value="true"></param><embed src="URL" type="application/x-
shockwave-flash" allowfullscreen="true" width="425"
height="344"></embed></object>
where URL in both value and src values should be replaced by the URL contained
in the <video> tag of the XML document.
• Handling of White Spaces in DOM in Firefox
Note, that white spaces are handled differently in Firefox as compared to IE.
Below is the link to the web page that demonstrates how to handle white spaces in
Mozilla:
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM
4. Material You Need to Submit
Complete URLs to both olympics.xml and error.xml are given in Section 2. On your
course homework page, your link for this homework should go to a page that looks like
the one displayed in Figure 1. This page should include your entire JavaScript/HTML
program in a single file. Also you should ‘submit’ your source code and a README file
electronically to the csci571 account, so that it can be graded and compared to all other
students' code via the MOSS code comparison tool.
9