1. Lesson 1: Markup Language and Site Development Essentials

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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)

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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 messages
Sending postal ("snail mail") messages if necessary
Sending fax messages
Telephone calls

22. Communicating the Web Site Plan
Use oral presentations and presentation aids, including:
Presentation software
Overhead projection
Whiteboards
Easel and poster paper
Charts
Published handouts

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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)

32. Co-Location, Dedicated Hosting and Virtual Servers
Dedicated hosting (co-hosting)
Virtual server

33. Costs of Using a Cloud Service
Costs associated with a cloud service include:
Database connectivity
Per-service costs
Bandwidth
Customer support
Security
Application development

34. 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)

35. 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

36. 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

37. 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