JavaScript Workshop » Video tutorials

Print Style Sheets – Video Tutorials

Frank Stepanski — Mon, 24 Sep 2007 22:46:18 +0000

All modern browsers support the most common media attributes, which are supplied within the link element to target specific style sheets in a specific situation. For example, to ensure only visitors viewing the web site on a monitor, you add media = “screen” to the link element to call your default style sheet. Underneath that a second link element can be used with media = “print” added to call a print style sheet with only basic styling, such as black text on a plain white background, and all graphics removed.

="stylesheet" media="print" type="text/css">

If a style sheet has a media type of “screen”, it will not be used when the page is printed. If no media type is specified, the style sheet would influence the printed results.

note: Any style sheet intended only for printing purposes must be given the print media type to prevent it be from implemented on screen. Nobody wants to print an article written in white text on a solid black or extravagant rainbow background.

Here are some videos (.zip) narrated by CSS guru Eric Meyer on setting up a print style sheet:

Print style overview
Creating a basic style
Hiding graphic content
Improving the look
Modifying sub content
Adding a footer

ASP.NET Behind the Scenes – Video Tutorials

Frank Stepanski — Sun, 20 May 2007 22:29:05 +0000

If you are using my online ASP.NET Workshop to learn the basics of creating web applications using ASP.NET, one of the lessons that often gets overlooked by the novice (including me) is how does the ASP.NET architecture work behind the scenes. Although learning this may seem a bit too technical or unnecessary since all you want to do is create some dynamic web pages, it is worth taking a brief look at least at these informative videos.

ASP.NET is a complicated architecture compared to other server-side technologies and knowing a little bit more of what happens “behind-the-scenes” will definitely help you when you start creating more intricate and complicated web applications.

Check out these videos (.zip) to learn more.

Architecture Overview
Request Pipeline Processing
Page Compilation, Control Tree and Rendering
Page Lifecycle
Application Lifecycle
Compilation Model

CSS Float – Video Tutorials

Frank Stepanski — Tue, 13 Feb 2007 05:33:55 +0000

I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I’m sure others as well) are floats.

When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it’s then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.

Here are some videos (.zip) narrated by Andy Clarke and Molly Holzchlag that will teach you the basics of floats.

Floating columns
Floating elements
Clearing floats
Floated web layout

Here are some really good articles (.pdf) on different aspects of floats as well:

Floating Theory Floating Images within Text Clearing Floats Float Tricks

LearnFlash.com Video Podcasts

Frank Stepanski — Sat, 27 Jan 2007 12:14:25 +0000

Learning Flash by watching videos is a very efficient way to learn specific techniques without going through books or online tutorials. As I mentioned in a previous post about online learning, there are many website that offer video tutorials on different web technologies including Flash.

LearnFlash.com is one of them and they offer one of the largest selections of Flash video tutorials.

What they also have is a monthly video podcast which highlights some tips and tricks from their vast library of Flash videos. Here are some of the videos (.zip) that I have collected that would be of use to the beginner Flash user.

These videos can be used with any version of Flash, but are presented in either Flash MX2004 or Flash 8.

Text Animations using Motion Tweens
Movie Clip vs. Graphic Symbol
Use a Movie Clip as a Button
Applying ActionScript to a Button
JavaScript Popup Windows
Creating a Simple Photo Slideshow
Animated Rotation with Tweens and ActionScript
Using the Tween Class to Create Animations
Looping MovieClip via ActionScript
Scroll Text using Components
Image Mask PreLoader

CSS Basics 101 – Video Tutorials

Frank Stepanski — Thu, 04 Jan 2007 02:55:43 +0000

If you want to build modern web sites, you need to know about Cascading Style Sheets (CSS). CSS gives you the power to style and lay out web sites so they are usable, compact, good looking, well structured, and easy to maintain.

The basic purpose of CSS is to allow the designer to define style declarations, and to apply those styles to selected portions of HTML pages using selectors which are references to an element or grop of elements to which the style is applied.

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces.

To get a jump start on learning the basics of CSS check out these video tutorials (.zip):

Selectors
Advanced Selectors
Text Properties pt.1
Text Properties pt.2
Inheritance
The Cascade

MySQL and phpMyAdmin Tutorial Videos

Frank Stepanski — Tue, 07 Feb 2006 18:09:21 +0000

Once you learn the basics of PHP, you will want to know how to interact with a database and update its data from a web page. MySQL is the most obvious and recommended choice using PHP and is fairly easy to setup.

You can use phpMyAdmin to easiy setup your MySQL database, tables and perform any necessary SQL statements.

Here are some videos (.zip) to get you started:

MySQL Overview
MySQL Basics
SQL Statements with MySQL
Using PHPMyAdmin
PHP and SQL
PHP and SQL cont.

Here is a great article (.pdf) reviewing most of what is covered in the videos as well written by Gareth Downes-Powell.

PHP Basics – Video Tutorials

Frank Stepanski — Sun, 30 Oct 2005 19:56:19 +0000

Only recently have I started to learn PHP and am starting to realize what all the fuss is about. PHP has been around for 10 years and has gained steady increasing popularity.

It is fast, fairly easy to learn, integrates with many database systems (MySQL, SQL Server, ORACLE), used on all major operating systems, and is open source which means there are many add-on components to use (i.e. PEAR) that extend its functionality. It costs nothing to download and all you need is a web server, whether it be open-source (Apache) or Internet Information Server.

Video Tutorials:

Your First Script
Variables
Strings
String Functions
Numbers
Arrays
Conditional Statement: IF Else
Conditional Statement: Switch
User-Defined Functions: Creating
User-Defined Functions: Using
User-Defined Functions: Return Values
Global Variables and Functions
For Loops
While Loops

Here are also some great articles (.pdf) written by Gareth Downes-Powell covering the same and some new topics:

Basics
Arrays
String Functions
Conditional Statements
Functions
Working with Forms