Download SDA v2.0 SlideShow

Site Development Associate v2.0 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 1: Markup Language and Site Development Essentials Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 1 Objectives • • • • • • • • • Discuss Web page creation Discuss mobile and cloud issues Introduce text editors and markup languages Introduce graphical user interface (GUI) editors Discuss the history of markup languages Introduce the HTML Web development trifecta Discuss Web site development principles Introduce hosting and Web service providers Introduce the Habitat for Humanity Web site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creating Web Pages • Web page authoring is becoming a standard skill set for many careers • You must know: – Hypertext Markup Language (HTML) – Cascading Style Sheets (CSS) • Additional technologies include: – Flash – Java – ActiveX – Microsoft Silverlight Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Mobile and Cloud Issues • Web site development has been impacted by: – Smartphones, tablets and other mobile devices – The cloud • Cloud services – Do not require knowledge of HTML to create Web pages – Users simply "point and click" the available Web site tools to design a personalized page Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Text Editors and Markup Languages • You do not need to use a special editor application to create markup – You can use a simple text editor (e.g., Notepad or Vi) • When creating HTML files, you must: – Save the text as plaintext – Save the file using either the .html or .htm file name extension Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Graphical User Interface (GUI) Editors • GUI HTML editors: – Create HTML code for you • You type page text as you would with a standard word processor • You point and click with a mouse • Popular GUI HTML editors include: – Adobe Dreamweaver – Microsoft Expression Web – Mozilla SeaMonkey – Adobe GoLive – KompoZer – Bluefish Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Why Learn Markup Languages? • GUI HTML editors do not keep pace with the latest improvements in markup language • You can add features to pages not supported by the editor • You will not be limited by the GUI editor’s capabilities Copyright © 2012 Certification Partners, LLC -- All Rights Reserved History of Markup Languages • Standard Generalized Markup Language (SGML) – Originally created by IBM in 1986 – A metalanguage, meaning it is used to create other languages – The basis for HTML, XHTML and XML – You create your own document rules using a Document Type Definition (DTD) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved History of Markup Languages (cont'd) • Hypertext Markup Language (HTML) – Based on SGML, invented by Tim Berners-Lee – Allows hyperlinks – HTML vs. SGML • HTML versions include: – HTML 3.2 – HTML 4.01 (the most popular version of HTML) • HTML 4.01 flavors include: – 4.01 Strict – requires all container tags and does not allow deprecated tags – 4.01 Transitional – allows deprecated tags, not as strict – 4.01 Frameset – for use with frames Copyright © 2012 Certification Partners, LLC -- All Rights Reserved History of Markup Languages (cont'd) • Extensible Markup Language (XML) – A subset of SGML, also a metalanguage – XML describes data instead of formatting – HTML or XHTML provides formatting and document structure • Extensible Hypertext Markup Language (XHTML) – Combines HTML with XML – XHTML allows HTML to become XML-compliant Copyright © 2012 Certification Partners, LLC -- All Rights Reserved History of Markup Languages (cont'd) • HTML5 – The latest version of HTML under development by the W3C – Provides modern requirements for the Internet with fewer plug-ins Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Universal Markup Creation • Follow W3C standards • Benefits of following standards include: – Code will render as expected in more browsers – Pages will be more scalable (as you add more sophisticated content, you will not run into problems) – Pages are more likely to be available to disabled users Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The HTML Web Development Trifecta: HTML5, CSS and JavaScript • The future of Web design lies within three technologies: – HTML5 – Cascading Style Sheets (CSS) – JavaScript • These technologies used together provide Web pages that easily adapt to smartphones, tablets, gaming devices and smart TVs, as well as to traditional PCs Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Project Management and the Web Development Project Cycle • • • • • • • Create and document an initial Web site plan Obtain relevant input from stakeholders Communicate the Web site plan Consider technical and non-technical concerns Develop the site Publish the site Manage the site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing Accessible Web Pages • Americans with Disabilities Act (ADA) – Enforced by the U.S. Justice Department – Requires Web designers to create "reasonable accommodations" for disabled users: • Ensuring that all images have text-based descriptions • Providing text-based alternatives to all non-text content (e.g., Java applets and Flash presentations) • Providing easy-to-read forms Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing Accessible Web Pages (cont'd) • Web Content Accessibility Guidelines (WCAG) – Provided by the W3C Web Accessibility Initiative (WAI) – A product of worldwide cooperation • Section 508 of the Rehabilitation Act – All federal agencies must ensure that all electronic and information technology developed, procured, maintained or used by federal agencies be comparably accessible to users with disabilities – Based on the WCAG Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Verifying Web Page Accessibility • Many tools available, including: – W3C Page Validator – Total Validator – Cynthia Says – Vischeck – MAGpie • Adopt a single W3C standard and apply it consistently throughout your site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved General Web Page Accessibility Considerations • Visual challenges – Text readability – Text support for images – Screen reader support • Audio challenges – Alternative audio support – Alternative speech input – Text support for audio elements • Cognitive and technical challenges Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creating and Documenting an Initial Web Site Plan • Site plan is a rough outline of planned development – Site diagram – Storyboard • Wireframing – The process of developing an outline for a Web presence • Determining audience and message • Validating design issues – Consider issues such as central message, fonts, images, colors, ethnic and cultural diversity, and common color schemes Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Obtaining Relevant Input from Stakeholders • Stakeholders are relevant organization employees or contributors who can provide or help determine: – The purpose of the Web site – The services that the audience requires from the site – Development timelines • As you work with stakeholders: – Remember that non-technical people may be asked to approve your project – You must translate technical issues into non-technical language • Team members can include representatives from marketing, IT, sales and other areas of your organization Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Documenting and Communicating the Plan • Create a storyboard • Document decisions in meetings and follow up • Communicate the plan in various ways: – Calling relevant parties to ensure that everyone is satisfied – Sending e-mail messages – Sending postal ("snail mail") messages if necessary – Sending fax messages – Telephone calls Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Communicating the Web Site Plan • Use oral presentations and presentation aids, including: – Presentation software – Overhead projection – Whiteboards – Easel and poster paper – Charts – Published handouts Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Leading Discussions • Strategies leaders use to manage a meeting: – Make introductions – Recall past business – Create a list of action items, including timelines – Monitor time – Ensure proper discussion focus – Handle heated discussions – Distribute minutes Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Considering Technical and Non-Technical Concerns • Leaders can ensure communication by: – Regularly asking if anyone has questions – Asking team members to summarize their understanding of decisions – Asking a third party to deliver a summary of progress – Writing regular updates about the project Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing the Site • As your team develops the site, you will be engaged in various activities: – Creating markup code – Testing functionality – Approving the site – Publishing the site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Testing Pages in Multiple Browsers • As you develop Web pages, test them using multiple Web browsers • Different generations of the same browser may interpret HTML somewhat differently • Browser vendors also implement standards differently • Browser types include: – Microsoft Internet Explorer – Mozilla Firefox – Google Chrome – Opera – Lynx Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Managing the Site • When managing a site, you must be prepared to: – Create new content – Update dead links – Remove old sites – Remove unused pages – Ensure connectivity – Report access troubles – Process feedback from customers and stakeholders Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Obtaining Feedback • Your Web team must process various types of feedback • Feedback can come from various sources • Ways to obtain quality feedback – Providing Web forms on the site that ask for customer input – Conducting surveys in person – Conducting surveys via e-mail Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Intellectual Property • A unique product or idea created by an individual or organization – Generally has commercial value • Never "borrow" content without express written consent • Review copyright and trademark issues (e.g., trade secrets, licensing, infringement, plagiarism) • Understand copyright scope, reach and time limits • Consider ethical issues of copyright and plagiarism • Avoid copyright infringement, trademark infringement and plagiarism by: – Reviewing content – Obtaining express written consent – Creating reasonable deadlines Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Outsourcing • Increasingly, Web development work (including site design) is being outsourced to workers in remote locations – May save the company money – May require you to work with remote workers • As you use and work with remote teams, you may have to obtain: – Non-Disclosure Agreements (NDAs) – Legal consultation Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Hosting and Web Service Providers • Internet Service Provider (ISP) – Provides basic services • Internet connectivity • Web server – You need your own experts • Cloud service provider – Provides more advanced services • Software-as-a-service (SaaS) • Backup services and nearly unlimited hard drive space • Advanced Web and database connectivity • Enterprise resource planning (ERP) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Co-Location, Dedicated Hosting and Virtual Servers • Co-location • Dedicated hosting (co-hosting) • Virtual server Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Costs of Using a Cloud Service • Costs associated with a cloud service include: – Database connectivity – Per-service costs – Bandwidth – Customer support – Security – Application development Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Negotiating Web Services and Communicating Needs • Be prepared to detail your needs • Negotiate prices by providing information: – Potential amount of traffic – Hard drive space needed – Database and CGI needs – Additional services (e.g., custom applications) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Information You Need from Your Service Provider • • • • Account information IP addresses and DNS names of the server Instructions about file and directory locations Service provider's contact information Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The Habitat for Humanity Web Site • A not-for-profit, volunteer-driven organization that builds and sells homes for families worldwide • Has built more than 150,000 homes worldwide • A Web site example in this course • Like any Web site, it targets an audience – The site is part of a concerted effort to bring in volunteers – People with technical expertise must run the site – More than technical expertise is required – the Web design team must also understand the business goals Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 1 Summary          Discuss Web page creation Discuss mobile and cloud issues Introduce text editors and markup languages Introduce graphical user interface (GUI) editors Discuss the history of markup languages Introduce the HTML Web development trifecta Discuss Web site development principles Introduce hosting and Web service providers Introduce the Habitat for Humanity Web site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 2: HTML5 Coding Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 2 Objectives • • • • • Define elements and markup tags Identify HTML5 document structure tags Define Web site file structures Prepare your development environment Use paragraph formatting and block-level elements • Use text-level elements • Use ordered and unordered lists • Use comments and good coding practices Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Elements and Markup Tags • Markup tags are element names enclosed in angle brackets, or wickets – Tags embed the element information in the document so that a user agent (e.g., browser) will render text as instructed by the associated element – The combination of elements, markup tags and standard text is loosely referred to as either "code" or "markup" Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Container Tags • Container tags contain page text between an opening and a closing tag, as shown • Container tags are also known as non-empty tags • HTML encourages the use of container or non-empty tags Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Empty Tags • An empty tag does not use a closing tag • An empty tag does not directly format a specified block of text, and therefore one tag can execute the instruction • An empty tag can be written with a slash after the element to become a stand-alone non-empty tag (e.g., <br/>) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved What Constitutes a Tag? • An element – provides the main instruction of the tag • An attribute – specifies a quality or describes a certain aspect of the element • A value – gives value to the element and its attribute Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Document Structure Tags • HTML5 documents usually contain most of the following document structure components: – A <!DOCTYPE> declaration – The <html> </html> tag – The <head> </head> tag – Any <meta/> tags – A <link/> tag reference to a style sheet (recommended) – The <title> </title> tag – The <body> </body> tag Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Are HTML Tags Case-Sensitive? • HTML tags are not case-sensitive, but older XHTML tags are case-sensitive • It is recommended that you write code in lowercase letters to ensure consistency, compatibility and conformance Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Document Type Declaration (<!DOCTYPE>) • Describes the markup language and version of your code • Placed at the top of the document • If you do not specify a <!DOCTYPE> declaration, then two problems may arise: – You will not be able to control how your code renders in the future – You will not be able to use a markup validator • Each version and flavor of HTML/XHTML has its own <!DOCTYPE> declaration • <!DOCTYPE html> is used for HTML5 files Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <html> and <head> Tags • The <html> </html> tags encompass all other HTML elements in the document • The <head> </head> tags encompass several document elements, including: – The <meta/> tag – The <link/> tag that references a CSS file, if present – The <title> </title> tags Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <body> tag • All content to be displayed on the page through the user agent must be enclosed between the <body> </body> tags • The <body> tag no longer has attributes with HTML5 • The previous formatting attributes have been replaced by CSS and the inline CSS style attribute Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Site File Structure • When creating a Web page, you must consider the site’s file structure • Your HTML and image files will be uploaded to a server eventually, so it is always good practice to organize your files as you create them Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Preparing Your Development Environment • Obtain a text editor • Install multiple browsers • Set file preferences Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Paragraph Formatting and Block-Level Elements • Block-level elements – Elements that can affect entire paragraphs or multiple paragraphs • The <p> tag • The <br/> tag • Text-level elements – Elements that can affect as little as a single character or word • <strong> or <em> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Heading Levels • Block-level element • Heading levels 1 through 6 – <h1> </h1> – <h2> </h2> – <h3> </h3> – <h4> </h4> – <h5> </h5> – <h6> </h6> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Tag Nesting in Markup • Placing one pair of tags between another – Proper: <h1> <em> ... </em> </h1> – Improper: <h1> <em> ... </h1> </em> • Improper: The <em> tag is opened within the <h1> tags, but closed after the </h1> tag • If you fail to properly nest code, your pages may still render in some user agents, but they will not validate and may fail to render in the future Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Primitive Formatting with the <pre> Tag • The <pre> tag retains formatting on preformatted text • Can be used to retain tabular format, spacing • All text between <pre> </pre> tags will render as formatted in the HTML file Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Indenting and Centering Text • Use an inline CSS style attribute in the paragraph tag to: – Center text – Justify items to the right or left on a page • The <blockquote> tag also centers and indents a block of text Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Text-Level Elements • Bold and italic text – <strong> for bold text – <em> for italic text Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Phrase Elements and Font Style Elements • The <b> element is a font style element, <strong> is a phrase element; both create boldface text • The same is true of <i> and <em>, respectively, which both create italic or emphasized text • The difference is that <b> specifically means apply the bold font style, whereas <strong> indicates that the text is to be given a strong appearance • In short, <b> represents a font appearance instruction, whereas <strong> represents the weighting of the phrase relative to surrounding text Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <code>, <kbd> and <samp> Tags • All make text appear in a fixed-width font in an HTML-compliant browser window • Text-level phrase elements, their usage and their appearances: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lists • Ordered – A numbered list – Uses the <ol> element and requires a closing tag </ol> • Unordered – A bulleted list – Uses the <ul> element and requires a closing tag </ul> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lists (cont'd) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Good Coding Practice • Write code for forward-compatibility: – Close all tags – Use lowercase letters within tags – Surround attribute values with quotation marks • Create universal markup that applies W3C standards consistently and thus renders consistently across most or all browsers Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Good Coding Practice (cont’d) • Create code that can be easily read by others • Exceptions: – Some code might encounter problems if it includes random spaces – Always test your code in multiple browsers and validate it • Adding hidden comments:  • Use comments to annotate code or document changes Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 2 Summary         Define elements and markup tags Identify HTML5 document structure tags Define Web site file structures Prepare your development environment Use paragraph formatting and block-level elements Use text-level elements Use ordered and unordered lists Use comments and good coding practices Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 3 Objectives • • • • • • • • Discuss Cascading Style Sheets Separate content in HTML Incorporate images in Web pages Discuss HTML entities Use the browser-safe color palette Use colors and images for page backgrounds Specify font information Consider Web design issues, including color combinations and page layout Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Cascading Style Sheets • A technology that adds formatting and structure to your pages • A style sheet is simple text file that contains instructions • If all pages on your site are linked to the same style sheet, then one simple change to the style sheet will change all specified elements across the site Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Cascading Style Sheets (cont’d) • CSS benefits include: – Consistency – Easy change management • Currently, three standards exist for style sheets: – Cascading Style Sheets (CSS1) – Cascading Style Sheets 2 (CSS2) – Cascading Style Sheets 3 (CSS3) • HTML5 adopts CSS as the preferred way to format a page Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Cascading Style Sheets (cont’d) • CSS terminology: – Selector – element to which designated styles are applied – Property – changes the way a selector renders in a browser – Value – defines a property – Declaration – consists of a property and value – Rule – consists of a selector, property and value Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Cascading Style Sheets (cont’d) • Proper CSS structure – place the opening and closing curly braces and each declaration on separate lines • Inheritance – the style you define will flow, or cascade, throughout the documents, unless another style defined inside of a page specifically overrides it • To apply CSS styles to HTML documents, you can: – Declare an inline CSS style attribute – Link to an external style sheet – Create an internal style sheet Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Separating Content in HTML • Create a horizontal rule using the <hr> tag: – <h1> Horizontal Rules </h1> <hr/> Horizontal rules: Lines used to make visual divisions in your document. • Use CSS to stylize horizontal rules Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Images in Web Pages • Use the <img> tag to insert an image file • The key attributes that are required in this tag are: – src (abbreviation for source) – alt (alternative text for the image if it cannot be seen) • Image file formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Comparing Image File Formats Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Using the alt Attribute with Images • The alt attribute specifies alternative text to appear while the graphic is loading, or in place of the graphic in non-graphical browsers • Every image used in HTML5 is required to contain the alt attribute with a corresponding value Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Combining Background Images and Background Colors • If you use a style sheet and specify both image and color as a background, then the background image will always render first • If the image cannot be found, a background color will then appear Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Aligning Images Relative to Text • Use CSS to align images to text • Alignment options include: – bottom – middle – top – left – right Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Resizing Images • Specify image size using the following attributes: – height – width • The syntax for these attributes is: <img src="imagename.gif" height="NumberOfPixels" width="NumberOfPixels"/> • Specifying both height and width can distort an image; be sure to use proper proportions Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML Entities • Uses code with ampersand (&) and semicolon (;) • HTML entities include: – The "less than" symbol < • Code: < – The "greater than" symbol > • Code: > – The copyright sign © • Code: © or © – The registered trademark sign ® • Code: ® or ® • Non-breaking space:   Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Specifying Colors • Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Browser-Safe Color Palette • A set of 216 colors guaranteed to render properly • Ensures that colors in pages render as expected – If you specify a color not supported by the monitor or operating system, the system will approximate the color, a process called dithering – Unexpected results may occur as the result of dithering Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Page Colors and Backgrounds • Specifying color for a page background: – add the background-color property to the body selector in an external CSS file • Specifying an image for a page background: – add the background-image property to the body selector • Specifying the color of text: – Add the color property to the body selector • Specifying the color of unvisited links: – Use the <a:link> element • Specifying the color of visited links: – Use the <a:visited> element Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Specifying Font Information • CSS allows you to change the size, color and typeface of the text • CSS supports many font-related selectors and properties, including: – font-family – font-size – color Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Design Issues • Color combinations impose tone and mood • Consider cultural and audience concerns • Page layout guidelines: – Be succinct – Make sure that each page focuses on one topic – Divide the page into three sections – Include navigation aids – Place comments in each section of code Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Design Issues (cont’d) • Basic HTML5 structural elements of a Web page: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Design Issues (cont’d) • Page-layout methods to control the placement of Web page elements when rendered in the browser: – Fixed-width layout – Liquid layout • Relative path names • White space, the <img> tag and HTML Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 3 Summary         Discuss Cascading Style Sheets Separate content in HTML Incorporate images in Web pages Discuss HTML entities Use the browser-safe color palette Use colors and images for page backgrounds Specify font information Consider Web design issues, including color combinations and page layout Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4: Hyperlinks Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4 Objectives • • • • • • Define and use the anchor element Create local hyperlinks Create external hyperlinks Use images as hyperlinks Create internal hyperlinks Manage hyperlinks Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The Anchor Element • The <a> element creates a hyperlink • The href attribute is used to specify the link's hypertext reference, or the target of the link • The syntax for using the anchor element to create a link is as follows: <a href="URL"> linked text or image (or both) </a> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The Anchor Element (cont'd) • Examples of values for the URL when referencing external links: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The Anchor Element (cont'd) • Various protocols you can specify in a hyperlink URL: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The Anchor Element (cont'd) • Make sure that you: – Use a closing anchor tag </a> – Place quotation marks around the value – Include the closing bracket at the end of the opening <a> tag • Various issues to troubleshoot with hyperlinks include: – Text and images that disappear – Successive Web page text that appears as a hyperlink – Garbled code that appears on screen – Code that will not validate due to a problem <a> tag Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Hyperlinks • Types of hyperlinks include: – Local hyperlink – a link you create from one file on your local system to another file on your local system – External hyperlink – a link you create from a file on your system to a separate file on the Internet – Internal link – a link you create to target other areas within the same page • You can create a hyperlink from an image by surrounding the image tag with opening and closing anchor tags Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creating Internal Links • Creating an internal link requires two steps: – Use the anchor element, <a>, with the id attribute to define an area as a target (the bookmark or anchor) – In another portion of the page, create the link that points to the bookmark using the anchor element with the hypertext reference (href) attribute Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Managing Hyperlinks • All hyperlinks need to be verified – Verify that the URL or other reference is valid – Verify that the target page or location is accessible • Hyperlinks need to be managed – Over time, URLs (and content) change – "Dead" links frustrate users • Use automated link-checking software to validate hyperlinks • Manually check links to verify relevance of linked content Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 4 Summary       Define and use the anchor element Create local hyperlinks Create external hyperlinks Use images as hyperlinks Create internal hyperlinks Manage hyperlinks Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5 Objectives • • • • • • Describe HTML table elements and attributes Describe CSS properties for tables Use table and data alignment options Change the height and width of table elements Specify column and row spanning Compare HTML tables with CSS page structure Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Introduction to HTML Tables • Present data that lends itself to tabular format • In HTML, do not use tables to structure entire pages Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Table Element Tags Copyright © 2012 Certification Partners, LLC -- All Rights Reserved CSS Properties for All Table Elements Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Table and Data Alignment Options • Defaults for table data: – Content in table header cells is aligned both horizontally and vertically to the center of the cell – Content in table data cells is aligned horizontally to the left and vertically to the center • You can change the alignment for an individual cell or for an entire row by using CSS properties: – text-align to specify horizontal alignment – vertical-align for vertical alignment Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Height and Width of Table Elements • You can change the height or width of the table and individual cells by using the height property of the CSS table rule • You can specify: – Pixel values – Percentage values Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Column and Row Spanning • You can specify that a column or row span two or more cells using the following attributes: – colspan to specify that a column span across multiple cells – rowspan to specify that a row span across multiple cells Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML Tables vs. CSS Page Structure • HTML tables were formerly used to create content structure for entire Web pages • The W3C recommends using HTML5 with CSS to structure a Web page • HTML5 structural elements of Web page: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5 Summary       Describe HTML table elements and attributes Describe CSS properties for tables Use table and data alignment options Change the height and width of table elements Specify column and row spanning Compare HTML tables with CSS page structure Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 6: Web Forms Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 6 Objectives • • • • Discuss the importance of CGI to Web forms Discuss HTML5 and Web forms Identify basic Web form tags Construct a Web form using Web form fields Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Introduction to Web Forms • Forms are used to obtain information from users – Input can include the user’s name, address or credit card number, for example – The information that a user submits in the form is sent to a server, where it is stored and/or processed • Forms are essential for e-commerce, as well as for gathering information Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Forms and CGI • To be truly functional, a form requires the use of a Common Gateway Interface (CGI) program to process and organize the user input • A CGI script residing on a server performs two important functions: – Receives data from a Web browser – Processes and formats the data • CGI scripts can also be used to forward data to the proper destination, where it can be processed or stored Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Diagramming a CGI Session Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Parsing Data • A Web form receives submitted user input • CGI scripting (or an alternative) parses the data • The browser sends user-submitted information to the Web server as a raw text string • The basic element of a raw text string is a name=value pair • This raw text string consists of name=value pairs, delimited by ampersands (&) • After the server receives this information, a CGI script can parse and format the raw text string into a humanreadable format, or enter the data into a database Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Applied Example: FormMail • FormMail is popular because: – It is available free of charge from Matt's Script Archive (MSA) – It is written in Perl, which allows developers to use a free CGI interpreter – It is easy to customize • You install the script onto a Web server and refer to it in your forms Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML5 and Forms • The main differences in form creation in HTML5 vs. HTML 4.01 are: – Cascading Style Sheets (CSS) are used for all form styles – Advanced features are now available, such as new <form> elements and attributes, and <input> types for better control of validation and input control • Many of the new elements and attributes are not supported by most browsers, even the ones that support HTML5 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Basic Tags for Creating Web Forms • The <form> tag creates a user-input Web form • Attributes include: – method • "get": not as secure, sends unencrypted text • "post": encrypts, but can be easily broken – action • Specifies the name and location of the CGI script used to process the form • Place the <input>, <select> and <textarea> tags between <form> </form> tags to create form fields Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Form Fields • User-input form fields include: – Text box – Radio button – Check box – Single-option select list – Multiple-option select list – Scrolling text area box – Password field – File upload button – Submit and Reset buttons Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Forms and the name Attribute • All form field elements share an attribute: name – Identifies information you receive from a user and associates it with a value you specify – Helps organize user input Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Text Boxes • Used to collect a single line of data from the user, such as name, e-mail or address information • Syntax: <input type="text" name="FieldName"/> • You can enter default text to appear in the form: <input type="text" name="FieldName" value="DefaultText"/> In this example, "DefaultText" would appear in the user’s window Copyright © 2012 Certification Partners, LLC -- All Rights Reserved File Upload • Provides a Browse button and accompanying text box • Users click the Browse button and navigate to the file they want to upload • The path to the file chosen by the user will appear in the text box Choose your file here: <input type="file" name="File"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Submit and Reset Buttons • Submit button – Sends completed user information from Web form to server • Reset button – Clears all information entered into form fields, instead of submitting information to server • Every form needs a means to submit data <input type="submit"/> <input type="reset"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Radio Buttons • A group of two or more mutually exclusive options • Never used as stand-alone items • Example: Do you know carpentry? <input type="radio" name="Carpentry" value="yes"/> • To present a preselected radio button, add the following attribute and value: checked="checked" Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Check Boxes • A group of non-exclusive choices • Syntax: <input type="checkbox" name="groupName"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Select Lists • Drop-down lists of predetermined options • Created with the <select> tag • Two types: – Single-option select list Multiple-option select list • To allow the user to select multiple options, add the multiple attribute in the <select> tag Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Scrolling Text Area Box • Created by the <textarea> element • Provides a scrolling text box into which a user can enter a few sentences, an address, a letter, etc. • Used to gather more than one line of text from the user • Attributes include: – cols – rows – wrap • Text between <textarea> tags will appear to users as default text within the box Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Forms, CAPTCHA and SEO • Use CAPTCHA to reduce spam submissions sent to your forms • Consider search engine optimization (SEO) issues when developing Web forms Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 6 Summary     Discuss the importance of CGI to Web forms Discuss HTML5 and Web forms Identify basic Web form tags Construct a Web form using Web form fields Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 7: Video, Audio and Image Techniques Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 7 Objectives • • • • • • • • • Use the <video> element to embed video in Web pages Use the <audio> element to embed audio in Web pages Define graphic types Create client-side image maps Define image transparency Define image interlacing Use Web-based technologies to create animation Explore mobile device issues with animation and plug-ins Create and manage images Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <video> Element • Video elements and attributes: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <video> Element (cont’d) • HTML5-compliant browser support for HTML5 video formats and codecs: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <audio> Element • The <audio> element allows developers a standard method to embed audio into Web pages • The controls attribute identifies the default audio controls: play, pause, volume, etc. • Multiple sources can be identified with the <source> element to ensure various audio formats are supported Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The <audio> Element (cont’d) • HTML5-compliant browser support for HTML5 audio formats: • Additional <audio> and <video> attributes: Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Graphic Types • Vector – Graphics that use mathematical coordinates with lines, curves and shapes to create desired images and specify colors • Bitmap – Graphics that use small dots (usually thousands) to create an image and specify color – Also known as raster graphics Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Image Maps • An image that contains hyperlinked, clickable regions, sometimes called "hot spots" • Each hot spot is defined by a set of coordinates (indicating its position on the image) and a URL reference • Two types of image maps: – Client-side (the most common) – Server-side (rarely used) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Defining a Client-Side Image Map • Define a map, assign it a name, and provide hot-spot coordinates • Refer to the image map by map name: <map name="mapname"> <area shape="shape" coords="coordinates" href="url" alt="description"/> <area shape="shape" coords="coordinates" href="url" alt="description"/> <area shape="shape" coords="coordinates" href="url" alt="description"/> </map> • Associate the image file with the map: <img src="imagemap.gif" usemap="#mapname"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Defining a Rectangle Hot Spot • Any two points can define a rectangle • Each point is represented by a horizontal (x) coordinate and a vertical (y) coordinate • Rectangles are defined by four coordinates representing the upper-left and bottom-right corners of the rectangle <area shape="rect" coords="x1,y1,x2,y2" href="url" alt="description"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Defining a Circle Hot Spot • Circles are defined by two coordinates and a radius <area shape="circle" coords="x1,y1,radius" href="url " alt="description"/> • The pair of coordinates specifies the circle's center • A third number specifies the desired radius, or half-width, of the circle Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Defining a Polygon Hot Spot • Defines an irregular area (neither a circle nor a rectangle) • Specify coordinates for each point that defines the polygon, from three to 100 pairs of coordinates <area shape="poly" coords="x1,y1,x2,y2,...xn,yn" href="url " alt="description"/> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Image Transparency • Provides the visual effect of blending in to the background of the Web page • Most developers use image transparency to remove the blank image background so it appears to float on the page • Web-ready formats that support transparency: – GIF 89a – PNG Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Image with No Transparency Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Transparent PNG Image Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Image Interlacing • Allows an image to progressively display in a browser while downloading • The image appears in stages during download (from top to bottom) • The top of a non-interlaced image will appear after the browser has read 50 percent of the image Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Image Interlacing (cont'd) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Animation • Several images in a sequence, rendered in rapid succession to simulate motion • Made possible in several ways: – Animated GIFs and PNGs • The animated image is actually a group of separate, sequenced images – Flash • Scripts, called macros, that manipulate vector images • Popular, but proprietary technology (Adobe) • Requires a browser plug-in to view – Silverlight – Microsoft's answer to Flash – Java applets – requires a Java interpreter to view – Scalable Vector Graphics (SVG) – an open standard Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Mobile Device Issues with Animation and Plug-Ins • As you create animated images, remember the following issues: – Animation techniques are often proprietary – Plug-ins drain system resources – Animation may seem useful and interesting, but it is frequently overused – Animated images can limit accessibility Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creating and Managing Images • There are several options you can use to obtain and manage images for use on your Web pages: – Create original images using image-creation software – Scan hard-copy images – Use stock photographs – Obtain photos from photo-sharing Web sites – Use photo management software to organize, edit and share your images • Consider search engine optimization (SEO) issues when creating and using images Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 7 Summary • • • • • • • • • Use the <video> element to embed video in Web pages Use the <audio> element to embed audio in Web pages Define graphic types Create client-side image maps Define image transparency Define image interlacing Use Web-based technologies to create animation Explore mobile device issues with animation and plug-ins Create and manage images Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 8: Extending HTML Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 8 Objectives • • • • • • • • • • Identify client-side and server-side scripting technologies Identify the benefits of Dynamic HTML (DHTML) Define the function of the Document Object Model (DOM) Define HTML5 APIs Use the HTML5 canvas API Use the HTML5 offline Web application API Use the HTML5 geolocation API Use the HTML5 drag-and-drop API Define Web application frameworks Connect Web pages to databases Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Server-Side and Client-Side Languages • Programming concepts – Not required knowledge, but essential terminology is useful to understand • Programming statements – if/then – if/then/else – do while – do until – break Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Server-Side Languages • Attributes of server-side language: – Code is executed by the Web server, not the Web browser – Code executes because an interpreter has been installed and activated on the Web server • Server-side scripts are used for various purposes: – Browser detection – Database connectivity – Cookie creation and identification – Logon scripts – Hit counters – File uploading and downloading Copyright © 2012 Certification Partners, LLC -- All Rights Reserved PHP Hypertext Preprocessor (PHP) • • • An interpreted server-side scripting language for creating dynamic Web pages Embedded in HTML pages but usually executed on a Web server Example of PHP code: <?php $envVars = array("HTTP_USER_AGENT"); foreach($envVars as $var) { print " <html><head><title>PHP CGI Example</title></head><body> <h1>Hello, World!</h1> Your user agent is:<strong>${$var}.</strong> <br/> </body></html> "; } ?> Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Practical Extraction and Report Language (Perl) • Another server-interpreted language • Older, but very popular • Example of Perl code: #!/usr/bin/perl use CGI qw/:all/; $cgi_object = CGI::new(); print "Content-type: text/html\n\n"; print "<html>\n<head>\n<title>\nPerl CGI Example\n</title>\n<body>\n<h1>Hello, World!</h1>\nYour user agent is: <b>\n"; print $cgi_object->user_agent(); print "</b>.</html>\n"; Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Active Server Pages (ASP) using VBScript • Microsoft’s original server-side scripting solution • Example of ASP code using VBScript: <%@ LANGUAGE=vbscript %> <html> <head> <title>ASP CGI Example</title> </head> <body> <h1>Hello, World!</h1> <% path = Request.ServerVariables("PATH_INFO") pagename = Request.ServerVariables("HTTP_HOST") method = Request.ServerVariables("REQUEST_METHOD") browser = Request.ServerVariables("HTTP_USER_AGENT") user = Request.ServerVariables("REMOTE_ADDR") Copyright © 2012 Certification Partners, LLC -- All Rights Reserved The C Language • A procedural programming language (relies upon subprograms to accomplish a task in an application) • C is a time-honored language, usually used to create stand-alone applications and operating systems (e.g., Linux/UNIX) • Can also be used for CGI • Example of C code: #include <stdio.h> int main() { printf("Hello, World!\n"); return 0; } • Note that this code includes a reference to a library called stdio.h Copyright © 2012 Certification Partners, LLC -- All Rights Reserved C++ • Object-oriented programming language – A style of programming that links data to the processes that manipulate it – May include procedural elements, but instead of using subprograms to accomplish a task, will create an object that can then be manipulated throughout the program – Once an object is created, it can be reused • Platform dependent: – Must be compiled to a specific computer type (e.g., IBM-compatible machines that run Windows) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Java • Object-oriented programming language • Compiled • Platform-independent – Marketing: Write once, run anywhere – Reality: Write once, test everywhere • Java can be used to write: – Stand-alone applications – Servlets – JavaServer Pages (JSP) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Visual Basic • A compiled programming language developed by Microsoft Corporation • Used for stand-alone applications and server-side Web applications • Once only procedural, now has object-based elements Copyright © 2012 Certification Partners, LLC -- All Rights Reserved C# • • • • Pronounced "C sharp" Object-oriented programming language Compiled Platform-dependent Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Server Side Includes (SSIs) • An instruction inside of an HTML page that directs the Web server to perform an action • An alternative to CGI • SSI instructions are in SGML • Can be used to: – Place the results of a database query into a page – Execute other programs – Indicate the last time a document was modified – Insert footer text at the bottom of a page – Add the current date as a timestamp to a page Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Server Side Includes (SSIs) (cont'd) • Standard SSI file name extensions: – .shtml – .shtm • SSI support in Web servers – Most Web servers include code that enables SSI – However, the SSI feature may be disabled • You may have to activate the feature • You may also have to define a MIME type Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Client-Side Languages • Issues with client-side languages – Some clients do not support JavaScript or any other such scripting language – Users can deactivate script execution in browsers that normally support it Copyright © 2012 Certification Partners, LLC -- All Rights Reserved JavaScript • Object-based scripting language • Adds interactivity to Web pages • Can also be used on the server side (Server-Side JavaScript [SSJS]) • On the client side, can be used to: – Detect browsers – Create cookies – Create mouse rollovers • JavaScript advantages – Platform-independent – Vendor-neutral – Relatively simple Copyright © 2012 Certification Partners, LLC -- All Rights Reserved JavaScript (cont'd) • Can be placed in an HTML document – Use the <script> tag • Browser detection (using JavaScript or any other scripting technology) is useful for: – Presenting different versions of a site to different browsers – Informing users in a corporate intranet to upgrade their browsers to a supported version – Ensuring accessibility to disabled users Copyright © 2012 Certification Partners, LLC -- All Rights Reserved JavaScript (cont'd) • JavaScript and cookies – Cookies are stored on the hard drive – Cookies can be used to: • Store passwords • Store user preferences • Choose which Web pages will be displayed based on browser version Copyright © 2012 Certification Partners, LLC -- All Rights Reserved VBScript • Microsoft’s answer to JavaScript • Can be used on the client side or the server side • If used on the client side, only Internet Explorer can render the script Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Dynamic HTML (DHTML) • An enhancement that provides animation, interactivity and dynamic updates in pages • DHTML capabilities include: – Automatic adjustment of font sizes and colors – Absolute positioning – New document content – Granular control over animation, audio and video Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Document Object Model (DOM) • A vendor-neutral, cross-platform application programming interface (API) • Specifies how objects in a document can be referred to and manipulated through scripting languages • Describes the elements, or objects, within a document rendered by a user agent (e.g., Web browser) • A W3C standard Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Document Object Model (DOM) (cont'd) • Accessing a browser's DOM – Use a scripting language • JavaScript • VBScript – DOM compliance • The W3C has created a standard DOM • Choosing a DOM-compliant browser • Undefined object error and the DOM • HTML, the DOM and browser compatibility Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML5 APIs • HTML5 APIs are the best examples of DHTML • HTML5 APIs utilize multiple technologies to extend the functionality of HTML : – HTML5 – Cascading Style Sheets (CSS) – JavaScript access to the Document Object Model (DOM) • HTML5 APIs are used to create apps for mobile devices, not just Web pages Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Canvas • Provides a place on a Web page (a "canvas") where developers can display graphics, animation, video and games "on the fly" without the need for a plug-in • Draw objects on a canvas using JavaScript • The canvas element is defined in HTML with the <canvas></canvas> tag • The canvas element has only two attributes: height and width Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Offline Web Application • Allows users to interact with Web sites when a network connection is unavailable • Web pages will store data locally within the user’s browser, utilizing the application cache • Utilizing a manifest, which tells the browser which files to store locally, is what allows the user to continue working without the connection Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Geolocation • Used to locate a user’s geographical position • Geolocation can: – Determine a user’s current position – Monitor the user’s location – Update any changes to that location • Geolocation displays the user’s information in a localized map Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Drag-and-Drop Functionality • Allows a user to move an item from one place on the page to another by dragging it across the screen and dropping it in a different location • The drop zone is the place where dragged items can be placed • There are two kinds of drag-and-drop functionality: – Dragging files from the user’s computer onto a Web page – Dragging items to a different location within the same page Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Application Frameworks • Web application framework – a set of software tools or code that is commonly used in the creation and management of online applications • Popular Web application frameworks: – Django – Ruby on Rails Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Connecting to a Database • For a database to work, you must: – Provide a way for the Web server and database to recognize each other – Provide permissions to the database so it can be read and/or written to Copyright © 2012 Certification Partners, LLC -- All Rights Reserved CGI and Permissions • Aside from improper coding, CGI scripts usually fail to execute because: – The Web server does not have the permissions to execute files and scripts – The file or script used has incorrect permissions, which prohibits the server from executing the file Copyright © 2012 Certification Partners, LLC -- All Rights Reserved ISPs and CGI • If working with an Internet Service Provider (ISP), you generally need to: – Request CGI services – Request that the ISP: • Enables execute permissions on your scripts • Creates a directory that contains available CGI scripts • Provides user names and passwords with enough permissions to work the system Copyright © 2012 Certification Partners, LLC -- All Rights Reserved N-Tier Applications • When discussing databases, three elements are generally involved: – Data • The database file or multiple database files – Business logic • The SQL coding necessary to create relationships with the data stored in the database – Presentation • The way that data and business logic are presented on the user screen Copyright © 2012 Certification Partners, LLC -- All Rights Reserved N-Tier Applications (cont'd) • In n-tier, all three database elements are separated Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 8 Summary • • • • • • • • • • Identify client-side and server-side scripting technologies Identify the benefits of Dynamic HTML (DHTML) Define the function of the Document Object Model (DOM) Define HTML5 APIs Use the HTML5 canvas API Use the HTML5 offline Web application API Use the HTML5 geolocation API Use the HTML5 drag-and-drop API Define Web application frameworks Connect Web pages to databases Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 9: GUI HTML Editors and Mobile Web Sites Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 9 Objectives • • • • • • • • • • Identify types of GUI editors Identify specific features of GUI editors Create a Web page using a GUI editor Compare HTML text editors with GUI editors Preview and validate code for pages created with a GUI editor Identify requirements for publishing a Web site to a Web server Develop Web pages for mobile devices Compare mobile apps with mobile Web sites Convert a Web site for mobile users Use "Web 2.0" technologies to create Web pages Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Introduction to GUI HTML Editors • Graphical user interface (GUI) HTML editor • Automatically generates HTML code • Developer inputs content as in a standard word processor • Also known as WYSIWYG (What You See Is What You Get) editors Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Types of GUI Editors • Page editors – Allow you to create Web pages using your mouse and a toolbar – Page editor software include: • Virtual Mechanics WebDwarf • Mozilla SeaMonkey • Site management editors – Allow you to create Web pages and to manage sites – Site management editor software include: • Adobe Dreamweaver • Microsoft Expression Web Copyright © 2012 Certification Partners, LLC -- All Rights Reserved GUI HTML Editor Functionality • Features of GUI editors: – Templates and wizards – Text style options – Icon bars – Image insertion – Hypertext link creation – HTML importing – Table creation – Spelling check – Publishing Copyright © 2012 Certification Partners, LLC -- All Rights Reserved W3C Authoring Tool Accessibility Guidelines • The guidelines mandate: – The ability of the GUI editor to generate proper code – The usability of the GUI editor by a disabled person creating a Web page • Seven specific points Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creating Web Pages with a GUI Editor • Coursebook labs 9-1 through 9-7 will familiarize you with the toolbar, menus and functions of a GUI Web page editor, KompoZer Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML Text Editors vs. GUI Editors • HTML text editors (e.g., Notepad, WordPad, Vi, Emacs) – Easily include other code (e.g., JavaScript) – Readily modify code – Apply your HTML knowledge and skills • Drawbacks: – Typing code is time-consuming – People with disabilities may find manual entry difficult or impossible – Requires a higher degree of effort to create even a simple page Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTML Text Editors vs. GUI Editors (cont’d) • GUI HTML editors – Place code into files for you – Allow you to modify your code manually • Drawbacks: – May alter or ignore any code you enter manually – Rarely keep pace with the evolution of HTML standards – At the time of this writing, HTML5 was not supported by any open-source GUI editors Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Previewing Pages and Validating Code • Most GUI editors make it easy to: – Preview pages in a browser – View source code – Validate code • Validating HTML code – Specify the correct <!DOCTYPE> before validating; the GUI HTML editor may not do this – Many tools provide useful validation tools – Some editors provide tools for disabled users Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Site Publishing • GUI HTML editors usually provide a publishing feature • FTP is the standard protocol for Web page publishing – Stand-alone FTP clients – FTP client provided by GUI HTML editor Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Publishing to a Test Web Server • Before publishing pages to a public site, post them to a test server – Verify that CGI script works as expected – Locate and repair dead links – Allow stakeholders to preview the site • Test server configuration – Test server must be identical to production server – Use the same: • Operating system version • Type and version of Web server software • CGI interpreter software Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing Web Pages for Mobile Devices • When you develop a Web site for viewing on mobile devices: – Keep your Web pages simple and uncluttered – Prioritize your content – Optimize your site to a smaller screen size Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Mobile Apps vs. Mobile Web Sites • Mobile apps – stand-alone applications that are downloaded from a vendor's software repository onto a mobile device – Mobile apps are designed and built for specific mobile operating systems • Mobile Web sites – usually stripped-down versions of traditional Web sites – Mobile Web sites offer cross-platform usability; mobile apps do not Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Converting a Web site for Mobile Users • Many services are available to convert traditional sites to mobile sites • Most services support the major types of mobile operating systems used in smartphones and tablets • Ensure the service provides support for whatever mobile devices your customers will be using to access your site • Test your mobile Web site on as many mobile devices as possible • Validate your markup code to HTML5 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Working with Web 2.0 • Web 2.0 – changing trends in the use of WWW technology and Web design that led to the development of information-sharing and collaboration capabilities • Ajax – enables Web applications to interact with users in much the same way they do with desktop applications Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Browsers as Application Delivery Platforms • Access to hosted applications and services on Web sites that enable you to perform computing tasks without the need to download and install any software • Cloud computing – a computing paradigm in which users are able to access software and services over the Internet instead of from their desktops • Software as a Service (SaaS): – Another term for cloud computing – The software cannot be downloaded or owned by the end user – The software becomes available as a service either for free or for a fee Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Browsers as Application Delivery Platforms (cont'd) • Advantages – Flexibility – Scalability – Cost reduction • Disadvantages – Connectivity – Speed – Lockout Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Personalizing a Web Page with Third-Party Applications • The functionality and usability of your Web page can dramatically increase without the need for you to create programs • Adding such applications may slow page rendering speeds and can easily be overused • Example: Google Gadgets Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Feeds • Web feed – a data format for delivering Web content that is updated frequently • Content syndication – RSS (Really Simple Syndication, RDF Site Summary or Rich Site Summary) – Atom Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Podcasts • Podcast – the use of audio or video digital-media files that are distributed through Web feeds to subscribed users – Similar to an RSS feed – Podcast files can be syndicated, subscribed to and downloaded automatically Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 9 Summary • • • • • • • • • • Identify types of GUI editors Identify specific features of GUI editors Create a Web page using a GUI editor Compare HTML text editors with GUI editors Preview and validate code for pages created with a GUI editor Identify requirements for publishing a Web site to a Web server Develop Web pages for mobile devices Compare mobile apps with mobile Web sites Convert a Web site for mobile users Use advanced "Web 2.0" technologies to create Web pages Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 10: Web Site Development for Business Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 10 Objectives • Develop a business Web site • Discuss the three e-commerce models • Identify the relationship between Internet marketing and search engine optimization (SEO) • Identify payment models used in e-commerce • Identify issues related to working in a global environment • Explore the relationship between databases and Web pages • Discuss ways to optimize the impact of the Web page • Identify Web page front-end design issues • Identify file formats for use in Web pages • Identify Web page back-end resource issues • Calculate bandwidth and download time • Name Web page files Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing a Business Web Site • Web sites can serve as a business's primary means of advertising and marketing • Brand – a concept or collection of symbols associated with a product, service or person – Should be simple – Should be different – Should be safe – Should make a promise – Should reflect the company's attributes – Should reflect the company's personality – Should appeal to the intended audience Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Developing a Business Web Site (cont’d) • Customers do not read Web pages; they scan them • Effectively designed pages: – Feature crisp, concise text – Include one idea per paragraph – Include search engine keywords in the main portions of text – Convey the central message using the invertedpyramid writing style Copyright © 2012 Certification Partners, LLC -- All Rights Reserved E-Commerce Considerations • There are three major e-commerce models that are widely implemented: – Business to consumer (B2C) – Business to business (B2B) – Consumer to consumer (C2C) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Internet Marketing and Search Engine Optimization (SEO) • Marketing terms • Internet marketing consists of: – Search engine optimization (SEO) – Pay per click (PPC) – Web analytics Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Search Engine Optimization (SEO) • SEO improves the volume and quality of traffic to a Web site by structuring content to improve search engine ranking • An SEO expert must: – Learn about and consider the factors that search engines take into account as they rank sites – Try to create and edit Web pages accordingly Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Pay Per Click (PPC) • PPC – list your site high in search engine rankings by advertising on keywords that describe your product or service • You simply pay to have your page listed as highly as possible • Most Internet marketing campaigns combine SEO and PPC strategies Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Analytics • Web analytic types: – On-site analytics • Study visitor behavior once that visitor has accessed your site – Off-site analytics • Identify the size of your market • Identify competitors • Determine your market penetration • Conduct surveys • Consult market research sources Copyright © 2012 Certification Partners, LLC -- All Rights Reserved E-Commerce Payment Technologies • Payment technologies include: – Electronic Funds Transfer (EFT) – Payment gateways – 3-D Secure Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Secure Sockets Layer (SSL) / Transport Layer Security (TLS) • Not transaction methods • Used to secure transactions through encryption • Services provided: – Authentication – Data confidentiality – Data integrity Copyright © 2012 Certification Partners, LLC -- All Rights Reserved SSL/TLS and Public Key Infrastructure (PKI) • You need a certificate to enable host authentication before you can begin an SSL session • Public Key Infrastructure (PKI) – a collection of individuals, networks and computers that comprise the ability to authoritatively confirm the identity of a person, host or organization • PKI involves two elements: – Digital certificate – Certificate authority (CA) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Working in a Global Environment • By placing your business on the Web, you expand your audience to include anyone in the world with a browser and Internet access • Consider the level to which you will accommodate potential customers from countries outside yours – Issues to consider include: • Currency differences • International shipping • Language concerns • Relationship management Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Databases and Web Pages • Databases can store information about company inventory • Databases can store customer information Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Web Pages and CGI • CGI can be used to help Web pages pass information to and from databases • Examples of CGI technology include: – Perl – PHP Hypertext Preprocessor (PHP) – Active Server Pages (ASP) and .NET – JavaServer Pages (JSP) – ColdFusion – Python – Django – Ajax – Ruby Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Optimizing the Impact of the Web Page • SEO techniques are designed to get Web pages to conform to the expectations of search engine applications • Search engine companies consider: – How many hyperlinks from other sites point to a page – How informative a page is – How well a page's code is structured – How often the content on the page is updated • As you optimize pages for SEO, you should: – Use properly validated HTML code – Apply Cascading Style Sheets (CSS) – Structure pages correctly Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Front-End Issues • A Web page is an interface that should: – Be accessible by all users – Incorporate appealing images and graphical elements – Include constantly updated hyperlinks – Use tables wisely – Present carefully designed Web forms – Connect pages to databases securely – Use the most current technologies appropriate for the page – Use images sparingly – Be easily navigable and without dead ends – Include alternative navigation links Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Site Maps • Allow visitors to view a summary of your Web site's structure • A useful site map is the product of proper site planning • Useful site maps include: – Topical hierarchy – Aptly named site sections – Search capability Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creative Design and Branding Standards • A Web page is often part of a larger marketing and sales strategy – Creating and ensuring brand recognition (name recognition) – Presenting a strong message • A Web page allows you to develop: – A market – Mind share – A brand Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creative Design and Branding Standards (cont'd) • Design and branding standards meetings focus on the following: – Target markets – Market messages – Media choices – Color combinations – Sales strategies – Technologies to use Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Creative Design and Branding Standards (cont'd) • Audience development techniques include: – Flash, Java – Unique Web site features – Company logos – Strategies developed by sales and marketing – Push and pull technologies – Visitor tracking Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Portals • A Web site that acts as a centralized access point for additional Web sites – Portal types: • Vertical • Horizontal • Portal benefits: – Directs users to the best sites – Attracts users to products – Improves brand name Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Wiki Site • A Web site that allows all visitors to collaborate in its construction – Wiki software is installed on a Web server – You can lock down certain pages and leave others open to editing • Most wiki pages are written in a simplified markup language called LaTeX (www.latex-project.org) that accommodates the fast-paced nature of a wiki site • The word wiki is coined from the Hawaiian phrase "wiki wiki," which means "very quick" Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Documenting Changes • Keep a written record of all changes to your Web site • Documenting change allows you to: – Remember which changes have been made to the HTML code and/or pages on the site – Ensure that you publish all security updates to the Web server – Provide evidence of good-faith efforts to ensure accessibility – Verify that you have fulfilled requests from departments in your organization Copyright © 2012 Certification Partners, LLC -- All Rights Reserved File Formats and Active Content • Your pages will include various content formats, including PDF documents, images and media files • Common file formats and MIME types – HTML: text/html – JPEG: image/jpeg – Cascading Style Sheets (CSS): text/css – MPEG: audio/mpeg – MP3: audio/mp3 • Evaluating proprietary formats – Difficulty/inconvenience – Cost – Audience limitation Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Back-End Issues • Database connectivity – Databases provide the ability to: • Present stored information to customers, and allow them to search and retrieve • Receive information from customers and save it for later retrieval – Types of databases • Flat file • Non-relational • Relational • Object-oriented – Web servers use relational databases to store data Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Back-End Issues (cont’d) • Relational databases – Store information in tables – Can consist of a single file or can be distributed among several database servers • Structured Query Language (SQL) – Used to create and maintain professional, highperformance corporate databases • Database connection methods – Open Database Connectivity (ODBC) – Java Database Connectivity (JDBC) • Indexing and cataloging Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Bandwidth and Download Time • Download time – Factor in all files – Consider typical connection speeds • Calculate download time for a Web page – Check the size of the HTML file and all associated images, files or programs – Determine the speed of your network connection – Convert the connection speed and file size to common units of measure (e.g., bytes or bits) – Divide file size by connection speed Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Naming Web Page Files • Web servers search for default page names • Default page names include: – index.html – index.htm – default.htm – default.asp • Default page names can change from server to server – Apache Server – usually index.html – IIS – usually default.htm, default.html or index.html Copyright © 2012 Certification Partners, LLC -- All Rights Reserved HTTP 404 – File Not Found Error • Indicates that a user has requested a file that does not exist on the specified Web server – Generated by the server – Can be customized Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 10 Summary • Develop a business Web site • Discuss the three e-commerce models • Identify the relationship between Internet marketing and search engine optimization (SEO) • Identify payment models used in e-commerce • Identify issues related to working in a global environment • Explore the relationship between databases and Web pages • Discuss ways to optimize the impact of the Web page • Identify Web page front-end design issues • Identify file formats for use in Web pages • Identify Web page back-end resource issues • Calculate bandwidth and download time • Name Web page files Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Site Development Associate v2.0           Markup Language and Site Development Essentials HTML5 Coding Cascading Style Sheets (CSS) and Graphical Elements Hyperlinks HTML Tables Web Forms Video, Audio and Image Techniques Extending HTML GUI HTML Editors and Mobile Web Sites Web Site Development for Business Copyright © 2012 Certification Partners, LLC -- All Rights Reserved

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Download SDA v2.0 SlideShow