WEB DESIGN

Página 1

WEB DESIGN

FILE MANAGEMENT

To be a successful web designer, you MUST have solid file management skills. File management may sound trivial, but students often don't know as much about file management as they think they know. Weakness in file management causes more problems in web development than anything else. In the course of your web design work you will be asked to create folders and subfolders, save files to specific folder locations, copy files and folders and rename them, notate a file's location as an absolute path, and in relation to another file. In addition to exploring basic file management skills, this assignment also demonstrates how files combine to create a web page, and introduces you to Komodo Edit, the code editor that you will be using for all of your project work.

Preparation:

Download and install the latest version of Google Chrome - if you don't already have it installed. You are asked to use Chrome because all video demonstrations in this course use Chrome, and we will be using developer tools that are unique to Google Chrome.

Download and install Komodo Edit from http://www.activestate.com/komodo-ide/downloads/edit. Make sure you download Komodo Edit (free), NOT Komodo IDE trial ($).

*Note to Mac users, Komodo Edit 9 only works with OS X 9 and higher. Click the Apple icon at the top left of your Mac display, and select "About this Mac." Make sure your version of OS X is version 10.9 or higher. If it isn't, download the most recent version of OS X (http://www.apple.com/osx/). It's free!

Approach: Work along with each video below and complete the tasks in all of the the "DO IT" sections to complete this project. Feel free to replay the videos and work along pausing and rewinding the video as needed. When give a choice of Mac or Windows videos, select the computer platform you are working on. Videos without a choice can be used for either platform. Click the Page Topics menu above to jump to specific topics on this page.

FILES AND FOLDERS

Topics

Changing file view settings

Creating folders, also called directories

Renaming, copying and deleting folders

Saving files to specific folders

Creating folders from the Save As dialog box in an app

VIEW IT!

View EITHER the Mac users video or Windows users video depending on the type of computer you are using.

DO IT!

Create a folder in your Documents folder, or on a flash drive if you don't have your own computer, named cgs2821. Make sure to always use lowercase letters and never any spaces in Web folder names and file names. You will use this folder to store all of your course work.

File management is the most important Web development skill. If you are unsure of how to create folders, and arrange folders and files inside folders, spend time now to learn file management. Here are tutorials that may be helpful. Select the one for the computer operating system you use:

Microsoft Windows 7

Windows 7 Online Tutorials: Working with files and folders

Microsoft Windows 8

How to work with files and folders

Apple Mac OS X

Mac 101: Applications, files and folders

Mac OS X: Finder basics

DOWNLOADING WEB PAGES

Topics

View page source

Download a webpage and its components to your computer

Preview a webpage from your computer

Key points

Different types of files combine to create a Web page

HTML files provide page content (i.e. index.html)

CSS files provide the page appearance (i.e. style.css)

Image files and perhaps media files provide visual interest (i.e. logo.gif, portrait.jpg)

More advanced sites may use program files (i.e. index.php, index.aspx, or action.js)

View the code of ANY webpage by right-clicking and selecting View Page Source

Web pages accessible on the Web, can be saved to your own computer using the File > Save As command in your Web browser (Internet Explorer, Firefox, Safari, or Chrome)

When downloading Web pages you must save all the components of the page including image files html and css files

While Web pages are typically accessed from Web servers, Web pages stored on your own computer can be viewed as well using the Web browser's File > Open command.

VIEW IT!

Don't be confused! The example file shown in the video has links to four websites. The example you will use has only two.

DO IT!

Make file extensions visible on your computer as was done in the video.

Use Google Chrome browser to navigate to http://www.techminded.co/cgs2821 and download the page (index.html) and its components (banner.jpg and style.css) to your cgs2821 folder as was done in the video. BE SURE TO NAME THE FILE index.html. Preview the page from your computer using Google Chrome and make sure it looks exactly like the original.

EDITING CODE

Topics

Editing page content in an HTML file

Editing page appearance in a CSS file

Previewing your work in the browser

DO IT!

Launch Komodo Edit, and open the index.html file that you downloaded in the previous section.

