Untitled Quiz
40 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is a wireframe in web design?

  • An outline that visualizes a website's structure (correct)
  • A final version of a website's layout
  • A coding language used for web development
  • A detailed graphical representation of a website

    • Which viewing pattern describes how users typically read web pages?

  • An F-shaped pattern starting across the top (correct)
  • A linear pattern that goes down the page only
  • A circular pattern starting from the center
  • A Z-shaped pattern that highlights vertical content

    • What is the purpose of active white space in web design?

  • To distract users from the main content
  • To fill empty areas with color
  • To frame the entire screen in black
  • To structure and separate content effectively (correct)

    • What does parallax scrolling achieve in web design?

    <p>It offers depth and enhances user engagement</p> Signup and view all the answers

    What should be included in a wireframe for effective web design?

    <p>Navigation buttons and company logo representation</p> Signup and view all the answers

    Which grid layout is commonly used to provide placement guidelines for page elements?

    <p>Four-column grid</p> Signup and view all the answers

    What is the Z-layout useful for in web design?

    <p>Addressing branding, hierarchy, structure, and calls to action</p> Signup and view all the answers

    Why is it recommended to use design programs like Adobe Dreamweaver instead of Photoshop?

    <p>Photoshop is primarily for photo editing, not web design</p> Signup and view all the answers

    What is one primary use of the Slice tool in web design?

    <p>To optimize the loading speed of image-heavy pages</p> Signup and view all the answers

    Which method can NOT be used to create slices in Photoshop?

    <p>Automatically generating slices from individual shapes</p> Signup and view all the answers

    What must be selected to save slices with assigned URLs in Photoshop?

    <p>HTML and Images in the Format pop-up menu</p> Signup and view all the answers

    How can you resize a slice in Photoshop?

    <p>By dragging any of its corner or center handles</p> Signup and view all the answers

    What tool should you use to draw guides in Photoshop before slicing?

    <p>The Ruler tool</p> Signup and view all the answers

    What happens if you use 'Save As' instead of 'Save for Web' in Photoshop after slicing?

    <p>All slice options will be lost</p> Signup and view all the answers

    What can you do to move a selected slice only horizontally or vertically?

    <p>Hold the Shift key while dragging</p> Signup and view all the answers

    What is a key advantage of using the Slice tool for building a website prototype?

    <p>It helps visualize navigation through hyperlinks</p> Signup and view all the answers

    What is one major characteristic of free hosting?

    <p>Limited technical options are available</p> Signup and view all the answers

    Which hosting type is most suitable for large websites with high traffic?

    <p>Dedicated Hosting</p> Signup and view all the answers

    What is the purpose of using wireframes in web design?

    <p>To allow focus on layout without design distractions</p> Signup and view all the answers

    Which step comes first in the registration process for a free hosting site?

    <p>Register for a subdomain</p> Signup and view all the answers

    What does collocation hosting allow a user to do?

    <p>Place their own web server on a service provider's location</p> Signup and view all the answers

    In shared hosting, what is provided to the user after successful payment?

    <p>Account details sent through email</p> Signup and view all the answers

    How can your own PC function as a web server?

    <p>It should be connected to a network</p> Signup and view all the answers

    What is a primary advantage of using wireframes in the web design process?

    <p>They emphasize the layout of the website</p> Signup and view all the answers

    What does the confirm box in JavaScript return when the user clicks 'OK'?

    <p>true</p> Signup and view all the answers

    Which of the following statements about JavaScript is correct?

    <p>JavaScript is interpreted at runtime.</p> Signup and view all the answers

    What will happen if the user input for the prompt is '2'?

    <p>The alert will show 'Your choice is number two'.</p> Signup and view all the answers

    What is the purpose of the return statement in a JavaScript function?

    <p>To specify a value returned from the function.</p> Signup and view all the answers

    What does the indexOf method return if a character is not found in a string?

    <p>-1</p> Signup and view all the answers

    What will the alert display if the user submits an empty username in a form validation?

    <p>Username is required.</p> Signup and view all the answers

    What is the purpose of placing a script inside a function?

    <p>To prevent the script from running when the page loads.</p> Signup and view all the answers

    What happens in JavaScript when a user presses 'Cancel' in a confirm box?

    <p>It returns false.</p> Signup and view all the answers

    What is a scripting language generally defined as?

    <p>A lightweight programming language</p> Signup and view all the answers

    Which of the following is NOT a feature of JavaScript?

    <p>Managing server requests</p> Signup and view all the answers

    Who developed JavaScript?

    <p>Brendan Eich</p> Signup and view all the answers

    How can JavaScript be included in an HTML page?

    <p>In both the <body> and <head> sections</p> Signup and view all the answers

    What distinguishes Java from JavaScript?

    <p>Java is a server-side programming language</p> Signup and view all the answers

    Which of the following statements about JavaScript syntax is TRUE?

    <p>JavaScript can be easily integrated into HTML</p> Signup and view all the answers

    In which situations can JavaScript be executed?

    <p>Immediately as the page loads</p> Signup and view all the answers

    Which of the following languages is comparable to Java, but NOT JavaScript?

    <p>C++</p> Signup and view all the answers

    Study Notes

    IT0043 Web Design With Client Side Scripting

    • IT0043 is a course on web design with client-side scripting.
    • It is offered by the Innovation College, which is part of FEU.

    Module 7 Web Server

    • A web server is a collection of web pages, creating a website.
    • To share web pages with others, the website must be published.
    • A personal computer can act as a web server if it is connected to a network.
    • Using an Internet Service Provider (ISP) is the most common method to publish a website.

    Host Types (1. Free Hosting)

    • Free hosting is best for small websites with low traffic, such as personal sites.
    • It's not recommended for websites with high traffic or for business use.
    • Technical support is often limited.
    • The options and security features are few.
    • Good: Low cost, good for family, hobby or personal sites, free email
    • Bad: No domain names, few/limited or no software options, limited security, limited/no database support, limited technical support

    Host Types (2. Shared(Virtual) Hosting)

    • Your website gets its own domain name hosted on a powerful server alongside hundreds of others.
    • Good: Low cost, shared cost, good for small business with average traffic, multiple software options, own domain name, good support
    • Bad: Reduced security, restrictions on traffic volume, restricted database support, restricted software support

    Host Types (3. Dedicated Hosting)

    • This is the most expensive option and best suited for large websites with high traffic.
    • Good: Excellent for large businesses, high traffic, multiple domain names, powerful email solutions, powerful database support, extensive software support.
    • Bad: Expensive, requires higher skills

    Host Types (4. Collocated Hosting)

    • Your own web server is located on the premises of a service provider.
    • Good: High bandwidth, high uptime, high security, unlimited software options
    • Bad: Expensive, requires higher skills, harder to configure and debug.

    Registration to Free Hosting Site

    • Sign up and register for a subdomain.
    • Email notifications send login details to the control panel.
    • Upload your website to the root folder.

    Shared Hosting

    • Select a hosting package and register a domain name.
    • Receive account details by email after payment.
    • Log in to the control panel (cPanel).
    • Manage files through the File Manager.
    • Upload your website.

    Site Planning and Photoshop Template

    • Web designers create mockups (sketches) for page layouts.
    • These layouts portray the general structure of the website home page and other pages.

    Wireframe

    • Website wireframes are simple line drawings that show how site elements are arranged.
    • Use them to focus on the layout before adding color, type, and other design elements.

    Web site Visual Structure

    • A web page's structure depends on the grid or template the designer chooses.
    • Page templates provide guidelines for arranging content elements.
    • These layouts often allow elements to extend across multiple rows and columns.

    Areas of active and passive white space

    • Active space arranges and separates content.
    • Passive space includes the border area of the screen.

    Paper and Landscape, and F-based viewing patterns

    • Humans tend to scan web pages from left to right, top-to-bottom, as if reading print.
    • Page elements placed at the top-left and top of the page grab the eye first.
    • Sometimes, a clockwise pattern is also observed by users.

    Z Flow Pattern

    • The Z-layout pattern is an effective layout for many web design projects.
    • It satisfies design requirements for: branding, hierarchy, structure, and call to action.

    Parallax Flow Pattern

    • Parallax scrolling enhances user experience through dynamic interaction and engagement, helping convey the brand story.
    • Parallax allows webpage components to move at different speeds as the user scrolls.

    What to include in a Wireframe?

    • All website page elements need to be represented.
    • Simple shapes replace actual graphics. Label them.

    Wireframes-Navigation, Company Logo, and Content Areas

    • Include buttons for navigation to different site sections.
    • Represent the company logo with a basic box.
    • Mark different sections for various content placement.

    Wireframe

    • A prototype/outline of a website which serves as the foundation of the site's development.
    • Acts as a preliminary sketch of the website.
    • Serves as a communication tool between both the designer and the user.

    Sitemap

    • A visual map of website navigation.
    • The more complex the site, the more intricate the sitemap.

    Website Mockup and Web Template

    • While Photoshop can be used to build web pages, dedicated programs like Adobe Dreamweaver are better suited for the task.
    • Photoshop's Slice Tool is helpful for building website prototypes.
    • Allows to give clients a better idea of how the navigation would feel.
    • It also helps to make an image map and speed the load of an image-heavy page.

    Creating Slices

    • Draw outlines around areas to be sliced in Photoshop.
    • Use the Slice tool.
    • Click "Slices From Guides" in the Option bar.

    Resizing and Moving Slices

    • Resize slices by dragging handles (tiny squares) to adjust size.
    • Drag a slice to move it by clicking within the slice. Pressing and holding Shift key constrains the movement to horizontal or vertical.

    Saving Slices

    • Use Photoshop's "Save for Web" dialogue box options to set file type, compression, and other settings.

    Saving Slices and Storing Files

    • Choose "HTML and Images" from the Format popup menu in the Save Optimized As dialog box.

    Module 6 JavaScript

    • A client-side scripting language.
    • Used for interactive elements in website.
    • Does not need to be a programmer to learn.
    • Key to understand HTML and CSS.

    JavaScript Intro

    • JavaScript is an advanced web design tool.

    What you should know

    • HTML (Markup)
    • CSS (Style sheet language)

    You don't need to be a programmer

    • Learning JavaScript is accessible to non-programmers.

    HTML

    • Basic HTML structure
    • Sample HTML structure

    Connect

    • CSS for Styling HTML elements

    JavaScript Introduction

    • HTML is Markup; CSS is for Style; JavaScript is for Behaviour.
    • JavaScript enables website interactivity.

    What is scripting language?

    • JavaScript cannot access local files, databases, or hardware.
    • It is a client-side language.

    JS: Client-side Language

    • JavaScript runs on the user's computer.

    What is JavaScript?

    • Designed for adding interactivity to HTML pages.
    • A scripting language.
    • Easy-to-learn programming language.

    Other uses of JavaScript

    • Acrobat
    • Photoshop
    • Node.js
    • Google Apps Script

    Issues with a Client-Side Language

    • JavaScript can be turned off by the user.

    A bit of History

    • JavaScript evolution
    • Different versions, languages

    What do you need to write JS?

    • A simple text editor

    Are Java and JavaScript the same?

    • No, completely different languages.
    • Java is object-oriented and much more complex than JavaScript.

    What can a JavaScript do?

    • React to events (page loading or user actions).
    • Read and write HTML elements.
    • Validate data.
    • Detect the visitor's browser.

    JavaScript Structure

    • Sample JavaScript structure

    JavaScript Where to!

    • Can be placed in the <head> or <body> sections of an HTML file.
    • Scripts run as the page loads.

    JS is interpreted not compiled

    • JavaScript runs directly without needing a compilation step.

    JS is case-sensitive!

    • Case sensitivity in JavaScript code.
    • Correct capitalization is essential.

    JavaScript vs HTML

    • HTML is not case sensitive.
    • JavaScript is case-sensitive

    JS Statements

    • Example statements in JavaScript
    • Function calls and operations within the code.

    Best practices

    • Spacing and structure of code.
    • Correct syntax usage

    JavaScript Comments

    • Single-line and multi-line comments

    JavaScript Execution Order

    • Sequence of execution for JavaScript code

    Sample: Embedding Script in HTML

    • How to add <script> elements to the code.

    Sample: Script Positioning

    • Placement of `<script> content in HTML.

    JavaScript Fundamentals

    • Core JavaScript concepts.

    JavaScript Popup Boxes (Alert)

    • Displaying message boxes to the user.

    JavaScript Popup Boxes (Confirm)

    • Display verification dialog boxes.
    • User verifies by clicking "OK" or "Cancel".

    Note:

    • Using Javascript to confirm valid email

    Note:

    • Using Javascript for webform validation

    JavaScript Prompt (User Input)

    • Gathering user input through a prompt dialogue box.

    JavaScript Functions

    • Basic overview of functions

    JavaScript Functions (Sample)

    • Simple example of a function

    The Return Statement

    • Returning a value from a function

    The Lifetime of JavaScript Variables

    • Local variables vs. global variables.
    • Lifetime of local & global JavaScript variables.

    JavaScript For Loop

    • JavaScript loops allowing execution for a specified duration or condition.
    • Both for and while loops.

    For Loop

    • Example of a JavaScript for loop.
    • Loop code to execute a specified number of times
    • Display numbers

    JavaScript While Loop

    • Used to execute a block of code repeatedly as long as a condition is true.
    • Syntax explanation

    While Loop Example

    • Shows a sample implementation in HTML

    The do...while Loop

    • Execute loop once, then repeats until condition is false.
    • Provides looping syntax example

    The do...while Loop

    • Example of code implementation

    JavaScript Break and Continue Statements

    • The break and continue statements to control loops and code execution flows.
    • Examples for break statements in loops and code execution flows

    Module 5 Web Design Principles

    • Principles for effective web page design.
    • Focus on the user experience.

    Designing "Home" Page

    • Critical information and updates that may be relevant and beneficial to the user

    Web Content

    • Purpose-aligned content.
    • Organization and accurate spelling for better readability.
    • Current, relevant, and appropriate content for the audience.

    Level of Web Technology (minimal)

    • Designed for quick loading times, without sacrificing required information.
    • Mostly text. Limited graphics, no special formatting or animation.

    Level of Web Technology (middle of the road)

    • Designed with some visuals to enhance readability.
    • Graphics and style are aligned with content.

    Level of Web Technology (high-tech style)

    • Designed for detailed interactive experiences with high-end displays.
    • Lots of visuals, including animations and applets.

    Page Design

    • Essential elements for good page design
    • Includes "back to home", consistent template, sufficient contrast.
    • Practical tips for designing effective layouts.

    Web Typography

    • Important concepts for typography.
    • Includes fonts, size, legibility, and combining fonts.

    Visual Hierarchy

    • Arranging content in a manner that promotes an easy-to-follow flow.
    • Effective layout to attract user's attention.

    Q&A Session

    • Questions and discussion about visual hierarchy in web design.
    • Addressing issues from audience perspective.

    Q&A Session

    • Questions & discussion about micro-interactions

    Sample of Micro-interaction

    • Examples showcasing how micro-interactions communicate status and enhance user experience.

    4 Parts of Micro-interactions

    • Describes the critical parts required to build micro-interactions.

    Triggers

    • Triggering user/system actions.

    Rules

    • Rules determining interaction actions and outcomes

    Feedback

    • Provides feedback to the user conveying how the interaction is taking place

    Loops and Modes

    • Determining the meta-rules of micro-interactions.
    • Exploring how micro-interactions adapt to changing conditions

    How to design micro-interactions

    • Emphasizes the critical and engaging design process of building effective micro-interactions.

    Keep in Mind

    • Tips for designers to consider to create an effective user experience when designing micro-interactions within the app.

    Tools to design Micro-interactions

    • Various tools available for designers to create effective micro-interactions.
    • Selecting appropriate tools for designing micro-interactions.

    Introduction to Usability and User Experience in Web Design

    • Usability involves the ease of interaction and navigation of a website.
    • UX is about how the site is perceived and experienced by users.
    • Focus on these aspects enhances a website's experience for users.

    Why Usability and User Experience are Vital

    • Understanding the importance of site navigation and usability.
    • The concepts of how it impacts the user experience of the website.

    4 Fundamentals of Usability

    • Key aspects for web design that improves site experience and usability.

    Clear Navigation

    • Clear navigation improves website usability and user experience

    Performance

    • Optimizing website speed and performance is crucial for user experience.

    Readability

    • Design elements which enhance content readability including font selection and sufficient contrast.

    Responsiveness

    • Adaptation of website design to different screen sizes and devices (mobile, tablets, desktop)

    Conclusion

    • Crucial characteristics for well-designed websites.

    C.R.A.P. Principles of Graphic Design

    • Emphasizes the principles of contrast, repetition, alignment, and proximity in graphic design.

    Learning Objectives

    • Detailed overview of objective descriptions for the course.
    • List of popular web design trends.

    Module 4 Responsive Web Design

    • Designing websites that adapt to varying screen sizes and device types.
    • Focus on building responsive user experiences; a responsive web design.
    • Using HTML hyperlinks.
    • Adding attributes for creating links.
    • Embedding images within hyperlinks.

    Adding images to the body content

    • Adding images to a webpage, either static or animated, can make webpages more engaging and pleasant to use.

    File format/Web Output

    • Describes various file formats (JPEG, GIF, PNG, WBMP) and their suitability for web use, considering compression, colors, quality, and file size.

    Inserting Image

    • Inserting images on a web page using HTML tags, including the src and alt attributes, and height and width customization

    Inline Images and background images

    • Placing images directly within the website text and adding a background image to the webpage.

    Tag and Attributes

    • Details associated with the tag and its attributes (src, alt, width, height).

    Tables

    • Explanation of tables as a basic element to organize information into rows and columns.
    • Using various tables tags <table, <tr>, <th>, <td>).

    Captions and Summaries

    • Using <caption tags to add descriptive text (<caption>).

    Table widths

    • Controlling the width of tables on the screen using the table width attribute.
    • Setting the table width to specific values or percentages

    Horizontal Alignment, Cell Margins

    • Controlling and customizing table elements' positions.

    Formatting Tables

    • Applying CSS to control formatting tables.

    Borders, Empty Cells

    • Adding borders and handling empty cells in HTML tables.

    Cell Margins

    • Customizing the padding around table cells using cellspacing and cellpadding attributes.

    Understanding Rowspans and Colspans

    • Using the rowspan and colspan attributes to manipulate cells across multiple rows and columns within a table.

    HTML Table Activity, HTML Table Hands-on Quiz, 1., 2

    • Exercises/activities to test knowledge on table implementation (<tr>, <th>, <td>, <caption>).

    Module 3 CSS

    • Introduction to CSS for styling websites.

    Basics of CSS and CSS3 Overview

    • Discusses introduction to stylesheets, outlining the fundamental concepts needed to build a website.

    Objectives

    • Clarifies objectives for the module regarding webpage styling using CSS and CSS3.

    CSS, HTML Today

    • Discusses the common use of HTML and CSS in web publishing.

    Pure CSS

    • Emphasizes simple styling without reliance on third-party libraries or frameworks.

    Objectives

    • Objectives for learning how to modify website styling elements using CSS.

    Background in Web

    • Explains the significance of backgrounds in website design.
    • Emphasizing various aspects of backgrounds in relation to design and user experience

    CSS Background

    • Explains various properties which can modify, control, and implement styling characteristics within the background of webpage elements (e.g., color, image)

    CSS Background in Action Examples

    • Real-world examples illustrating specific CSS background approaches.
    • Specific examples showcasing actual implementations that illustrate the integration process of CSS into website elements.

    Responsive Full Screen Image Background

    • Implements responsive approach to dynamically adjust the background image to fit various screen sizes

    Video Background

    • Implements responsive background images, including video, that dynamically adjusts to accommodate various screen sizes.

    Gradient Background with image Overlay

    • Implementing image backgrounds with gradient overlays.

    Parallax Background

    • Description and implementation of parallax scrolling backgrounds.

    Styling for a beautiful Website Design: Typography

    • Importance of Typography and related concepts

    Readability Issue

    • Practical reasons and rationale for designing for better readability in webpages

    Texts in Web Design

    • Importance of typography considerations to effectively communicate content; importance of clear text.

    Hierarchy

    • Importance of hierarchy in web design and its relevance in page structure and content presentation.
    • Guiding users' eyes to the most important information.

    Leading

    • Provides space between lines which improves readability.

    Tracking

    • Controls the horizontal spacing between characters.
    • Explaining the significance and implications of consistent character spacing.

    Kerning

    • Specifically addressing the space between characters within a word.
    • Identifying and illustrating examples of well-designed and poorly-designed kerning.

    Font

    • Importance of font choice and various factors affecting font design (size, style, color, alignment, margin, and spacing).

    Font Family

    • Describing font families and their properties and examples.

    Categories of Fonts

    • Different font categories.
    • Illustrating various common font families with their characteristics; distinguishing characteristics.

    Fonts to Avoid

    • Highlighting common fonts associated with outdated or overused styles.

    Combining Fonts

    • Recommending approaches to combining various font styles; enhancing the visual appeal of webpages

    CSS Text Effects in Action Example

    • Displays examples of various CSS text effects.

    1. Animated Text with Image Fill

    • Describes functionality and implementation methods for animated text with image background.
    • Showing how the background-image property combined with animation principles can be used to create visually engaging text effects that enhance user engagement with websites.

    2. Animated Text with Moving Background

    • Demonstration and functionality of animated text with moving background images within the code.

    CSS Box Model

    • Divides page elements into containers for better layout and design management.
    • Describes how elements, margins, borders, and padding function to create the overall webpage appearance.

    Module 1 Introduction to Web Technologies

    • Introductory concepts for web technologies.
    • Describing various computer concepts and technologies.

    The Internet Versus the World Wide Web

    • Explains the differences between the Internet and the World Wide Web (WWW).
    • Discusses the infrastructure, fundamental concepts, methodologies, and functionalities associated with the Internet and WWW.

    About The Internet

    • Explanation of the Internet's fundamental characteristics and functions; defining its structure and protocols.

    About The World Wide Web

    • Defines the World Wide Web (WWW) and its relations to the Internet.

    How the Web Works

    • Explaining the process of how the web works.

    Webpage

    • Defines a webpage and its role in the web and providing information on webpages.

    Website

    • Defines a website as a collection of interconnected web pages functioning as part of a unified online service.

    Web Browser

    • Describes a software application used to access and interact with interconnected web pages and content within the World Wide Web.

    Web Server

    • Describes a computer running software, also known as web servers.
    • These special computers function as data storage and delivery points to display and serve files requested by the user; acts as storage.

    URL

    • Explains the Uniform Resource Locator (URL) addresses used to locate websites and resources on the web.
    • Clarifies the component parts of a URL and their functions

    HTML

    • Describes HTML as the standard language used for creating web pages.
    • Explaining it as a crucial element of webpage design and development.

    Must-Learn Development Languages

    • Front-End vs. Back-End Development
    • Defining front-end and back-end development as crucial aspects in web development, highlighting the different types of languages and associated skills that are used in the process.

    References

    • A list of recommended resources for further learning and exploration.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    CSSREVIEWER-compressed PDF - Web Design with Client-Side Scripting

    More Like This

    Untitled Quiz
    55 questions

    Untitled Quiz

    StatuesquePrimrose avatar
    StatuesquePrimrose
    Untitled Quiz
    18 questions

    Untitled Quiz

    RighteousIguana avatar
    RighteousIguana
    Untitled Quiz
    50 questions

    Untitled Quiz

    JoyousSulfur avatar
    JoyousSulfur
    Untitled Quiz
    48 questions

    Untitled Quiz

    StraightforwardStatueOfLiberty avatar
    StraightforwardStatueOfLiberty
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser