Questions for module 1 BASIC WEB

You have now completed the first module on 1st semester. Hopefully you have worked hard, learned a lot and had fun while doing so. This paper is a self-test. These are questions we could ask at the internal exam. All questions on this list are topics and learning goals covered in the first part of module 1. If you can answer 90% of these questions, and elaborate on your answers by discussing examples chosen from your own projects, you are doing well. If not you should probably spend the next week getting up to speed. You can find much information on Fronter, but not all. You can also consult your notes and handouts from lectures or you will have to ask you co-students. You can read the books on the COMPULSORY list. As a last option you can ask your teachers but dont expect that any classes or lectures will be re-run because you were not present We are confident that all students who have followed classes, made the individual deliveries and committed themselves to their group projects will have no problems at all with this long list of simple and very basic questions. We do not expect you to hand in a completed test. Your exam is your responsibility. The test is meant as help so you can evaluate your own effort in the first module.

Visualisation:

1.What is the difference between a symmetrical and an asymmetrical composition?

symmetrical is where if you split it in half it would look the same on both sides but flipped over and asymmetrical is where each side is different
The symmetrical composition has a figurative symmetry axis that divides the composition in two sides which are equally distant from the axis and reverted. However, the asymmetrical composition has no such axis and the elements can be positioned everywhere.

2.What is a composition with radial symmetry?

a form of symmetry, arranged equally in all directions from a central point, thus any plane through the central point will divided into mirror image pieces; golden ratio/golden section the golden spiral the central point is the main/important focus point from the composition
A composition with radial symmetry is the type of composition that has regularly positioned elements which radiate from a central point where several symmetry axis intersect.

3.Name the gestalt laws, and describe how they are used in your personal website.
Gestalt "essence or shape of an entity's complete form

1. The figure-ground phenomenon= you will always see two things at a time.You see one object in
relation to the other, one is the figure one is the ground. 2. Law of Proximity=Some belong together more than others The law of proximity states that when an individual perceives an assortment of objects they perceive objects that are close to each other as forming a group.

3. Law of Similarity = Some objects look more alike than others The law of similarity states that elements within an assortment of objects will be perceptually grouped together if they are similar to each other. This similarity can occur in the form of shape, colour, shading or other qualities.

4. Law of Closure= Objects in the same box seem as if they belong together The law of closure
states that individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap. 5. Law of Symmetry The law of symmetry states that the mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to be able to divide objects into an even number of symmetrical parts. 6. Law of continuity= Continuation occurs when the eye is compelled to move through one object and continue to another object.
7. The Law of Similarity is the gestalt law where several elements of the composition look the same or have similar properties so that they form a group. I have used this law in my personal website in the global navigation and gallery. Each item from the global navigation has the same style. 8. The Figure-Ground is the gestalt law where the elements of the composition create a foreground and background using different colours and sizes thus adding depth. The figure-ground is mostly used in my personal website in the home page. The logo has a significantly larger size and shadow which is meant to add depth and emphasize. 9. The Law of Closure is the gestalt law where elements or shapes which are not connected to each other form a single element as a whole. The law of closure is used in my resume. The content from each section, although separated in two sides, is perceived as a whole. 10. The Law of Proximity is the gestalt law where the elements are placed close to each other and forming a group. This law is used in my gallery page in the thumbnails. 11. The Law of Symmetry is the gestalt law where the composition is divided into symmetrical parts. I have used this law in my resume page where the left side with blue background is symmetrical with the right side.

4. Name at least 3 different kinds of contrasts, and describe how they are used in your personal web-site.
Contrast->Form, Size, Placement, Colour, Strength

Form contrast is used in the home page. The global navigation and personal picture have smooth round corners while the logo is sharp and pointy. Size contrast is also used in the home page. The logo has a significantly larger size than the rest of the content. Colour contrast is visible in the home page. The logo has four different colours while the rest of the website has just different hues of blue. 5.What is the difference between a global and a local navigation?

