Interactive Design - Project 2

08/05/2023-22/05/2023(Week 6 - Week 8)

Chai HongHong/0354211

Interactive Design/Bachelor of Design (Honours) in Creative Media








INSTRUCTION 




LECTURES                                      


Week 6: Language of The Web Part 1

Web Standards
  • In the early days of the web, everyone accessed the web using a keyboard, mouse, and monitor.
  • Today, there is much more variety in the ways people access the Web.
  • Many people do so on their phones or other pocket mobile devices.
  • Many people do so on tablet computers with touch screen interfaces instead of keyboards and mice.
  • Some people access the web through audible interfaces (they talk to the computer, or they listen to the computer talk to them, or both).
  • Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.
Hardware and Software Issue:
  • Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari and others.
  • People use a variety of operating systems, including Windows, Mac OS and Linux.
  • People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
  • With the diversity in the way people access the web, there's a very high probability that the website will look different to many of the visitors than it does to ones.
  • Despite these differences, the most important part of the website is its content, and all users should be able to access that.
  • The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
  • Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access the site.
  • The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
  • The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we'll be using in this course are:
    • HTML
    • CSS
Why web Standards?
  • To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow the web standards.
  • When developers follow the web standards, the development is simplified, since it is easier for a developer to understand another's coding.
  • Using web standards will ensure that all browsers will display the website properly, without time-consuming rewrites.
How the web works?
  • When visiting a website, the web server hosting that site could be anywhere in the world.
  • In order for one to find the location of the web server, the browser will first connect to a Domain Name System (DNS) server.
    1. When connecting to the web, do so via an ISP. Type a domain name or web address into the browser to visit a site.
      • eg: www.google.com, www.bbc.co.uk
    2. The computer contacts a network of servers called DNS servers. These act like phone books; they tell the computer the IP address associated with the requested domain name. Every device on the web has a unique IP address; it’s like the telephone number for that computer.
    3. The unique number that the DNS server returns to the computer allows the browser to contact the web server that hosts the website requested. A web server is a computer that is constantly connected to the web and is set up especially to send web pages to users.
    4. The web server then sends the page that is requested back to the web browser.
    Structure of a web page
    1. Understanding structure
    2. Learning about markup
    3. Tags and elements
    • We come across all kinds of documents every day; newspapers, insurance forms, catalogues, etc.
    • Many web pages act like electronic versions of these documents.
    • In all kinds of documents, the structure is very important in helping readers to understand the messages we are trying to convey and navigate around the document.
    How pages use structure?
    • The stories read in a newspaper. Each story will have a headline, body copy and images. If the article is a long piece, there may be subheadings that split the story.
      • Structure helps readers to understand the stories in the articles.
      • The structure is very similar when a news story is viewed online. 
    • A very different type of document like an insurance form. It has headings for different sections and each section contains a list of questions with areas for the purpose to fill in details or checkboxes to tick. 
      • The structure is very similar online.
    • The use of headings and subheadings in any document often reflects a hierarchy of information.
    • Any document will start with a large heading, followed by an introduction or the most important information.
    • This might be expanded upon under subheadings lower down on the page.
    • When using a word processor to create a document, we separate out the text to give it structure.
    • Each topic might have a new paragraph and each section can have a heading to describe what it covers.
    HTML describes the structure of pages
    • In the browser window, can see a web page that features exactly the same content as the Word document.
    • To describe the structure of a web page, we add code to the words we want to appear on the page.
    • The HTML code is made up of characters that live inside angled brackets '< >' (These are called HTML elements and are usually made up of two tags: an opening tag and a closing tag).
      • <element>Information</element>
    • Each element tells the browser something about the information that sits between its opening and closing tags.



                                        Project 2                                      

    The goal of this assignment is to convert the static prototype from Project 1 into a fully functional interactive web page. I'll apply my web layout class knowledge to create a working website that closely aligns with your original prototype.
    Review the static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
    Convert design elements into code using HTML and CSS, ensuring faithful reproduction of original prototypes.
    The goal is to achieve pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
    Upload the file in Netlify and submit the link here.


    Fig.1.1

    Fig.1.2



    I uploaded all the files to GitHub, then I can get my website.


    Final Submission


    Fig.1.3


    Fig.1.4


    Fig.1.5










     


    Comments

    Post a Comment

    Popular posts from this blog

    Games Development

    Image
    23.04.2025 - 27.07.2025 (Week1-Week15) ZengYu/035538​​​​8 Chai HongHong/0354211 Bachelor of Design (Hons) in Creative Media Game Development INSTRUCTIONS Our Google Drive Submission Link： https://drive.google.com/drive/folders/1J4MP9nAnGTgJlgFNlyGJDq4o1plwtkaO?usp=drive_link Task 1 -  Game Design Document   In this task, we are required to design a 2D side-scrolling/platformer game and create a Game Design Document (GDD). The GDD should outline: Game concept and mechanics Character design and abilities Level and world design Art style and visuals Weekly Progress Final Proposal Submission Task 1 Feedback We named the game "Run, Eggsy!", which shaped the core concept and gameplay framework of the game eggman's adventure. Our goal is to create a humorous, trap-filled platformer inspired by games like Level Devil, with a unique twist on the typical puzzle adventure formula. While the project is still in progress, here are some key observations and conclusions so far: Clear ch...
    Read more

    Advanced Typography / Final Compilation & Reflection

    Image
    30.08.2023-29.11.2023（Week1-Week14） Chai HongHong/0354211/Creative Media Design. Advanced Typography /  Final Compilation & Reflection                                 INSTRUCTION Task 1:  Typographic Systems & Type & Play Task 2:  Key Artwork and Collateral Task 3:   Type Exploration and Application SUBMISSIONS Task 1 Exercise 1/Typographic Systems Fig.1.1. Axial Final attempt. Fig.1.2. Radial final attempt Fig.1.3. Modular final attempt Fig.1.4. Random final attempt Fig.1.5. Dilatational attempt Fig.1.6. Transitional final attempt Fig.1.7. Grid final attempt Fig.1.8. Bilateral final attempt PDF.1.1. Task 1/Exercise 1/Typographic Systems PDF.1.2. Task 1/Exercise 1/Typographic Systems/Grid Exercise 2/ Type & Play Fig.1.8. Final A Fig.1.9. Final L Fig.1.10. Final M Fig.1.11. Final U PDF.1.3. Task 1/Exercise 2 Fig.1.12. Final Poster  PD...
    Read more

    Application Design I / Final Task

    Image
    16.06.2023 - 24.07.2023 / Week 12 - Week 16 Chai HongHong / 0354211 Application Design I / Bachelor of Design (Hons) in Creative Media Final Task /  High-Fidelity Prototype INSTRUCTION  Final Task:  High-Fidelity Prototype Original Design In this task, a high-fidelity prototype is to be created for the mobile application. This prototype showcases the final visual design, interactions, and functionality of your application. In this interface, touch the option box will turn green. Fig.1.1. If you log in with a Google account, you can directly enter the main page, and the main page will pop up your personal information. The user profile picture and user nickname will be the same as the default Google account information. Fig.1.2 The search history and recommended music types will be displayed on the Search interface. Search for songs in the record, and it will be played directly after clicking. Recommended music genres are updated and changed frequently. The circle will boun...
    Read more