Lesson 9: GUI HTML Editors and Mobile Web Sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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