Edit the first sentence of the paragraph of text to say "My name is [enter your full name here] and I am a student in FSU's CGS2821 - Web Design"

At the bottom of the page replace "kbaldauf" with your full name, and the current date.

Save index.html and preview it in Google Chrome.

Now use Komodo Edit to open the style.css you downloaded in the last section.

Select and alternate background color at http://www.w3schools.com/colors/colors_picker.asp - select a color that looks good with the banner.jpg colors. Copy the Hex value for your selected color, and replace the #222 for the background on line 5 of the file with your hex number - make sure to include the #.

Save style.css and preview your work. Experiment with different background colors until you find the one that you like.

ZIPPING FOLDERS AND SUBMITTING WORK

Topics

Zipping (compress) a folder

Unzipping (decompress) a folder

Submitting a zipped file for grading

VIEW IT!

View EITHER the Mac users video or Windows users video depending on the type of computer you are using.

DO IT!

Zip up your cgs2821 folder and name it username_project02.zip (using your Google+ username in place of username)

submit your work as an attachment to the assignment submission form on the Leaning for Life Student Portal

IMPORTANT NOTE: When you zip a folder, you are no longer able to view the files inside the zip file because they are compressed. In order to view the files inside a zipped file, you have to first decompress them, or unzip them like we do when we grade your work. No need to check your work in a zip file. Just trust that all is well. If you need to check your zip file, right-click it and click "Extract all" on Windows PCs, Mac users can just douple-click the zip file, and you'll find a new project02 folder has been created. You can then check the files in the newproject02 folder. If they work, then you know your zip file is good to go!

You're not done yet! Keep scrolling!

WEB ARCHITECTURE AND INFORMATION ARCHITECTURE

Web Architecture

You access the web possibly hundreds of times a day from your desktop, notebook, tablet and smartphone, but have you ever stopped to consider what the web actually is? What is its physical form? The web is a collection of computers that serve as routers, servers and clients all following a set of rules called a protocol to transfer data over networks provided by telecom companies like Sprint, Verizon and AT&T. The protocol for the web is HTTP for hypertext transfer protocol. This video provides an overview of how the web works.

VIEW IT!

Video Script

So here I am using my Google Chrome browser. I enter www.fsu.edu into the address bar and press Enter. The page is displayed, but what steps occurred in the software and on the network to make this happen?

First off, software such as Google Chrome, Internet Explorer, Firefox, and Safari, is called Web browser software, but is also called by a more technical name: Web Client software. Web client software is designed to request and display web pages. In this case, when I pressed Enter, Chrome assembled my request for FSU's web page into some data packets and sent them bouncing from router to router on the Internet looking for the server that hosts the www.fsu.edu domain.

The domain name system - or the DNS, that is stored on Internet routers, provides the specific IP address - or Internet Protocol address, for the computer on which www.fsu.edu is stored - or hosted. URL's or Uniform Resource Locators, provide names that are convenient for humans to remember - like www.fsu.edu. Routers on the Internet, however, utilize numeric IP addresses that are provided by the DNS. I could look up the IP address for www.fsu.edu using a "whois" service. I type in www.fsu.edu and this service tells me that the IP address for the server that hosts www.fsu.edu is 128.186.6.14. Just for kicks, watch what happens when I put this IP address in my browser address bar. Sure enough it opens www.fsu.edu.

Back to our Google Chrome packets bouncing from router to router on the Internet, after a dozen hops or so they reach the www.fsu.edu server. The server interprets the request from my browser and delivers the files that make up the FSU home page to my browser or Web client.

This is called a Client/Server system. Clients like Google Chrome, Safari, or Internet Explorer request pages from web servers like www.fsu.edu which are powered up and serving up web pages 24/7. Client/Server systems are very common on networks and the Internet.

When I requested www.fsu.edu, the server looked for a file named index in the folder set up for www.fsu.edu. Servers look for index files whenever a file isn't specified in the URL. Watch what happens when I add index.html to the url. I get the same page. So the FSU webpage is actually stored in a file named index.html. I can view the contents of index.html by right-clicking a blank area of the page and choosing View Page Source.

