Homework for the Final
Homework for the Unit
The canvas element was originally developed by Apple for OSX as a way to encourage easy customization of dashboard widgets. It utilized Apple’s HTML rendering engine called webkit to create 2D graphics at around the same time as the WHATWG (Web Hypertext Application Technology Working Group) came together to create what would become HTML5. Apple, of course, played a central role in the creation of HTML5, and the technology was adopted by other the browser vendors.
Canvas is a drawable region that uses Javascript drawing functions to create dynamically generated graphics. This is what other drawing programs do. Illustrator draws vectors using postscript to create pictures, Canvas uses javascript. A difference is that the vectors are always rasterized at screen resolution in canvas, meaning that they are turned into a bitmap.
You first have to create the canvas element, and you do that in the body of the document:
<canvas id="canvas" height="250" width="300"> <p>Use a browser that supports the canvas element </canvas>
The canvas element needs to be initialized in the Javascript, which appears between the <script type="application/javascript"> and </script> tags, and that is usually done in the head of the document:
The actual instructions are written right after the canvas element has been initialized. The following examples show the instructions that draw a square and a circle.
You draw on the canvas by coding the exacting steps the computer requires to draw these shapes. There is only one shape it supports natively, and that is a square. All other shapes have to be drawn path by path. Luckily, there are drawing functions that make it possible to create complex shapes.
If we take a red square as an example, you first specify the fill style and then fill the rectangle based on the given coordinates. Click the draw button and you will see this red square appear in the canvas window. If you change the values, the square will change.
var canvas=document.getElementById('theCanvas');
var context=canvas.getContext('2d');
//code for the square
context.fillStyle = "rgb(255,0,0)";
context.fillRect(50, 50, 50, 50);
Paths require a few more steps. You have open and close a path using the following code: beginPath() , and closePath(), though the shape automatically closes when you stroke() or fill() the path. In that case, the closing of the path can be skipped. There are path methods that draw lines, arcs, bezier and quadratic curves.
The following circle has all of its steps annotated, so show exactly how many steps it takes to create a red circle with a white fill that has a shadow, the letter P and a stroke to create a no parking sign. Copy the code and replace the code for the square in the Javascript Code View, click Draw It if you haven’t already done so, and you can play with the code, add to it, subtract, to see how it works. If you get excited, I have included many more definitions below that you can use to draw simple shapes.
context.beginPath(); //Begin drawing path
context.strokeStyle="#f00"; // sets stroke color
context.fillStyle="#fff"; //sets fill color
context.arc(175,120,100,0,Math.PI*2, true); // draws circle
context.lineWidth=40; // sets width of stroke
context.shadowOffsetX="3" // adds shadow offset x
context.shadowOffsetY="3" // adds shadow offset y
context.shadowBlur="7" // adds shadow blur
context.shadowColor="#888"// sets shadow color
context.stroke(); // draws stroked circle
//remove shadow from inside of circle
context.shadowOffsetX="0" // removes offset x
context.shadowOffsetY="0" // removes offset y
context.shadowBlur="0" // removes blur
context.fill(); // draws fill
context.closePath; // closes path
context.beginPath(); // draws P
context.lineWidth=15; // width of line
context.strokeStyle="#000"; // color of stroke
context.fillStyle="#000"; // color of fill
context.font="9em sans-serif"; // size of font
context.strokeText("P",120,190); // text stroke
context.fillText("P",120,190); // text fill
context.closePath; // but closes path
context.beginPath(); // draws Slash
context.strokeStyle="#f00"; // sets stroke color
context.moveTo(100,50); // begin vector
context.lineTo(240,210); // end vector
context.lineWidth=25; // width of line
context.stroke(); // draw stroke
context.closePath; // not necessary but closes path
You can copy these definitions and paste them into the editor to create a shape. Check out the example shapes to see what definitions are required.
Styles
set the fillStyle
context.fillStyle="color"
set the strokeStyle
context.strokeStyle="color"
line widths
context.lineWidth=number
line join styles
context.lineJoin="style" (bevel, round, miter)
line end styles
context.lineCap="style" (butt, round, square)
Rectangles
draw a rectangle
context.strokeRect(left, top, width, height)
fill a rectangle
context.fillRect(left, top, width, height)
erase a rectangle
context.clearRect(left, top, width, height)
paths
begin a path
context.beginPath
complete a path
context.closePath
move the pen to a location
context.moveTo(horizontal, vertical)
draw a straight line from current pen location to a new location
context.lineTo(horizontal, vertical)
stroke the current path
context.Stroke()
fill the current path
context.fill()
Text
set the font
context.font="bold italic size font-family"
set the alignment
context.textAlign="left right center"
fill some text
context.fillText("string to fill", top, left)
stroke some text
context.strokeText("string to stroke", top, left)
Shadows
shadow color
context.shadowColor="color"
shadow horizontal offset
context.shadowOffsetX=number
shadow vertical offset
context.shadowOffsetY=number
shadow blur
context.shadowBlur=number
taken from Westciv
More code examples to paste into the Javascript Code View.
context.beginPath(); context.arc(75,75,50,0,Math.PI*2,true); // Outer circle context.moveTo(110,75); context.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) context.moveTo(65,65); context.arc(60,65,5,0,Math.PI*2,true); // Left eye context.moveTo(95,65); context.arc(90,65,5,0,Math.PI*2,true); // Right eye context.stroke();
context.beginPath(); // Triangle
context.strokeStyle="#000";
context.fillStyle="#ff0";
context.moveTo(70,20);
context.lineTo(137,120);
context.lineTo(3,120);
context.lineTo(70,20);
context.lineWidth=3;
context.stroke();
context.fill();
context.closePath;
context.beginPath(); // !
context.fillStyle="#000";
context.font="5em sans-serif";
context.fillText("!", 58,108);
context.closePath;
See if you can draw this figure using the shapes similar to the ones already drawn in the demo, or draw your own shapes. You can copy and paste the definitions, just make sure you initiate the object, give it properties, draw it and then create it, and if this seems laborious, be glad you are not a computer, who does nothing but this type of routines.
Better yet, watch someone else create a canvas based on processing, a sister visual programing language developed to teach visually oriented people programming, right before your eyes, using popcorn.
Drawing these primitive shapes by hand is really only for the purpose of understanding how canvas works. In its raw form it will never be a drawing tool for design students.
But that can change if someone were to write drawing software that could be translated to the canvas element. This is exactly what Mike Swanson has done. He created an Adobe Illustrator to HTML5 Canvas plugin. [Unfortunately, the plugin has not been updated, and it did not load the last time I tried it with Illustrator CC. Still, this is a good learning opportunity for you to understand how canvas works.]
This is an Illustrator plug-in that transforms Illustrator art into canvas art, allowing you use Illustrator as a front end to draw with, and the plugin will render it into Javascript code equivalent that can be rendered in the canvas element. Check out the Yellowstone Map as an example, and if you go to the website, you will see that the plugin is able to create motion graphics as well. We do not have the ability to install Illustrator plug-ins in the school’s computers, but please try this on your computer, as Illustrator is a very good front end to drawing directly on the canvas. If you follow his tutorial, you can even animate!
So here is an example of Illustrator art I created turned into Javascript. It takes only 5700 lines of code! To put that into perspective, the Illustrator file requires about the same number of lines using postscript to create the picture. Here is a text version of the Illustrator file, and the html source so you can see that there are an equal number of instructions.
Advanced examples using the canvas element from the web:
Step by step explanation of how to create your own game using javascript and canvas.
HTML5 audio and video provide native playback of both audio and video by the web browsers themselves.
Audio and video playback was previously handled through proprietary plug-ins, originally Quicktime, RealPlayer and Microsoft’s Media player, but then Sorenson, who created the CODEC (from COmpression/DECompression) Apple was using for Quicktime, created a similar CODEC for MicroMedia’s Flash, propelling this ubiquitous plugin to become the preferred software for delivering video streaming.
Apple did not like that (it sued Sorenson to try and stop this from happening), as Flash killed Apple’s Quicktime and all the others video players (Real Player and Microsoft Media Player).
Flash became the default delivery system for video on the web. Adobe purchased MicroMedia for 3.5 billion in 2005, and inherited Apple’s wrath. This point should not be lost in the current debate between Flash and HTML5 video, which has been forced by the iPhone not playing Flash.
That battle appears to have been won by Apple. Flash is no longer considered ubiquitous. HTML5 video has taken over from Flash and its use in ads is no longer what it once was. Flash has been implemented on Android, but its performance is spotty, introduces vulnerabilities and eats up precious resources at the time of this writing. Flash is not dead, and its still good at what it does on the desktop, but its future of this ubiquitous proprietary standard has suffered a major hit.
You can upload your video to Google’s YouTube or Vimeo, and embed it in your page. The tools to do that are provided by these video sharing sites, and the process is painless enough. Include the code to embed into your web page and these services will take care of displaying your video in the right format.
You can even tell both YouTube and Vimeo to display the video using HTML5 on your own browser, and it will do so seamlessly, and as you can see, you can style it on the fly. The media is my son Taiyo and some footage of the 2nd Ave Subway (under construction).
These sites generate the code that you put in your page, and from Youtube, it looks like this:
<iframe width="560" height="349" src="http://www.youtube.com/embed/LpOOh0fU4fk" frameborder="0" allowfullscreen> </iframe>
Standard HTML5 video is responsive by setting width to 100% and placing it in a responsive container. It will automatically fill the right size while keeping the ratio (height and width) the same.
video {
width: 100% !important;
height: auto !important;
}
This does not work for Vimeo or YouTube viddoes, which use the iframe to deliver the content.
Instead, you place absolutely the iframe containing the YouTube and Vimeo video in a parent locked to the video’s ratio using the following HTML and CSS:
<!-- HTML -->
<figure class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe id="youtube_style" width="560" height="349" src="http://www.youtube.com/embed/LpOOh0fU4fk" frameborder="0" allowfullscreen>
</figure>
/*CSS*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
There are times when you need to display video and audio from your own server, and not rely on some other service. You can do that yourself, and it is almost as easy as displaying an image. I say almost as easy, because the issue as to what browsers can display which audio or video format requires that we need to create several version of each to satisfy all of the browsers.
HTML example of an audio with only a mp3 source file and an explanation that is supposed to show up if the browser does not recognize the audio tag:
<audio controls src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3" type="audio/mpeg"> The browser you're using does not recognize the HTML5 audio tag. You can download the song here: <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3"> link</a>.</audio>
What actually happens in Firefox is that the HTML 5 property is recognized, but the proprietary CODEC is not recognized. This means that you do not get the option to download the music, but see this instead:
The mp3 audio file format is proprietary. For that reason, not all browsers support mp3 audio files. Only Safari and IE9 play this audio format. Opera or Firefox users are not able to play the mp3 format. Implementing this would require them to pay royalties. They do support the royalty free ogg format, so we need to approach this another way.
I need to create an ogg file from the mp3 file, and serve up both files, and the browser will pick whatever one they can play. Since I have an mp3 file, I need to create the ogg or ogv file. Translating the audio file from mp3 to the ogg format can be done using Miro Video Converter, or if you want more control, Handbrake. With Miro Video Converser, drag the file to the conversion window, select Theora from the drop down menu and convert. It will create a theora.ogv file that works just fine in Firefox and Opera.
Putting both sources in the HTML5 tag allows the browser to choose the one that they can play, and the following code works in Firefox.
<audio controls> You are not able to hear this sound because the browser you are using is not standards compliant. You can download the song from this <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3">link</a>. <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.mp3" type="audio/mpeg"> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/KillingACountry.ogg" type="audio/ogg"> </audio>
Video has the same problems as audio. Some browsers manufacturers pay royalties and can play the H.264 CODEC while others rely on a royalty free CODEC. Just like with audio, Safari and Internet Explorer can display the proprietary formats while Firefox, Opera and Chrome support royalty free formats.
There is movement toward a single open source standard. Google purchased On2 Technologies, the creators of the VP8 video codex, and combined it with Vorbis, an open source audio format, and has been giving it away, meaning that they released the code to the open source community. Google’s WebM Project is still new, and not yet supported by all browsers, but the intention is that WebM replace the proprietary H.264 format that Apple and Microsoft Endorse.
Google has even gotten religious, and stopped supporting the .H264 CODEC in Chrome, claiming it’s only supporting open source software. It hopes to accelerate the adoption of its WebM format.
The industry is entrenched, however, and to become ubiquitous the CODEC has to be supported by all kinds of playback devices, like phones and computer chips, so do not expect major changes any time soon, even if the future belongs to open source.
Microsoft makes a pug-in for Chrome users to play the proprietary CODEC. So there you have it, the messy world of building a brave new future.
What this all means is that you have to translate your video into several different formats if you want to serve it yourself, just like audio, and include source links to each of them. The browser will then play whichever one it is most attracted to.
There are plenty of ways to get the .h64 CODEC, but to translate to ogg requires
I need to create an ogg file from the mp3 file, and serve up both files, and the browser will pick whatever one they can play. Since I have an mp3 file, I need to create the ogg file. Translating the audio file from mp3 to the ogg format can be done using Miro Video Converter, or if you want more control, Handbrake.
Here is example code for inserting video into the browser, using both ogg and H264 CODECs:
<video width=480 height=270 controls> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.ogg" type=video/ogg> <source src="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.mp4" type=video/mp4> Download the example video in <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.ogg">oog</a>, or <a href="http://b.parsons.edu/~dejongo/12-fall/stuff/10_example.MP4">mp4</a> format. </video>
Download this video and transcode it, then upload it and get it to play in Firefox.
This is, of course, only the beginning. An example of what’s coming is the use of javascript to make a much more customized player and the ability to initiate actions that control web content from the movie itself, as in popcorn as demonstrated in this canvas sketch demonstration. The possibilities of HTML5 and open source video are endless and belong to the future.
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.
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.
The goal of this unit is to:
At the end of this unit, students will have:
Additional materials for this unit can be found by following these links:
| 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 |
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.
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.
Resources that will aid in your understanding of HTML and CSS.
These are the terms that participants should be familiar with during this unit:
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.
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]
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 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.
Homework for the Final
Homework for the Unit
If HTML is for content and CSS for presentation, than Javascript is for behavior. It really takes mastery of all three to become a web designer. It is, unfortunately, too much for this coures to tackle all three, so we merely touch on Javascript and give you some idea of how it works. If you want to learn more, try Kahn Academy or Codecademy for Javascript or Jquery.
Javascript goes as far back as the origin of the web. You will recall that the web was inspired by Apple’s Hypercard, which had been implemented in a proto-web kind of way in the offices where the web was born. Well, hypercard had a scripting language called Hyperscript that inspired Javascript.
Javascript transforms the content of web pages in much the same way as HyperScript transformed the content of the hypercard stacks. Javascript scripts are executed upon loading or by a user action, and do something to the content of the web page. Much of the added functionality on the web is due to Javascript.
When the browser requests content from the server, the document is fetched or constructed by server side scripting, crosses the HTTP divide, and arrives at the client (the browser). The browser then parses the content, starting with the header, and constructs the document, including the requests for additional resources such as the CSS stylesheet, JavaScript scripts, fonts, and images, and organizes all of it into the web page we are all familiar with. In the case of Ajax, additional material can be requested and received without flushing the existing page, allowing the page to be updated asynchronously.
The browser processes, or parses the information, transforming the tags, attributes, content, etc., into nodes that form a tree according to the document object model, the DOM. See the demonstration.
The browser attempts to heal any errors that come up as the document tree is constructed. Each browser does that in their own way, meaning that the tree structure of the document can be different from one browser to the next. Part of the HTML5 specification is to create a unified way for browsers to handle non-valid documents, making sure that all browsers create the same DOM for any given page.
JavaScript manipulates the properties and the elements in the DOM as soon as the page is loaded, or afterwards, if triggered by the user. Slight variations in how the different browsers handle JavaScript create big problems, which may or may not be the same from browser to browser. You can imagine that it used to be a real pain to program JavaScript.
This pain kept the more integrated Javascript implementations out of general usage, mostly relegating it to simple code snippets for much of its existence. The solution came with the development of cross browser JavaScript Libraries, which provide a simplified unified interface, or framework for implementing Javascript across the various browsers.
There are well over 50 of such open source libraries, of which jQuery is but one. They all simplify the task of creating highly responsive web pages, abstracting away browser specific features that let designers concentrate on design and user interactivity.
Then again, jQuery has won the hearts and minds of the web development community and has become ubiquitous since its release. It is the “write less, do more” library we all know and love.
The browsers have cleaned up their act and support a uniform DOM implementation, these days. While this alone does not make jQuery superfluous, it is possible to make the case to write Javascript instead of jQuery. If you wish to learn Javascript, you can read Eloquent Javascript (pdf) for free on the web.
jQuery is one of the many JavaScript libraries created to ease JavaScript development. John Resig, the person who created the library, originally wanted to call it jSelect but the url was already taken, so it became jQuery. One of the most important things that jQuery does is provide a more uniform and easier to access ability to select DOM elements, removing the problems caused by different Javascript implementations and DOM error resolution.
jQuery is very flexible when it comes to selecting DOM elements with the jQuery function, and it works similar to the way selectors do in CSS.
In the same way that jQuery simplifies selecting DOM elements, it also makes manipulating the node objects much easier. It does not just return the DOM object but wraps each one of them with standard functions that make it really easy to manipulate them. You can show, toggle, hide, animate and otherwise manipulate and attach events to these objects with ease.
From a slideshow by John Resig:
In a nutshell:
Many of jQueries perceived magic happens for designers, since many of its effects are visual whenever it manipulates the document’s HTML or CSS, which it often does. It’s also magic in the way it simplifies AJAX and the utilities jquery has are really useful but that takes us well beyond the scope of this lecture. Since it’s best to learn jQuery’s visual effects through examples, lets do that. I will use the following files in this basic tutorial.
jQuery is a collection of javascript routines stored in a library. You access those routines when using jQuery. You can host this library yourself but its more usual to let Google host it for you.
Download the compressed jQuery library to use on your site. It is one big jumble of words and symbols with everything not necessary for its execution having been removed. You can take a look at the uncompressed jQuery library if you like but unless you know Javascript, it will not make sense.
Save the compressed jQuery library in your “js” script folder with the name “jquery.min.js” and link to it:
<script src="js/jquery.min.js" type="text/javascript">
Or link to it using Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
Both JavaScript and jQuery need to be between <script></script> tags. Though these tags can be placed anywhere in the document, jQuery scripts are usually put in the head of the document using a function that takes care of the issue in Javascript where the code can run before the web page has been loaded, because it looks at the DOM.
Javascript code, on the other hand, is usually placed at the bottom of the document, so that the scripts runs after all the elements in the body have loaded.
If the scripts are used by other web pages on the site, it is common to create an external script.js file, in the same way that you would create a central external style.css file.
<script type='text/javascript' src=js/scripts.js></script>
In the head of the document a standard script tags links to the jQuery library served by Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
This works when your document is on the server but not if you are developing your files locally on your hard disk. In that case, you need to include “http:” in front of the href address that Google left out. It should work fine after that.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Why does Google leave “http:” out? That way the script will work for both http and https (http secure) sites but just know that this doesn’t work when you are developing on your desktop.
You can also download a copy of the “jquery.min.js” file and link to that.
Once you have connected to, or downloaded the jQuery library, you set up the open and closing script tags in which to embed the code:
<script type="text/javascript"> </script>
Next comes the initialization function called the ready event which waits for the document to be ready before it executes the jQuery code. This does not mean that the document and all the linked elements are fully downloaded but only that the DOM is finished, which the browser creates before it starts to parse the web page.
<script type="text/javascript">
$(document).ready(function() {
});
</script>
The ready event starts with the dollar sign $ which stands for the jQuery object. If you want, you can replace the “$” with “jQuery” as I do in button #3 below. They are synonymous. This is where all of jQuery’s functionality is accessed from.
The jQuery object is passed a function that says, “when the document (DOM hierarchy) is loaded and ready to be manipulated, then fire off this function.” The ready event keeps jQuery from prematurely executing before the page DOM has loaded.
The jQuery library does not do anything by itself, it just enables us to do all kinds of stuff. From a designers perspective, it’s a way to capture events from the page, and then to do something, usually with CSS, like assign classes, removing classes, adding CSS to an object, or animating the CSS.
CSS does this in a limited way all by itself. The link element animates when we hover the mouse over it. You can use the hover event in jQuery but you can also use many other kinds of events. It’s able to capture that click or double click and do things other than open a link, as there are over 40 events that it can watch out for. That’s what makes it exciting.
For example, Inside the ready event, a click handler is added:
<script type="text/javascript">
$(document).ready(function() {
$(".jq-1").click(function() {
});
</script>
The click handler selects the object that, when clicked, executes whatever is in its brackets. In this case, it is the effect toggle, which toggles the CSS display value.
<script type="text/javascript">
$(document).ready(function() {
$(".jq-1").click(function() {
$("p").toggle();
});
});
</script>
The files for this basic tutorial.
You will want to put the following code into the header:
<style type="text/css">
section {width: 800px; margin: 0 auto; background: hsla(50,100%,50%,.5); padding: 40px; position: relative; left: 0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li.one").click(function(){
$("h1").toggle();
});
$("li.two").click(function(){
$("article").slideToggle({
});
});
});
</script>
And in the body, have the following code:
<section> <header> <h1>jQuery Tutorial</h1> <nav> <ul> <li class="one"><a href="#">Toggle Header</a></li> <li class="two"><a href="#">Slide Body Copy</a></li> </ul> </nav> </header> <article> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p style="display:none">Except the code itself. </p> </article> <footer></footer> </section>
Functions are a way of reusing code. Much like the external style sheets are all referenced by the different pages. Functions can be called any number of times rather than having to repeat all of that code every time. Writing functions is easy:
function colorMe(){
$("p").css("color","hsla(220,100%,50%,1)");
$("h2").css("color","hsla(20,100%,50%,1)");
}
The empty parentheses signify to not pass it any parameters. We do not need to worry about that here. We need to call the function to use it, which we do as follows:
$("jq-1").click(function() {
colorMe();
});
The jQuery code is ready and watching the buttons to catch a click. When that happens, the corresponding code is executed. You execute the code by clicking the button.
By clicking the first button class="jq-1", all the paragraphs <p> will be toggled from visibility: default; to visibility: hidden; and vice versa, meaning that all paragraphs that are currently hidden will show.
Clicking the second button class="jq-2" toggles the site’s navigation, which is in a div with id="static".
Clicking the third button class="jq-3" will hide this slow, with this being the object being talked about in the click handler, which is the third button. It will not come back until the page is refreshed
Clicking the forth button class="jq-4" changes the CSS color value on a number of different elements. It does this by calling the function colorMe which contains the code that changes the CSS of the elements.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function colorMe(){
$("p").css("color","hsla(220,100%,50%,1)");
$("h2").css("color","hsla(20,100%,50%,1)");
$("pre").css("color","hsla(120,100%,50%,1)");
$("li").css("color","hsla(170,100%,50%,1)");
$("h1").css("color","hsla(270,100%,50%,1)");
$("h3").css("color","hsla(320,100%,50%,1)");
$("#site-description").css("color","hsla(320,100%,50%,1)");
}
$(document).ready(function() {
$(".jq-1").click(function() {
$("p").toggle();
});
$(".jq-2").click(function() {
$("#static").fadeToggle();
});
jQuery(".jq-3").click(function(){
$(this).hide("slow");
});
$(".jq-4").click(function() {
colorMe();
});
});
</script>
You can reset the colors if you want.
Major design decisions can be based on interactive code, like what happens when the code is executed on this page when clicking the buttons above.
jQuery is a powerful way to manipulate your CSS and HTML. From a designers’s point of view, it’s an extension of HTML and CSS, an amazing expansion of what’s possible over using just HTML and CSS alone.
This introduction gives you a taste of what’s possible. It will take some time to redesign your web pages once you have the power of Javascript as harnessed by jQuery under your belt. My guess is that you’ll be egging yourself on to learn jQuery after this course has finished. Linda.com has good tutorials that will help you find your way.
Javascript and jQuery scripts can often by copied, and with a few tweaks, used to add behavior to your website. The follow examples give you a place to start.
Simple Javascript Random Image Slideshow. Copy the script, paste it between the body tag, replace the images and set the delay, to something other than 1 second.
JQuery develops a number of demos and a link to a complete jQuery Image Slider. Be forwarded. There are many default options and you will have to change the parameters to make it look good. The benefit is that this slider is fully documented.
Parallax scrolling is all the rage. This means that a number of elements scroll past at different speeds. The Nike website made this famous, and here is a tutorial of how to accomplish that. It is a great tutorial on GitHubwith source code.
If you find code you like but someone has compressed their Javascript into an unreadable form, you can use beautifier to made the code readable.
Most people are attracted seeing their webpages scroll to a location on the page, which has led to a revolution in single page designs rather than multipage designs. A very simple solution is arbitrary anchor.
A much fancier single page website template is created by Peter Finlan. Another flavor is synthethica. While it is tempting to use these ready made templates as a starting point, try to understand how jQuery (and the many other technologies) are implemented so you can do something on your own instead.
Everyone asks for an image slider. This one is simple. Download demo
#gallery {width: 601px; margin: 0 auto;}
#gallery li {display: inline; margin-right: 3px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
or if on the desktop:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('![]()
')[0].src = this;
});
}
<div id="gallery"> <img src="gallery/img_1.jpg" alt="" id="main-img" /> <ul> <li><img src="gallery/thumb/img_1.jpg" alt="" /> <li><img src="gallery/thumb/img_2.jpg" alt="" /> <li><img src="gallery/thumb/img_3.jpg" alt="" /> <li><img src="gallery/thumb/img_4.jpg" alt="" /> <li><img src="gallery/thumb/img_5.jpg" alt="" /> <li><img src="gallery/thumb/img_6.jpg" alt="" /> <li><img src="gallery/thumb/img_7.jpg" alt="" /> <li><img src="gallery/thumb/img_8.jpg" alt="" /> <li><img src="gallery/thumb/img_9.jpg" alt="" /> <li><img src="gallery/thumb/img_10.jpg" alt="" /> </div>
Now that the browsers have cleaned up their act, it is possible to skip the need for jQuery and do everything in Javascript. You can try the Wallop Slider. The instructions for a slider are a little more complex but it does not use the jQuery library.
The next frontier would be to develop your web site interactivity using Javascript and jQuery but it is more important that you create good websites first. Javascript requires that the website you build is well designed. That is the focus of this class, so there is no Javascript or jQuery requirement for the final.
Want to know more about javascript? Try the WesBos Javascript for Designers and make sure you get the student discount. Here is beginner’s Essential Javascript Cheat Sheet and PDF version for those who know just enough JavaScript to get them into trouble.
If you want to learn more about jQuery?, do so but you are on your own. There are advanced courses that address programming. You can also look up videos on Linda.com or explore the web.
That should not stop anyone, however, from trying it out, once you have developed some solid HTML and CSS skills, and have a working website. So here are some code snippet that can help you create well designed web sites, as Aditi Timbadia demonstrates (she implements side navigation).
Tabs
Dropdowns
Accordions
Hover tabs
Convert Weights
Animated Buttons
Side Navigation
Top Navigation
Navbar hides when scrolling
Navbar shrinks when scrolling
Sticky Navbar
Mobile Navbar
Parallax
HTML Includes
Google Maps
Tooltips
Slideshow
Filter List
Sort List
PHP was originally an abbreviation for “personal home pages” but has since been changed to “hypertext pre-processor.”
PHP is the centerpiece of website development, with over 70% of all websites using it (2022) as the server-side scripting language. Making it possible to build dynamic, database-driven websites and web applications, PHP is used by WordPress and a large number of other content management systems.
PHP is similar to a lot of other programing languages. What sets it apart is its seamless integration into HTML. The name PHP is a recursive acronym for PHP: Hypertext Preprocessor. That tells you that PHP, which resides on the server, creates HTML files from PHP scripts on the fly.
As an end user, all you see are HTML pages. PHP does its work behind the scenes on the server from which you request the page. This is different from Javascript, which is executed by the browser on the page as it is served. PHP constructs the page before javascript can act on it.
What we will do in this section, after briefly talking about some details of how PHP works, is show how PHP modularizes web development. If you want to learn more, check out codecademy
One way to think about a web site is as a collection of pages, which is what we have done up to now. CSS helps us reduce redundancy by centralizing the instructions of what each page is to look like. A centralized style sheet saves us a lot of time. PHP allows us to do the same for the different parts of the marked up content that stays the same from page to page.
A web page is composed up of modules that remain consistent throughout the site, like the header, navigation, asides, footer, etc. PHP allows us to separate these modules out as centralized external files. That means creating modules like footer, header and navigation, and useing PHP to stitch them together and serve them up as finished HTML pages.
PHP resides on the server. Everything is done from the server. It runs the PHP that executes the PHP scripts that we will write.
Change the file extension of the file from .html to .php to make PHP work. To execute the PHP scripts, you need to be running the PHP interpreter. The server already runs a PHP interpreter. So you will put the files on the server to execute them.
Open up a blank Editor file and write:
<!DOCTYPE html> <?php echo "Hello World!"; ?>
This is a legitimate HTML5 document if you recall that the html, head, title and body tags are optional.
Save the file on the server, and when you open it in your browser, you will see “Hello World!” in the upper left hand corner.
You have just executed a PHP script and created an HTML page. If you look at the code, all the PHP will have disappeared. Only the HTML is left.
A few things to note about the PHP script. First, the statement starts with <?php and ends with ?>. That is how you format the PHP code, which is written between these brackets.
The statement ends in a semicolon, just like CSS statements do. That signifies to the PHP processor that the statement is complete.
Content text is called a string, and is always surrounded by quotes while working within the PHP tags, just like attribute values are in quotes inside the HTML tag. Because we are writing code, and content is something that the code works on. As there is a conflict in the way that regular writing uses certain characters, like space and return for example, and for that reason needs to be differentiated from the code.
HTML is the other way around, where all of the code is separated from the content by tags, because it’s really about the content, while a coding language like PHP is really about the code.
The last thing you see is the word echo. This is a language construct, and it is what makes PHP Hypertext friendly. It tells the PHP processor to print the HTML to the screen. Use echo to turn PHP code into HTML.
No one likes to do anything twice, and programing languages are full of ways to optimize the code. One of the most fundamental and well known tenets of software engineering is theDRY rule – don’t repeat yourself.
Just as CSS centralizes the instructions for how the web page looks, and PHP modularizes the HTML web site into a number of components, programing languages create variables and give them names to optimize the code. This is how to write the last statement using a variable:
<!DOCTYPE html> <?php $myString = "Hello! "; echo $myString; echo "I'm a PHP script!"; ?>
The dollar sign $ signifies that myString is a variable, and the equal sign = assigns it to the text “Hello”. When this variable is echoed, it writes out “Hello”. The savings in this example are not exactly spectacular but you get the idea. It saves programers from having to write and update the same code over and over again.
Another way that programming optimizes is to give names to common routines that it has to perform. These are called functions. Functions are more than just a name, because they often act on information, as in this simple example.
<!DOCTYPE html>
<?php
function myGreeting($Name){
echo "Hello there ". $Name . "!<br />";
}
myGreeting("Jane Doe");
myGreeting("John Doe");
myGreeting("Barbie");
myGreeting("Ken");
myGreeting("America");
echo "How Are You?";
?>
The computer runs down the page just as in HTML. When it gets to myGreeting, it takes the value in the parentheses and passes it to the variable “$name.” The function then operates on that variable, in this case concatenating “hello there ” with the name, an exclamation mark and a line-break element. These three things are concatenated, or brought together, by the period. The entire result is then printed, and the computer goes to the next line and repeats the entire procedure over again, till the end, where echo tells it to print “How are You?”
Computers control the flow of electrons in circuits that are either on or off. Controlling this flow gives rise to how a computer works, and how computer languages work. We say that a program is running, because even if it does nothing on the screen, the flow is cycling, waiting for something to trigger a change in the flow.
Operators manipulate this flow, using simple logic and math in creative ways. Basic logic structures the flow and determines how the result is to be assigned; if this is equal to that or this and that. There are boolean operators that signify the outcome of the flow as true or false, causal statements, that say if condition is met, do that, or else it redirects the flow in another direction, and lots of mathematical operators that go way beyond addition and subtraction.
PHP’s use is primarily connected up with databases that store the snippets of content that PHP can pre-process into HTML pages. To do that it spends a lot of the time talking to databases and requesting and looping through the content to organize it into HTML pages. We are not going to go any further into the PHP language itself but know that many of the larger sites use this or some other kind of server side scripting.
You only learn something if it is truly useful. In that way, PHP provides a very powerful function to modularize the website with a bare minimum of code:
<?php include(); ?>
Insert an HTML file name and it’s location in the brackets and the file’s content is inserted at that point.
This allows you to create often used HTML snippets only once, like the header, footer, menu and so on. Think of it as an external style sheet for HTML code.
Create common HTML like a menu file that you want all your web pages to include. When adding new pages to your site, for example, instead of having to update the links on every web page, you simply update the include file.
To create a common menu file that all our pages will use, save a blank file as “header.html” in the same directory as the index.html and paste in the header element as it exists on your website. To include the header in every page, replace the header element with the following code:
<?php include("header.php"); ?>
That’s it. When a browser makes a request for a page, it will include the code from the header.html file. You can do this with the navigation, the footer, and any other part of your web site whose content remains the same throughout the web site.
I’ve prepared an example to demonstrate that.
The one tricky thing is to give a user feedback on the page they are on. This is accomplished by adding both an id to each page and a unique class to each menu, and to write a css rule that, when they coincide, lights up the menu to highlight the current page.
Visitors do not see the PHP code. All the PHP is processed out. What remains is HTML, as if it had been written as one HTML document. Download the code
Forms rely on a PHP scripts. WordPress is created using PHP. There is a lot to server side scripting.
Sample code for the PHP example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modular Web Sites</title>
<link rel="stylesheet" href="style.css" media="all">
</head>
<body id="modular">
<div id="wrapper">
<?php include_once("header.php"); ?>
<section>
<?php include_once("navigation.php"); ?>
<article>
<h2>Modular Web Development</h2>
<p>One way to think about a web site is as a collection of pages, which is what we have done up to now. CSS helps us reduce redundancy by centralizing the instructions of what each page is to look like. A centralized style sheet saves us a lot of time. PHP allows us to do the same for the different parts of the web site that stay the same from page to page.
<p>A web page is composed up of modules that remain pretty consistent throughout the site, like the header, navigation, asides, footer, etc. PHP allows us to separate these modules out as centralized external files. That means we will be creating modules like footer, header and navigation, and then use PHP to put them all together and serve them up as finished HTML pages.
</article>
</section>
<?php include_once("footer.php"); ?>
</div>
</body>
</html>
<nav> <ul> <li><a class="whatIs" href="whatIs.php">What Is PHP?</a></li> <li><a class="modular" href="modular.php">Modular Pages</a></li> <li><a class="basics" href="basics.php">PHP Basics</a></li> <li><ul> <li><a class="page" href="page.php">Writing PHP</a></li> <li><a class="variables" href="variables.php">Variables</a></li> <li><a class="functions" href="functions.php">Functions</a></li> <li><a class="operators" href="operators.php">Operators</a></li> </ul></li> <li><a class="includes" href="include.php">Includes</a></li> <li><a class="more" href="more.php">More</a> <li><a class="example" href="example.php">Example Code</a></li> </ul> </nav>
<header> <h1>Modular Websites using PHP</h1> </header>
<footer> <a href="">Web Design 1</a>, Parsons, the New School of Design. Additional resources can be found at <a href="http://PHP.net/">PHP.net</a>, with tutorials and the manual at an <a href="http://PHP.net/manual/en/intro.pdo.php">Introduction to PHP</a>. </footer>
See the note that explains the special treatment for the navigation page highlight below.
/*structure*/
body{
background: #aaa;
}
#wrapper {
width: 650px;
margin: 40px auto;
}
header {
height: 75px;
background-color: #eee;
padding: 30px 30px 0px 30px;
border-bottom: 4px double #aaa;
}
section {
background: #ccc;
}
article {
background: #eee;
padding: .5em 1em 1em;
margin-left: 210px;
width: 380px;
line-height: 1.3em;
min-height: 420px;
}
footer {
border-top: 1px solid #aaa;
background-color: #eee;
padding: 30px;
}
/*Navigation*/
nav {
width: 160px;
padding: 20px;
float: left;
background-color: #eee;
}
nav ul {
padding-left: 20px;
}
nav ul li {
list-style: none;
padding: 2px 0 2px 0px;
}
/* Notice
All the page ids are paired up with their unique menu item. That way the link on each page light up, so you know which page you are on
*/
body#whatIs a.whatIs,
body#modular nav ul li a.modular,
body#basics nav ul li a.basics,
body#page nav ul li a.page,
body#variables nav ul li a.variables,
body#functions nav ul li a.functions,
body#operators nav ul li a.operators,
body#includes nav ul li a.includes
{
color: black;
background: #fff;
}
nav ul li a{
display: block;
color: #000;
text-align: left;
padding: 10px;
background: #ddd;
border: 1px outset #eee;
text-decoration: none;
}
nav ul li a:hover{
color: black;
background: #aaa;
}
/*style*/
h1 {
font-size: 2em;
font-weight: 700;
}
h2 {
font-size: 1.5em;
margin: 1.4em 0 .6em 0;
font-weight: 700;
}
pre {
background: #eef;
padding: 1em;
margin: 1em;
}
Homework for the Final
Homework for the Unit
CSS3 part 2. More CSS3 properties: 2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties.
Activity: Use these properties in class.
Activity: In-class Workshop.
1) For class: Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework. 2) For final: Finish wireframe and Photoshop Comp for Final. Read chapter 14. Due: The following week.
Additional materials for this unit can be found by following these links (14 pages):
The goal of this unit is to:
At the end of this unit, students will have:
| 20 | Review homework and answer questions. |
| 30 | Demo: 2D Transforms with a quick look at 3D transforms. |
| 30 | Demo: Transitions |
| 30 | Demo: Animation |
| 10 | Break |
| 60 | In-class Workshop & Review. |
Sources of information that will enrich your knowledge about web design and will help you to stay current:
Homework for the Final
Homework for the Unit