1. Lesson 9: GUI HTML Editors and Mobile Web Sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. Browsers as Application Delivery Platforms (cont'd)
Advantages
Flexibility
Scalability
Cost reduction
Disadvantages
Connectivity
Speed
Lockout

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

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

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

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