that "local" navigation is navigation affordances that are available on one web page, but not others. Global navigation appears on every page of a web site
The global navigation is present on each page of the website while a local navigation can only be accessed on a certain page.

6.What is a menu (navigation) with a free layout?

Navigation is randomly set on the page, with different shapes, colours, etc

7.What is the difference between a serif and a sans-serif font?

Serif-cu piciorus, sans-serif simplu fara nimic
Each character from the serif fonts have small lines on the edges in their design. The sans-serif characters do not have those small lines.

8.What is a justified text?

Cand ocupa tot randul vezi functi word pe coloane
The justified text is aligned along both left and right margins with no spaces except for kerning, leading and tracking.

9.What is a loose left margin in a text? =non-justified 10.What is the optimal length of a text line on a screen in terms of readability?
The loose right margin is preferable when the columns are narrow. Use as many word divisions as you like they dont disturb the readability. The optimal lenght is a line with an average of 45 to 65 typographical units.
The optimal length of a text line on a screen, in terms of readability, is approximately 60 typographic units.

11.What is anti-aliasing?
When you anti-aliase a black text on A white background, grey pixels are Put in to smooth out the text.When the size of the text is small (12pt and under..) anti-aliasing can make the text look blurred and out of focus. Edge pixels are mixed with a background colour(matte) Mixing aliased edges with background pixels is called =anti-aliasing
Anti-aliasing is the property of adding pixels with a lower opacity on the edge of the characters making them look smoother.

12.What is the difference between display typography, reading typography and consultation typography? Display typography is designed to catch the attention of the user. Try to make it unique so the user
remembers it.-logo-ul meu de ex reading typography -bodytext indicates larger amounts of text,that are meant to be read.- la ziare de ex Consultation texts are texts that are to be consulted but not read in large amounts. Consultation texts can be found in phonebooks, address lists, calling cards and menues on the internet.
The display typography is used for headlines and larger texts and is anti-aliased, the reading typography is used for the actual content, articles, sections and has a smaller size and the consultation typography is used for links and contact information.

13.What is an opponent colour?

red-green content of the test light. Cancel the blue-yellow content of the test light.
Opponent colours are two colours which are symmetrical on the colour wheel and can never be perceived together as they are opposite and share no hue

14.What is the name of the file format that Photoshop uses?

PSD
Photoshop uses .PSD files.

15.What are the main differences between the Gif and the JPG compression format, and what are the best used for?
Lossless compression formats are suited for illustrations, drawings, text and other material that would not look good when compressed with lossy compression. As the name implies, lossless compression will encode all the information from the original, so when the image is decompressed, it will be an exact representation of the original. As there is no loss of information in lossless compression, it is not able to achieve as high a compression as lossy compression, in most cases. Examples of lossless image compression is PNG and GIF. (GIF only allows 8-bit images.). Gif- transparency
The JPG compression format is quicker and lossy, meaning that if a picture is compressed as a JPG it will lose quality. The Gif compression format is lossless, the quality of the picture will not be damaged however the compression is not as quick

16.Name a reason to use a .PNG instead of a .Gif

GIF (stands for Graphics Interchange Format) was developed in the late 1980's and it is still widely used. Png=Portable Network Graphic, Excellent quality, Medium compression efficiency, Allows true transparency, Lossless, 24 bit color

For the Web, PNG really has three main advantages over GIF:

alpha channels (variable transparency), cross-platform gamma correction (control of image brightness) and color correction two-dimensional interlacing (a method of progressive display).

PNG also compresses better than GIF in almost every case (5% to 25% in typical cases). PNG could have a bad support by old browsers
A .Gif image supports 8 bits per pixel while a .PNG supports 24 and 32 which means that you can use much more colors and transitions are smoother in a .PNG format.

17.Name a reason to use a .PNG instead of a .JPG - (and name a reason not to)
Jpg= Joint Photographic Experts Group Lossy compression (e.g. JPEG) is efficient because it throws away data which is not needed. If we want to insert a logo in our website=png- transparenta JPG- imagini

