This learning session, from the Georgia Institute of Technology, shows how to use the MySQL database and PHP web scripting to quickly and cheaply program and build a content management system, URL reference database, and web-based information portal for a real-world library application. This training session covers working modules, provides development resources and gives you a practical understanding of web development with these tools.

Developing Web Applications with MySQL and PHP


Speech and Presentation - View/Open
32347Kb, AVI format

Handout - View/Open
72Kb, pdf format

Discussion - View/Open
101Kb, pdf format

Power Point Presentation - View/Open
2308Kb, Powerpoint format

This new software tutorial web site, In Pictures, hosts and offers free online computer Tutorials. This blog post details and links to their free HTML and CSS Tutorials. These HTML and CSS tutorials will help you learn how to use HTML and CSS. The tutorials on this site are based on pictures, or illustrations and screen shots demonstrating the tasks and features being taught. These software tutorials were developed as part of a research study performed for the U.S. Department of Education. Every user who completed  these illustrated HTML and CSS tutorials reported that they were able to learn and understand HTML and CSS more quickly and easily compared to using traditional software training methods.

 
HTML & CSS Tutorials using Pictures


HTML Basics

• Create Web pages
• Employ style sheets
• Format text
• Create links
• Insert graphics
• Link multiple pages
• Change colors

Navigation & Layout

• Lay out pages using CSS
• Create navigation bars
• Employ multiple levels

Interactivity

• Employ forms
• Upload to a Web server

Advanced Layout

• Employ background graphics
• Employ style classes
• Create rollover effects
• Specify page margins

This free book, The Web Style Guide, 2nd edition, teaches you Web page and Web site design principles, along with tips and tricks, ranging from interface design to editorial style and graphics. It provides you a high level of understanding which will assist your Web development and design efforts. Whether you're a newbie to Web design and development or a veteran, this book will give you insight into Web site design that you have not had before, bringing you a more reasoned and realistic perspective. The information given in this Web Style Guide is based on the functional concepts of design, but it also discusses Web site accessibility, Cascading Style Sheets (CSS), and flexible page design. Material covering information architecture, site maintenance, and multimedia design is also included. The second edition offers added illustrations and updated Web site examples to show current best practices.

Web Style Guide, 2nd edition


Chapter 1: Process

• Before you begin
  • Planning
  • Developing a site specification
• The site development process
  • Site definition and planning
  • Information architecture
  • Site design
  • Site construction
  • Site marketing
  • Tracking, evaluation, & maintenance
• References

• Web page design versus conventional document design
• Make your Web pages freestanding
• Basic interface design
  • User-centered design
  • Accessibility
• Navigation
• References

• Organizing information
  • "Chunking" information
• Site structure
  • Basic information structures
  • Creating site diagrams
• Site design themes
  • Training
  • Teaching
  • Continuing education
  • Reference
  • Entertainment and magazine sites
  • News sites
  • E-commerce
• Site elements
  • Home pages
  • Menus and subsites
  • Resource lists, "other related sites" pages
  • Site guides
  • "What's new?" pages
  • Search features
  • Contact information and user feedback
  • Bibliographies and appendixes
  • FAQ pages
  • Custom server error pages
• Internet versus intranet design
  • Design standards
• References

• Visual hierarchy
• Consistency
• Page dimensions
• Page length
• Design grids for Web pages
• Page headers and footers
• Page layout
  • Layout tables
  • Fixed versus flexible
  • Other uses for tables
• Frames
• General design considerations
• Cross-platform issues
• Accessibility
• References

• Characteristics of type on the Web
• Content structure and visual logic
  • Cascading style sheets
• Legibility
  • Alignment
  • Line length
  • White space
  • Typefaces
  • Type size
  • Case
  • Emphasis
• Consistency
• Cross-platform issues
• Accessibility
• Type graphics
• References

• Organizing your prose
• Online style
• Titles and subtitles
• Links
• References

• Characteristics of Web graphics
  • Color displays
  • "Browser-safe" colors
  • Dithering
  • Screen resolution
  • Gamma
  • Graphics and network bandwidth
• Graphic file formats
  • GIF files
  • JPEG graphics
  • PNG graphics
  • Imaging strategies
  • Summary: File formats
• Images on the screen
  • The screen versus printed color artwork
  • Complex illustrations or photographs
  • Diagrams for the computer screen
• HTML and graphics
• Accessibility
• References

• Applications for multimedia
• Web multimedia strategies
  • Audio only
  • Slide shows
  • Video
  • Animation
• Preparing multimedia
  • Processing
  • Delivery
• Design and multimedia
• Accessibility
• References

This JavaScript Tutorial is aimed at beginners to help them understand how old and outdated JavaScript techniques can cause issues on a web page. The tutorials proceeds by analyzing the source code of a web page that was written several years ago using concepts that were ok good to use then, but in the current Web will render inaccessible or broken pages in a browser.

Three dynamic elements using JavaScript are reviewed and explained from the point of view when they were originally developed, and then a more current method of re-writing them is demonstrated making them more hardened and less error-prone in regards to DOM scripting. The tutorial starts with providing some understanding about what DHTML and the DOM are. The example web site containing the JavaScript code examples are available for download as a zip file.

From DHTML to DOM Scripting - How to replace outdated javascript techniques

Download PDF version (202KB)


Table of Contents

• Preface
• What is DHTML and what is DOM scripting?
  • What is the DOM?
• Creating the page in DHTML
  • The goal of DHTML
  • The tabbed navigation in DHTML
  • DHTML issue #1: Script dependence
  • Showing, hiding and tab highlight in DHTML
  • DHTML issue #2: Mixing presentation and functionality
  • The Product Photo in DHTML
  • DHTML issue #3: Assuming functionality without testing for it
  • The Slide Show in DHTML
  • DHTML issue #4: Keeping maintenance JavaScript based
  • DHTML issue #5: Mixing HTML and JavaScript
  • DHTML issue #6: Blaming the user
  • DHTML issue #7: Taking over the document
• Introducing DOM scripting
  • The goal of DOM scripting
  • DOM scripting asset #1: Progressive Enhancement
  • DOM scripting asset #2: Ease of maintenance
  • DOM scripting asset #3: Separation of Presentation and Behaviour
  • DOM scripting asset #4: Separation of Structure and Behaviour
  • DOM scripting asset #5: Using modern event handling
  • DOM scripting asset #6: Avoiding clashes with other scripts
• Re-creating the demo page with DOM scripting
  • The tab navigation in DOM scripting
  • The popup window in DOM scripting
  • The slide show in DOM scripting
  • Fixing for Safari
• Where to now?