1 / 22

Lesson 9: GUI HTML Editors and Mobile Web Sites

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

kingh
Download Presentation

Lesson 9: GUI HTML Editors and Mobile Web Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

More Related