mdinfotech.net  



Watch videos 1-5. Complete the corresponding Google Classroom Assignment. These concepts will be quizzed on.
  • How the Internet Works.
  • In class lesson and demonstration on the client server model.

    Demo: ERR_NAME_NOT_RESOLVED error, IP addresses (via ping), Linux

    Watch the following video and answer the questions below in a Google docs document.
  • Watch The Client Server Model - Clients and Servers
    1. Define client.
    2. Give examples of a client computer.
    3. Give examples of a client program.
    4. What is a server?
    5. What is a virtual server?
    6. Who makes requests?
    7. Who provides repsonses?
    8. What is the client-server model?
    Download index.html and apiexample.js. Run and examine this code and figure out how it works.
    Using the , Ms. Wear will demonstrate how to show images from the random dog images api.
    Download index.html and apiexample.js. Run and examine this code and figure out how it works.
    Pick a Sample URL from Free API's No Key. Copy and paste the JSON into the JSON Formatter and Validator so you can see what it looks like. Using How to Work with JSON in JS as a reference, write a JS Script that displays the JSON data formatted in a basic website. Use CSS and HTML to display it in a Web Friendly manner with basic modern design .
    1. Refer to the TV Maze API.
    2. Download sample code with Lightboxes working: apiexamplewithforloopanddeepapisearc.zip
    3. Using the code provided, show a search bar that allows the user to search for a TV Show.
    4. Then display the TV shows search results along with an episode list
    5. When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.
    6. Validate the HTML and CSS
    7. No JS errors should appear in the console.
    8. Create a simple, attractive, design that works, and looks good, on both devices and desktops.
    Assessment (/15)
    Basic Design of Website							
    Create a simple, modern, attractive, design that works and looks good on both devices and desktops.							
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal, or no CSS Design
    	                                                or does not work on 
    	                                                one of mobile/desktop			
    Added Functionality							
    The code provided shows a search bar that allows the user to search for a TV Show, then display the TV shows 
    search results along with an episode list. You are to add the following functionality:
    When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.							
    	5	                4	               3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues     Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    It does not do what is it supposed to.		
    Code							
    HTML Validates
    CSS Validates
    No JS Error in console
    Practice separation of languages							
    	5	                4	                3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4  issues	        4+ problems         Not coded to standards taught in class.					
    			
    			
    			
    			

    Write a Progressive Web App that is justifiably worth weeks of work and 20% of your final mark. It is an informational or entertainment app that uses data from an API like the ones found in Free API's No Key or More Free API's. If you do use an API from the second list, select one that does not use an API Key or OAuth.

    You may start with a previous assignment from this course, or start a new one from scratch. If you do choose to reuse an assignment, only functionality added since the prior assessment will be counted towards this project.

    Assessment

    Meets Progressive Web App Criteria (/5)
    1. Manifest is recognized and contains basic required info.
    2. Icon used with multiple required sizes for the icon to show up on splash screen and desktop icons.
    3. Manifest refers to multiple sizes of icons.
    4. Service worker that preloads cached files works and app can be used offline.
    5. Chrome's "Install App Name..." creates a working shortcut that opens to the sites homepage, with an appropriate title, in standalone mode (that is, the browser window is not visible).
    6. Splash screen loads correctly on a mobile device.
    7. In Chrome Web Dev Tools, Application > Audit gets all scores in the green zone, and NONE in the red zone.
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal attempt to create PWA.
    
    Usability and Presentation (/5)
    1. easy to use
    2. applies principles of design
    3. attractive design using colors, fonts, css positioning, css effects
    4. responsive design
    5. Appropriate icon used without breaking copyright.
    6. Provides a pleasant, easy to use experience offline.
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal attempt to create attractive, responsive, usable design.
    
    Functionality and Complexity(/5)
    1. the work you put in is justifiably worth 20% of your mark
    2. works on a desktop/laptop
    3. works on a mobile android device
    4. robust (cannot crash it)
    5. reliable (behaviour is reliable)
    6. error checking (can handle invalid input)
    7. has a purpose that will bring users back
    8. has reliable offline functionality
    9. it meets the What Makes a Great App? criteria.
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    A static HTML/CSS website was submitted.
    
    Code (/5)
    1. HTML Validates
    2. CSS Validates
    3. No JS Error in console
    4. Practice separation of languages
    	5	                4	                3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4  issues	        4+ problems         Not coded to standards taught in class.					
    	
    			
    Insert https://cors-anywhere.herokuapp.com in front of the fetch request to your API
    Documentation
    Read the following articles:
  • What Makes a Great Mobile App?
  • 3 Rules of App Design
  • On a sheet of paper, make list of 3 things you could add/modify in your app to make it better. Hand it into Ms. Wear's Wire Inbox.