Intro to Web Concepts – How does the web work? – Terms: Client Side

Terms

• WYSIWYG - Dreamweaver is the most common example

Terms

• IDE - Visual Studio, Eclipse, Xcode
• CMS - (Web CMS) Wordpress, Drupal. (Enterprise-level) Interwoven
• Open source - Perl, Python, PHP, jQuery. Mention derivative works also being open source.

• API - like the "drive thru" version of interfacing with a service

• Cloud - your Google Drive, for example

Parsing languages & media

Not languages

• Libraries are collections of programming shortcuts for a language
  • jQuery, Prototype, & Mootools
• Frameworks may include libraries, software, and more. Basically, a collection of assets/tools that helps you work in a particular language, usually from scratch
  • Rails, Cake
• A specification is a set of currently acceptable rules for a given language
  • HTML5 expands on the HTML4 spec and deprecates some older HTML syntax

Not languages

• AJAX is none of these, but is a technique combining multiple languages to return results from the server without needing to refresh a page. It stands for Asynchronous JavaScript And XML.

User Experience & Information Architecture

A user-friendly, well-architected site will:

• Deepen engagement
• Increase conversion
• Raise satisfaction
• Bring users back

Sitemaps & decision trees

• Both important to UX/IA
• Sitemaps show the organization of pages and assets for a site
• Decision trees help predict how the user will move through the site or utilize interactive tools/forms

What languages to use

That depends...

• HTML and CSS will almost certainly be used
• JavaScript may be used for interactivity
• Server-side languages will likely be used for any data storage or retrieval

Demo: How'd they do that?

• Show how to use browser inspection
• Show how to dissect a couple small interesting components
• Obviously, swap these out for whatever examples work for you

Server-side languages: What are the differences?

• The main difference is syntax
  • the set of rules that define the combinations of symbols that are considered to be correctly structured programs in that language
• They have slightly different strengths and philosophies
• Which you choose to use will depend on
  • What you are familiar with or want to learn
  • What your host supports
  • Community and documentation

Hello world

PHP

                            
    echo "Hello, world!";
                            
                        

Java

                            
    class HelloWorld {
      static public void main( String args[] ) {
        System.out.println( "Hello World!" );
      }
    }
                            
                        

Hello world

Python

                            
    'Hello, world!'
                            
                        

Ruby

                            
    puts 'Hello, world!'
                            
                        

Hello world

JavaScript

Not server-side, but just for example

                            
    document.writeln('Hello, World!');
                            
                        

Tools of the trade

To build your web site, you will probably need:

• A simple text editor or code editor such as SublimeText, Notepad, or TextWrangler to write your code. Many can be found for free.
• A web browser such as Chrome, Firefox, or Safari to test your code. All popular modern browsers are free.

Tools of the trade

You will also need:

• An FTP (file transfer protocol) client such as WinSCP, Cyberduck, or CoffeeCup FTP to get files from your computer to the server. Many are free.
• Optionally, an image editor such as IrfanView, Gimp, or Photoshop to edit images which will be used on the web site. Some are available for free.