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

IT0043 WEB DESIGN WITH CLIENT SIDE SCRIPTING  MODULE 7 Web Server What is a Web Server? The collection of all your web pages is called your web site. To let others view your web pages, you must publish your web site. What is a W...

IT0043 WEB DESIGN WITH CLIENT SIDE SCRIPTING  MODULE 7 Web Server What is a Web Server? The collection of all your web pages is called your web site. To let others view your web pages, you must publish your web site. What is a Web Server? To publish your work, you must copy your site to a web server. Your own PC can act as a web server if it is connected to a network. Most common is to use an Internet Service Provider (ISP). HOST TYPES 1. Free Hosting Best suited for small sites with low traffic, like personal sites. It is not recommended for high traffic or for real business. Technical support is often limited, and technical options are few. HOST TYPES 2. Shared(Virtual) Hosting Your web site gets its own domain name, and is hosted on a powerful server along with maybe 100 other web sites. HOST TYPES 3. Dedicated Hosting The most expensive option. This option is best suited for large web sites with high traffic, and web sites that use special software. HOST TYPES 4. Collocated Hosting Collocation means "co-location". Collocated hosting lets you place your own web server on the premises (locations) of a service provider. Registration to a free hosting site 1. Sign up and 2. Email notifications will be sent for register for sub cpanel login details domain 3. Upload your website to the root folder Shared Hosting 1. Select for package and register a domain name 2. After successful payment, account details will be sent through email. 3. Login 4. Manage files in File 5. Upload your website Manager Site Planning and Photoshop Template  Graphic Design and Page Template Creation Generally, web designers create a mockup for each page layout in the Web site. This is a sketch of proposed design that indicates the general layout of a Web site home page and other pages.  Wireframe Website wireframes are simple line drawings that show the placement of elements on a web page. Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements.  Mockups that evolve to a more refined state is called WIREFRAME. This is a sample wireframe for page layout. Web site Visual Structure The structure of a web page is imposed by the grid or page template you choose for your page design Four-column grid with layout elements Grid sections can provide placement guidelines for page elements which can cover multiple rows and columns Areas of active and passive white space Active white space – it structures and separates content Passive – includes black areas that border the screen Paper-based reading pattern According to human engineering studies scan pages with paper-based reading habits making eye moves from left to right and back again. Landscape-based viewing pattern In contrast to above pattern, users may also scan information following clockwise pattern F-based viewing pattern This is also a pattern found in eye-tracking studies, users often read web pages in an F- shaped pattern. 1. Users read first across the top page 2. Move down the page a bit 3. Then left side in a vertical movement The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. Parallax scrolling offers a better user experience through interaction, engagement, and depth into the story your brand is trying to tell. Parallax is a web design technique that allows components of a web page to move at varying speeds when a user scrolls. What to include? All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include:  Navigation: Buttons for users to visit the main sections of your site. Company logo: Can just be represented by a box. Content areas: Where will your different sections of content appear? Search boxes User login areas A wireframe is an outline of a website. It is the first step of the creation of a site.  Good web designers start out with a wireframe sketch in order to visualize their ideas on paper. A sitemap is a visual map of the navigation of a website. The more pages your site has, the more complicated your site map will be. PHOTOSHOP SLICE TOOL  While you could use Photoshop to build real web pages, you shouldn’t; you’re much better off using a program designed for the job, like Adobe Dreamweaver. That said, the Slice tool comes in really handy in a few situations: Building a website prototype. If you slice up your design and assign different hyperlinks to navigation bars, you can give the client a good idea of how the navigation in the final website will feel.  Making an image map The Slice tool lets you add hyperlinks to certain portions of a single image. Making an image-heavy page load a bit faster Chopping images into pieces makes them load a little at a time instead of in one big piece. However, this is becoming less of a problem as more people get faster Internet connections. Creating Slices Once you’ve created an image or design that you want to chop up, you can use the Slice tool to draw the pieces by hand or make Photoshop create slices from individual layers by choosing Layer→New Layer Based Slices. You can also make Photoshop slice an images according to the guides you’ve drawn (discussed later in this section). Steps 1. Turn on Photoshop’s Rulers and draw guides around the areas you want to slice. 2. Press C to grab the Slice tool. 3. Trot up to the Options bar and click the Slices From Guides button.  Resize the slice. Once you select a slice, you can drag any of its corner or center handles (they look like tiny solid squares) to make it bigger or smaller. Move the slice. Click within the slice and then drag it to another location. To make it so you can drag the slice only horizontally or vertically, hold the Shift key as you drag. Saving Slices Once you’ve set all the options for your slices, it’s time to save them to use on the Web. Use the File→“Save for Web” dialog box to set all those file-type, compression, and other options discussed earlier in this chapter. (If you use File→Save As, all your slice options will fly right out the window.)  When you’re finished, click Save and tell Photoshop where you want to store the files. If you’ve assigned URLs to the slices, be sure to choose “HTML and Images” from the Format pop-up menu at the bottom of the Save Optimized As dialog box, as shown.  IT0043 WEB DESIGN WITH CLIENT SIDE SCRIPTING  MODULE 6 JavaScript JavaScript Intro Advanced Web Design What you should know HTML CSS What you should know You don’t need to be a programmer Though it’s a great help if you are. HTML Connect Bonjour French JavaScript: Introduction Aloha kakahiaka Hawaiian What is scripting language? お早うございま す JS: Client-side language ohayō gozaimasu Japanese What is javascript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language Developed by Brendan Eich Other uses of Javascript 안녕하십니까 Issues with a client-side language annyeong hashimnikka Korean A bit History Maayong Buntag Cebuano A bit History Maayong Buntag Cebuano What do you need to write JS? You need text editor Are Java and Javascript the same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. What can a Javascript do? JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages. What can a Javascript do? JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element. What can a Javascript do? JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser Javascript Structure Javascript Where to! JavaScripts can be put in the body and in the head sections of an HTML page. JavaScripts in a page will be executed immediately while the page loads into the browser. JS is interpreted not compiled JS is interpreted not compiled JS is interpreted not compiled Javascript vs HTML Javascript vs HTML JS: Statements Best practices JavaScript Comments JavaScript Comments JavaScript execution order Sample 1.) Embedding script in HTML 2.) Script Positioning Sample JavaScript Fundamentals  JavaScript Popup Boxes (Alert) function show_alert() { alert("I am an alert box!"); }  JavaScript Popup Boxes (Confirm) A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. JavaScript Popup Boxes (Confirm) Sample for confirm box Try it function myFunction() { if (confirm("Press a button!") == true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } }  sample1.htm Note: If you enter an email address without the @, you'll get an alert asking you to re-enter the data. What is:x.indexOf(@)==-1? This is a method that JavaScript can search every character within a string and look for what we want. If it finds it will return the position of the char within the string. If it doesn't, it will return -1. Therefore, x.indexOf("@")==-1 basically means: "if the string doesn't include @  sample2.htm Note: if(document.login.userName.value==""). This means "If the box named userName of the form named login contains nothing, then...". return false. This is used to stop the form from submitting. By default, a form will return true if submitting. return validate() That means, "if submitting, then call the function validate()".  JavaScript Prompt (User Input) var myInput = prompt(“Enter a number: "); alert(myInput==“2” ? “Your choice is number two" : "Input again");  JavaScript Functions A function will be executed by an event or by a call to the function. To keep the browser from executing a script when the page loads, you can put your script into a function.  JavaScript Functions (Sample) function displaymessage() { alert("Hello World!"); }  The return Statement The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement. The example below returns the product of two numbers (a and b):  The return Statement function product(a,b) { return a*b; } document.write(product(4,3));  The Lifetime of JavaScript Variables If you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.  JavaScript For Loop Loops execute a block of code a specified number of times, or while a specified condition is true. In JavaScript, there are two different kind of loops: – for - loops through a block of code a specified number of times – while - loops through a block of code while a specified condition is true Syntax for (var=startvalue;var Visit FEU