PNG works best for vector type graphics with hard lines. JPG works best for anything with complex gradients (e.g., a photo). .PNG image supports transparent backgrounds while a .JPG doesnt. If we are working with photos it is better to use .JPG than .PNG. After the .JPG compresses the picture, the picture has a significantly smaller size than it would have after a .PNG compression.

18.What is a Photoshop layer, and why do you use them?

Photoshop layer is a tool which allows you to separate different elements or objects. Layers are used because they allow us to style, move and edit individual objects without changing other elements.

A layer is simply one image stacked on top of another.

They do not destroy your original photo. You are working on top of or on copies of that photo.

 You will have more control. You can use blending modes to change the way layers interact. You can change the opacity of any effects. You will have or can add layer masks so that you can work selectively on your photo with any adjustments you make.
Read more: http://digital-photography-school.com/understanding-layers-in-photoshop#ixzz2HORxdnW4

19.What is the difference between additive and subtractive colours?

3 secondary/complementary/subtractive colours (magenta, cyan and yellow) the subtractive colour yellow is made up of the primaries red and green. The additive color system involves light emitted directly from a source, before an object reflects the light. The additive reproduction process mixes various amounts of red, green and blue light to produce other colors. Combining one of these additive primary colors with another produces the additive secondary colors cyan, magenta, yellow. Combining all three primary colors produces white. To illustrate additive color, imagine three spotlights, one red, one green and one blue focused from the back of an ice arena on skaters in an ice show. Where the blue and green spotlights overlap, the color cyan is produced; where the blue and red spotlights overlap, the color magenta is produced; where the red and green spotlights overlap the color yellow is produced. When added together, red, green and blue lights produce what we perceive as white light.
Additive colours such as red, green and blue, when they are mixed together in the same quantity, the result is a light colour, depending on the amount of quantity. Subtractive colours, such as cyan, magenta, yellow and black, when they are mixed together in the same quantity, the result is a dark colour, close to black.

20.What is the name of the most widely used additive colour system?
RGB is perhaps the most widely used color system in image formats today. RRGGBB

21.What if the browser is IE? Internet explorer. Using the background-color property only, it will fail and display no background color at all. 22.What colors are #FF0000=rosu, #00FF00=verde and #0000FF=albastru? 23.What are the hexadecimal codes for white=#FFFFFF, black=#000000 and yellow=#FFFF00?

Communication:
1.What is a roughboard and what can you use it for?
The roughboard is the visual "prelude" of the idea.The roughboard is the first rough sketch that visually communicates the overall emotional impactof your site.In other words it illustrate what the user shouldfeel when she/he enters the production/site. A roughboard can be sketches, collages, video, graphics, paintings, models etc. that describe the idea, the style and the expression of the production. Mood board=A visual of target audience/users
A roughboard is a rough collage of colours, textures and images which express the visual impact and theme of the website. A roughboard is used for inspiration and exploring the idea of the website more.

2.What is breadcrumb navigation?

breadcrumb navigation is used in user interfaces. It allows users to keep track of their locations within programs or documents. Shoes-lady shoes-sandals-ledder sandals etc
A breadcrumb navigation is a type of navigation where the website displays the path of your browsing so that you always know what page you are on, how you got there and how you can go back.

3.What do USP and ESP stand for? USP =Unique Selling Proposition= It is the added value that differentiates
it from other similar products on the market... Colour,Shape,Functionality ESP= Emotional Selling Point= So think about the feelings and the emotions that you want to stir up with your prospects and clients and use this in your sales. Can your product/service make the prospect: Feel important,valued,part of a unique group or select band of people,feel whole, attractive etc

4.What are USP and ESPs relevance for multimedia designers?

USP is all about how the product a multimedia designer is promoting is different from other products on the market. It is essential for a multimedia designer to emphasize and promote a products uniqueness. ESP is relevant for a multimedia designer because the promoted product needs to appeal to the target audiences emotions.

5.Describe what a target audience is?

A target audience can be formed of people of a certain age group, gender, marital status, etc., e.g. teenagers, females, single people, etc
A target audience is the group of people that share the same interest, age or marital status and are potential customers or buyers of the product or service the company is offering.

6.Why is it relevant to describe the target audience for a multimedia production? the target audience will determinate the direction of the project.
Describing the target audience helps a multimedia designer to produce what the target audience needs and what it appeals for them. The better a multimedia designer knows the target audience, the more popular the product can become thus increasing the profit.

Organization:
1.What characterizes the waterfall method and for which kind of projects does it work well?
The waterfall method is a development method where the progress is flowing downwards through several processes and studies. This method works well in software development.

The waterfall model is a sequential design process, often used in software development processes, in which progress is seen as flowing steadily downwards (like a waterfall) through the phases of Conception, Initiation, Analysis, Design, Construction, Testing,Production/Implementation, and Maintenance. Project planning generally consists of: determining how to plan (e.g. by level of detail or rolling wave); developing the scope statement; selecting the planning team; identifying deliverables and creating the work breakdown structure; identifying the activities needed to complete those deliverables and networking the activities in their logical sequence;

estimating the resource requirements for the activities; estimating time and cost for activities; developing the schedule; developing the budget; risk planning; gaining formal approval OF THE PLAN to begin work.

2.What is the definition of ITERATIVE DEVELOPMENT? An iterative process is one that makes progress through successive refinement.Refinements based on testings 3.What is the difference between a throw-away prototype and an evolutionary one?
The throw-away prototype is only used in user testing to test certain ideas while the evolutionary one is developed until it is ready to use or release.

1. Throw away prototype Is used to test some ideas is discarded when system development is commenced. 2. Evolutionary prototype Is developed and modified until it becomes operational. 4.What is the definition of INCREMENTAL DEVELOPMENT? atunci cand faci - Vlad: pas cu pas cate ceva - Vlad: incepi de la ceva mic - Vlad is typing... - Vlad: si tot adaugi
An incremental process is one in which software is built and delivered in pieces. Each piece represents a full subset of functionality.

Tight deadlines you always have something to deliver Each increment delivers fully working code Input from users after each increment

5.What is a kanban(scrum) chart?

A Kanban chart is a chart where you constantly keep track of the development of a certain project. Each task is divided for the persons involved in the project and it can have three statuses: To Do, Doing and Done.

Chart with colloms, to do, in progress-doing and done. A tool for prioritizing the tasks.

6.What is a SCRUM master and what is her/his role?

The SCRUM master is the person responsible for the way the scrum process is used and also to ensure that there isnt any issue among the members of the scrum.

Scrum master facilitates the cooperation and monitors progress Leader and facilitator Has no authority over team members. Does not decide who does what. Helps the team self-organize. Improves the lives of the development team by facilitating creativity and empowerment.

Improves productivity by removing obstacles Helps the Product Owner with prioritizing the Product Backlog Keeps track of progress by managing the Kanban Chart and watching that the team selects the tasks in the right order.

7.What is a sprint item broken down into?

product backlog, sprint backlog, sprint planning, scrum meetings and sprint end

8.What are the three questions each participant must answer at the daily scrum? What have you done yesterday? What are you planning to do today? Are there any issues?

Interaction:

1.What is HTML and what can it do? HTML- Hyper text markup language, used to create web pages.

it is the language of the World Wide Web. So, in short, you use HTML to build web pages. a nd it can store and display content in a browser.

2.What is HTTP and what can it do?

Hyper Text Transfer Protocol - the technology used to communicate between web servers and web users. it can transfer content from the server to the browser.

3.What is FTP what can it do?

FTP is an acronym that stands for File Transfer Protocol. An FTP client is a program that allows you to easily move files from one computer to another. and it can transfer files from the server to your computer.

35.What is PHP and what can it do?

PHP is a server-side language which preproccesses hyper text. PHP=Hypertext Preprocessor) is excellent for creating dynamic Web sites based on database content or different characteristics of browsers. Through the use of external libraries and functions, PHP can: that is especially suited for web development and can be embedded into HTML.

build templates to ease site maintenance create graphics on the fly serve different content to users based on their browser, IP address, date and time, or numerous other chacteristics conduct online surveys connect databases like Oracle or MySQL to the Web communicate with external Web sites build discussion forums or Web-based e-mail programs read and process XML

4.How do we specify whether we use HTML5 or XHTML? We specify the <!DOCTYPE html> for HTML5 and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> for XHTML tagurile <audio> <video> <canvas> si alea pe care le poti pune tu oricum fara sa ai probleme la validare - Vlad: nu-s valabile in (X)HTML <footer> <section> <article> <dada> <kea> <coolesttagevar> - Vlad is typing... - Vlad: astea le poti folosi in html5 5.What are the web standards and why are they important for multimedia designers?
Web standards are rules and guidelines established by the World Wide Web Consortium (W3C) developed to promote consistency in the design code which makes up a web page. Without getting technical, simply it's the guideline for the mark-up language which determines how a web page. displays in a visitor's browser window.

Web Web Web Web Web

standards standards standards standards standards

are are are are are

important for maintainability important for usability important for clients more than passing a validator about quality design work

6.What is an empty tag?

An empty tag is a tag that closes itself. Ex <p></p>, <br/>

7.What is the difference between tags and attributes?

An attribute is like an argument of the tag, it doesnt mark anything like a tag does. A tag is a declaration of a HTML object whereas an Attribute is a property of an object.

8.What is the difference between tags and elements?

Tags are labels you use to mark up the begining and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: and closing tags: . The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. Tags vs elements: <p> and </p> are tags. <p>Some text</p> is an element.
Elements are marked by tags, an element is the content of a tag. Tags are used for defining and marking elements.

9.What is the difference between block and inline elements?

Inline elements are displayed on the same line, next to each other while block elements are displayed under each other. Inline elements can be anchored while block elements cannot.

10.What is the Cascade in Cascading Style Sheets?

The cascade is the waterfall style of the language as elements can get different CSS properties.

Cascading Style Sheets or CSS are set up so that you can have many properties all affecting the same element. S

11.What are the advantages of using an external style sheet to define a sites design?
The main advantage of using an external style sheet is that if we want to update it we only have to update one file which is the .CSS file. Another advantage is that when we are using an external .CSS file we have an overview of all the styles used in the website so it is easier to keep track of it.

12.What is the basic syntax for CSS rules?

selector { property: value; }

13.What is the difference between tag selectors, pseudo-class selectors, class selectors and contextual selectors?
Tag selectors select a tag and dont need any symbols just the name of the tag. When using tag selectors, the properties used will apply for all the tags of that type. Pseudo-class selectors select characteristics other than their name, attribute or content such as :hover. Class selectors select only the elements that have the same value for the class attribute, the syntax is .class. Contextual selectors select element by their context which is determined by what its parent element is.

14.How would you achieve a visually distinction of the link to the current page with CSS?
I would use the class attribute, name .current and assign it to the specific <a> or <li> using either PHP or jQuery. Then I would style it accordingly in the .CSS file.

15.Why is it a good practise to separate content and design?

Separating the content from the design makes it easier for the developer to locate and maintain.

16.What is the difference between absolute, relative and static positioning in CSS?
The static position is the default one, this means that the element is not positioned. When using relative positioning we can use top, left, bottom or right to move the element relative to where it is normally positioned in the document. Absolute positioning allows us to move an element to an exact position on the page.

17.What is the difference between margin and padding?

Margin is the space an element gets from the element right next to it. Padding is the space the content of an element gets from its margins.

10

18.What is the difference between p{margin-left:20px;}; or p{left:20px;position:absolute;} in a Style Sheet? ->aca scrii margin-left isi ia margin de la primu element din stanga, daca are un div sau ceva in stanga, isi ia margin 20 de pixeli de la elementu ala - >iar cand scrii left:20px; position:absolute, isi ia 20 de pixeli de la marginea paginii din stanga When using margin-left:20px; the paragraph will move 20 pixels to the right from the next element in its left side. When using left:20px;position:absolute; the paragraph will move exactly 20 pixels from the left side of the document. 19.How and where can you validate your HTML and CSS code? hPp://validator.w3.org
You can validate HTML and CSS code by going to http://validator.w3.org then copy/pasting the URL of your page and click Validate.

20.why is it important to validate your HTML and CSS documents?

When having validated HTML and CSS we are ensured that the website behaves the way it was designed in any circumstance.

21.What is likely to happen with your users browser rendering mode, if your site doesnt validate?
If the site doesnt validate the users browser will enter in Quirk mode and in most cases it will not display the content properly.

22.Why is it important to control your design in several browsers even though the HTML and CSS validates?
Not all browsers are updated to the most recent technologies so it is important to test the website in every browser to make sure it works the same for every user that can use any browser.

23.Why do so many web designers complain about Internet Explorer?

One of Internet Explorers problems is that it works different from the rest of the browsers so often times a web designer has to offer solutions for the Internet Explorer users.

24.Why is it a good idea to have your operating system display the full name of files, ie file name and extension?
It is easier to work with file names and the extentions especially when you have two or more files that have the same name but a different extention. In that situation it can get very confusing.

25.What is 'meaningful markup'? / Why is semantics important in web design?

Meaningful markup means using proper tags that are easy to recognize and figure out what type of content is being marked up. Examples of meaningful markup: <footer> <article> <section> <nav>.

26.Give an example of an HTML character 'entity'. Why do we need entities?

Example of entity: &amp;We need HTML entities because some characters such as <, > cannot be used in the text as the browser will treat them as tags.

27.What is an FTP-client?
An FTP client is a software that allows the user to connect to an FTP server and transfer, overwrite or delete files.

28.Name some ways to optimize a website for a search engine

11

SEO friendly urls such as site.com/article-or-webpage-name instead of site.com/article.php?id=2,

Having a site map, Tagging the content of the website.

29.What is the client-server model?

Client -> Internet -> Server -> Internet -> Client ...?...

The clientserver model is an approach to computer network programming The model assigns one of two roles to the computers in a network: Client or server. A server is a computer system that selectively shares its resources; a client is a computer or computer program that initiates contact with a server in order to make use of a resource.

30.What is a URL?
An URL is an uniform resource locator. A URL is a formatted text string used by Web browsers, email clients and other software to identify a network resource on the Internet. Network resources are files that can be plain Web pages, other text documents, graphics, or programs. URL strings consist of three parts (substrings): 1. network protocol 2. host name or address 3. file or resource location

31.What is an http request?

An http request is a request from the browser for specific data. The most commonly used methods of requests are GET and POST.

Whenever your web browser fetches a file (a page, a picture, etc) from a web server, it does so using HTTP - that's "Hypertext Transfer Protocol". HTTP is a request/response protocol, which means your computer sends a request for some file (e.g. "Get me the file 'home.html'"), and the web server sends back a response ("Here's the file", followed by the file itself). That request which your computer sends to the web server contains all sorts of (potentially) interesting information. We'll now examine the HTTP request your computer just sent to this web server, see what it contains, and find out what it tells me about you. 32.What is an http response? 33.What is the difference between a localhost and a remote host?
The localhost is a server which runs on our computer where we can test and develop projects, the remote host is a server located anywhere in the world. Connection to the remote server requires an FTP client.

34.What is the DOM and why is it important for web professionals? What is the DOM of an html page? Document object model. Model of how the object in the document are structured: html -> head -> title Html -> body -> nav -> ul ->li

12

KMG, ALE, FBe, BcE,THBH, GSC, MaC, BGAY 2012

13