The source code for this file is written using HTML which stands for Hypertext Markup Language. These words in angle brackets are called HTML tags. They tell the browser how to display the page in the browser window.

Notice that some of these tags refer to other files. For example, this link tag refers to files named rollover.css and style.css. It also shows exactly where on the server these files can be found - in a folder named 4.0 which is in a folder named css in ssi in .element. CSS stands for Cascading Style Sheet and is used to define the appearance of the page in more detail. I can click style.css to view its contents. See how it defines the background color and font-family and size? CSS makes it possible to apply a common visual style across all the pages in a website. www.fsu.edu utilizes three CSS files.

Back in index.html we also see references to .js files - Javascript files. These provide interactive elements to the page like the slide show and pup-up menus. While HTML and CSS are considered mark-up languages, Javascript is a full fledged programming language. You can see by the code in main.js that Javascript is pretty complex.

Back in index.html, further down the page there is a reference to fsuLogo8.png. This is an image file. When I click it, I see that it is the FSU seal and title. We can see where it is placed on the home page. Looking at the address of the image alone, you can see exactly where it is stored on the server - in .elemet/img/4.0 exactly as specified in the HTML code where it is referenced. So a URL is used not only to specify the domain name - which indicates which server the site is stored on, but it can also show specific locations and filenames on the server.

When I requested www.fsu.edu, the server sent me not only the index.html file but also all of these files referenced in index.html, and my browser combined all of these files to display the Web page. The browser stores all of these files in a special place on the hard drive called a cache. The next time I request www.fsu.edu, the browser can load the page faster from its cache rather than having to send requests to the server.

Of course getting a page from the cache becomes an issue if the page has been updated on the server. Then the page in the cache is outdated. When this occurs, the user can go into browser preferences and choose the option to clear the cache.

All of these underlying technologies make up the architecture of the Web. The Web runs on top of the Internet. You can not have the Web without the Internet, but you can have the Internet without the Web. The Internet provides the cables, routers, servers, addresses and protocols or rules that are used by the Web. The Web defines an additional set of protocols that allow Web clients and servers to communicate.

You've seen how HTML code is used to define how Web page content is displayed in the browser. You've also seen how CSS is used to add a visual style to pages. You've seen how Javascript programs are used to add interactivity to a web page like these pop up menus, and the slide show. These are called client-side programs because they run in the browser on the client PC. If I use this search box to search for a faculty member by the name of Baldauf, my request is sent to the server. The server utilizes server-side software to find information about baldauf in a database. It then creates a page to deliver that information to the browser.

So, to sum it all up,

The Web is a client/server system that runs on the Internet.

Web client is the technical name for web browsers like Google Chrome that request pages from servers, which are powerful computers that run 24/7.

Web browsers store Web pages in a cache for faster access.

URLs or Uniform Resource Locators are web addresses that specify a domain name like www.fsu.edu, and specific files and locations on the server that hosts the domain.

The Domain Name System, or DNS is used to translate domain names to IP addresses and route packets over the Internet to their destinations.

The web utilizes a combination of HTML, CSS, client-side software, server-side software and databases to deliver information and services.

In this course you will learn HTML and CSS, you will also work with files and folders on a web server. You will not, however, learn client-side or server-side programming.

That's the basics of Web Architecture. You'll find this information useful in Project 2 where you will be logging on to our web server and transferring files between your computer and the server.

Information Architecture

A web designer is responsible for arranging website content into logically organized pages and menus referred to as the information architecture. Wikipedia provides this definition:

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labeling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

In the previous Designers Lounge, you learned that developing an information architecture is the 2nd step of the Web Development process. An information architecture is viewed by visitors to a website as a collection of pages organized into logical categories through menus, tabs and navigation bars. From a Web architecture view, the website content is a collection of files distributed into logical categories using folders and subfolders - also called directories. In this manner the information architecture of a website is mirrored in the file and folder architecture. The Web Style Guide provides more thorough coverage of this topic and this useful example.