11 Modular Websites & Interaction

Posted on by

Week 11
11/8

Programming on the web. Scrips on the server and the client create the modern web experience. 1) Introduction to PHP. Activity: Use PHP includes to make final website modular. 2) JQuery as a way to create dynamic web pages. Activity: Create a dynamic web page using jQuery.

Homework

1) For class: Implement a PHP include for your navigation and a jQuery script into your final website. 2) For final: Finish home page for the final. Read chapters 19 and 20. Due: The following week.

Goal

The goal of this unit is to:

  • Be exposed to programing languages.
  • Understand the benefits of modular web design.
  • Add interactivity to the website.

Outcomes

At the end of this unit, students will have:

  • Used PHP include to create a modular web page.
  • Created interactivity by implement jQuery in a web page.
  • Been left with a general idea of both server side and client programing languages for the web.

Materials

Additional materials for this unit can be found by following these links:

Step-by-Step

20 Review homework and answer questions.
60 Server Side Scripting: Modular Websites with PHP
10 Break
60 Client Side Scripting: Interaction with Javascript and jQuery

Examples

Other Course Examples

Syllabus of the other Web Design Basics section and the syllabus of a design course CORE INTERACTION-think interface. This should give you some perspective on what you have been learning here.

Javascript, JQuery and PHP

Jquery has been the most popular implementation of jQuery. A set of Jquery Tutorials to get you started.

CMS or Content Management System are modular websites, and they are everywhere. The benefits are that content can be accessed and updated by the clients themselves. Once the template is set up, the navigation and look are taken care of. It is possible to acquire templates and modify them for your own usage, or to build them from scratch.

Disadvantages are that the site needs to be maintained and becomes vulnerable to being hacked if you don’t.

This site is a modular site running WordPress. Take a look at the wordpress showcase and see other examples. Other popular CMSs are Joomla and Drupal.

News and External Resources

Resources that will aid in your understanding of HTML and CSS.

  1. Learn To Code Academy
  2. Eloquent JavaScript
  3. Net Magazine’s 25 best books for web designers and developers. Of which the most relevant title for this section is DOM Scripting, which I read a while ago, and it is a designer friendly approach to learning Javascript.
  4. Safari Visual Effects Guide
  5. Opera Developer
  6. Mozilla Developer: CSS Reference and Demos

Definitions

These are the terms that participants should be familiar with during this unit:

PHP

PHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document. It also has evolved to include a command-line interface capability and can be used in standalone graphical applications.[2] PHP can be deployed on most web servers and as a standalone interpreter, on almost every operating system and platform free of charge.[3] There is also commercial software such as RadPHP, a rapid application development framework for the PHP language. A competitor to Microsoft‘s Active Server Pages (ASP) server-side script engine[4] and similar languages, PHP is installed on more than 20 million websites and 1 million web servers.[5]

PHP was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is now produced by The PHP Group and serves as the de facto standard for PHP as there is no formal specification.[6] PHP is free software released under the PHP License which is incompatible with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP.[7]

PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content or dynamic images used on web sites or elsewhere.[34] It can also be used for command-line scripting and client-side GUI applications. PHP can be deployed on most web servers, many operating systems and platforms, and can be used with many relational database management systems (RDBMS). It is available free of charge, and the PHP Group provides the complete source code for users to build, customize and extend for their own use.[3]

PHP acts primarily as a filter,[35] taking input from a file or stream containing text and/or PHP instructions and outputting another stream of data; most commonly the output will be HTML. Since PHP 4, the PHP parser compiles input to produce bytecode for processing by the Zend Engine, giving improved performance over its interpreter predecessor.[36]

Originally designed to create dynamic web pages, PHP now focuses mainly on server-side scripting,[37] and it is similar to other server-side scripting languages that provide dynamic content from a web server to a client, such as Microsoft‘s Asp.net, Sun Microsystems‘ JavaServer Pages,[38] and mod_perl. PHP has also attracted the development of many frameworks that provide building blocks and a design structure to promote rapid application development (RAD). Some of these include CakePHP, Symfony, CodeIgniter, and Zend Framework, offering features similar to other web application frameworks.

On JavaScript

Mastering CSS is akin to building amazing things with Legos. Understanding JavaScript is like manufacturing Legos. Though related, they are simultaneously altogether different.

Javacript

JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented,[6] imperative, and functional[1][7] programming styles.

JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a Web browser in order to provide enhanced user interfaces and dynamic websites. This enables programmatic access to computational objects within a host environment.

JavaScript’s use in applications outside Web pages — for example in PDF documents, site-specific browsers, and desktop widgets — is also significant. Newer and faster JavaScript VMs and frameworks built upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web applications.

JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages.[8]

Javacript Libraries

A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.

Some JavaScript libraries, such as YUI, are classified as frameworks since they exhibit full-stack capabilities and properties not found in general JavaScript libraries.

While JavaScript, as first developed by Netscape (and later Mozilla), has long had a presence on the Web for many websites, it gained a particular pitch with the rise of the Web 2.0 era of computing, in which JavaScript became increasingly used for the development of user interfaces for applications, both web-based and desktop-based. JavaScript was also combined with CSS to create dynamic web pages, which have also become popular as a more efficient and accessible alternative to Flash -based websites.

With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus, JavaScript libraries such as Prototype, script.aculo.us, Ext Core, MooTools and jQuery and JavaScript widget libraries such as Ext JS and Dojo Toolkit were developed, allowing for developers to concentrate more upon more distinctive applications of AJAX. This has led to other companies and groups, such as Microsoft and Yahoo! developing their own JavaScript-based user interface libraries, which find their way into the web applications developed by these companies.

Almost all JavaScript libraries are released under either a copycenter or copyleft license to ensure license-free distribution, usage, and modification.

jQuery

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.[1] It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.[2][3]

jQuery is free, open source software, dual-licensed under the MIT License or the GNU General Public License, Version 2.[4] jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery framework allows the creation of powerful and dynamic web pages and web applications.

Leave a Reply