Create a reasonable professional layout and design

Assignment Help Web Project
Reference no: EM131371565

Fundamentals of Web Development

Learning goals:

  • Implement the HTML5 Cache for offline access.
  • Use JQuery Mobile GUI features to create a small personnel index page that will work offline on mobile devices

Directions:

1. Use your JQuery Mobile template that you created to create a new JQM single page Web site. Name it LastnameFirstnameLab_10.html.  Include all the files that JQuery Mobile requires to work.  Either do this manually or use the downloader on the site. Or better yet, use the Theme roller to create most of the CSS for your site to save time.

Create a CSS3 file called main.css and link it to your page for additional style you will implement.

Make sure that you have the files correctly linked and JQM working before you go further.

We are going to use the JQM Collapsible set here, but we could also use some of the other ListView GUI components or even code the individual data as separate pages in a JQM multipage document.  Feel free to do that if you get engaged in tweaking this project!

2. You will create a simple list of personnel in the context of a small business.  Include 6 people in the list with the all the required data.  You can make this humorous or whimsical.  

For each person construct the following information:

  • Photo (a humorous jpg image)
  • Full Name (FirstNameLastname)
  • Title (Chief Executioner, Headmaster, etc...)
  • Telephone Number
  • Email Address

3. Consult the demos on the JQuery Mobile site on the collapsible (https://demos.jquerymobile.com/1.4.5/collapsible/) and implement a collapsible list that shows the photo on the left (for instance, set it to about 25% width) and the full name and when clicked, expands to show the other information fields.  Feel free to use one of the other JQM GUI elements to display this data as long as you implement a comparable display of this info.

Take some time to create a reasonable layout/display for these information fields. Of course, each person should have the same layout/display for consistency.

4. Use the JQuery Mobile theme or style the appearance of your page yourself with the CSS3 file as you wish. Create a reasonable, professional layout and design.

5. Now code the page to work offline by creating the HTML5 Cache file and linking it to the main page.

6. You may have to mount your page on UC Filespace to test the Caching. Some browsers seem to automatically cache pages and some prompt the user. Visit the page and if prompted download it.  Then, disconnect the internet connection and try to return to the page to view the local copy.

Get some screen shots of the page showing the interaction of the interface.  Paste them here:

7. Zip your completed Web files(HTML and CSS) and this Word doc into a single archive called LastnameFirstname_Lab_11.zip.  Submit this and a separate copy of your doc file with the Bb assignment mechanism.

Reference no: EM131371565

Questions Cloud

Create a process explanation or instruction set : How to Prepare Financial Statements.- How to Analyze the Financial Health of a Company.- How to Set Up a Company in QuickBooks. - How to Record Transactions Using QuickBooks.
Construct a bivariate cross-tabulation for these data : A public health researcher theorizes that men are more likely to smoke than women are. The researcher gathers the following information from 25 subjects (M=Male; F=Female; s =Smoker; N=Non-smoker).
Review the aerticle and provide an analysis of the article : In the review, be sure to include an analysis of the article. Provide details and evidence to back up your analysis from the article. What are some of the significant points used in the article to support the premise? Why are these points signific..
Give the correct iupac name for the compound : Explain why the name given for each of the following alkanes is not the correct IUPAC name. Give the correct IUPAC name for the compound.
Create a reasonable professional layout and design : IT 2040C Fundamentals of Web Development. Use the JQuery Mobile theme or style the appearance of your page yourself with the CSS3 file as you wish. Create a reasonable, professional layout and design
Mayority of analgesics have an aromatic ring : Why the mayority of analgesics have an aromatic ring in their structure?
Calculate phi for these data : A poll of 80 state legislators finds that 30 Republicans favor an income tax rebate, while 5 Republicans do not favor it. Similarly, among 45 Democrats, 20 favor the tax rebate and 25 do not. Calculate phi for these data.
Environmental and health issues in the school-aged child : What correlations did your research show between environmental and health issues in the school-aged child? Make sure to include references to the article(s) you consulted.
Policy statement is specific or ambiguous : Determine and state whether or not the following policy statement is specific or ambiguous. If you say ambiguous, rewrite the statement to mitigate the problems you identify. Finally, identify one or more metrics that can be used to effectively measu..

Reviews

Write a Review

 

Web Project Questions & Answers

  How architectural and protocol changes occur

Discuss how architectural and protocol changes happen, the administrative organization that oversees the technical development of the Internet,

  Creating a gaming web page

Build a Web page called "game.html" and add a layer to it, which will be treated as an object, with an picture for its contents. Add another picture which will start the game when clicked on.

  What is the new functionality

What are the main concepts and metaphors that have been used for each (think about the way time is conceptualized for each of them)?

  What is an example of funding for a project

What is an example of funding for a project that is only available for a short period of time under special circumstances?

  Embarking upon an enterprise-wide system integration project

Advantage and disadvantage for embarking upon an enterprise-wide system integration project

  Why are you accessing the spa website

Why are you accessing the Spa website? What if the system required you to register and login to schedule an appointment?

  Create a website page creation for fashion designer

Create a Website Page Creation for fashion designer. The webpage should contain scissors, sewing machines, tape measure and different types of African fashion dresses for females. The prices for the dresses should range from $75 to $100.

  Create a master page with a theme of your own

Explain the use of Master pages and themes, create a master page with a theme of your own, the master will contain a simple welcome page and the calculator page you created from the prior week.

  Ackpacker''s hostel in the heart of rishikesh box

Project on an hotel it includes all css and html jquery files, Requirement of assignment:--1. Backpacker's hostel in the heart of Rishikesh box to be removed just keep the text, Change the Café name with "Rooftop Café"

  Assignment on world-wide web application development

World-Wide Web Application Development, When the user clicks on add, you should make sure that a valid quantity has been entered, calculate the total price for that fish and display the fish, price, quantity as well as the line item price (price*q..

  Design and implement a stand-a-alone application

Design and implement a stand-a-alone application that is a web-based front-end acceptable use statement/policy (disclaimer) and database. This front-end policy will provide users and/or prospective users of our clients' web site, a clear understan..

  Compare the web pages of the world trade organization

Compare the Web pages of the World Trade Organization (www.wto.org) and other organizations that advocate free trade with the Web pages of the Trade Observatory.

Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd