Author Archives: onno

Links to Linda.com web design videos

Posted on by
Reply

You need to sign into lynda.com through the newschool portal for these links to work. Please sign on to lynda.com

  • Click on the library button in my newschool.edu.
  • Select databases and search for Lynda.com or go to the L tab and it is the last entry. You will see a link to Lynda.com.
  • Create a profile or enter your name and password if you have not yet done so, or sign in.
  • You can then click on these links, and they will take you to the video tutorial.

468 courses 9/13

release date (newest first)


  • Joomla! 3 Essential Training

    Discover how to use Joomla! to build a website from scratch—all without a single line of code.

    Jen Kramer
    9h 41m
    Beginner
    Captions



  • JavaScript: Events

    Learn to use JavaScript events to respond to clicks, form input, and touch gestures in your web applications.

    Ray Villalobos
    2h 10m
    Intermediate



  • Start with a Theme: Twenty Thirteen

    Learn to set up and configure the new Twenty Thirteen WordPress theme, and get the most of the new post format options.

    Morten Rand-Hendriksen
    32m 25s
    Beginner



  • Creative Quick Tips

    Five-minute workflow improvements for creative pros, covering Photoshop, Illustrator, WordPress, and other tools designers commonly use.

    Justin Seeley
    23m 8s
    Beginner
    Captions



  • WordPress Plugins: SEO

    Drive more visitors to your WordPress site by performing search engine optimization, or SEO, with the help of two powerful plugins.

    Morten Rand-Hendriksen
    1h 14m
    Beginner
    Captions



  • Design the Web: Slice Tool

    Learn to create multiple, optimized web graphics from a single Photoshop or Illustrator file with the powerful and versatile Slice tool.

    Chris Converse
    26m 45s
    Beginner
    Captions



  • Design the Web: Multiple Graphic Sizes

    Leverage Smart Objects, clipping masks, and slices, in Photoshop and make graphics that will look razor sharp on any screen size.

    Chris Converse
    16m 37s
    Beginner
    Captions



  • Up and Running with Shopify

    Find out how to set up an online store with Shopify, the simple, secure solution for selling your physical and digital products.

    Morten Rand-Hendriksen
    2h 50m
    Beginner
    Captions



  • Online Presentations with reveal.js

    Build slideshows that harness the full power of the web with reveal.js.

    Ray Villalobos
    2h 2m
    Intermediate
    Captions



  • WordPress Essential Training

    Shows how to get the most out of the self-hosted version of WordPress 3.x and create feature-rich blogs and websites.

    Morten Rand-Hendriksen
    6h 48m
    Beginner
    Captions



  • Up and Running with Adobe Creative Cloud

    Find out whether Creative Cloud is right for you. Learn about installing and updating the app, working with cloud storage, and using CC on the go.

    Justin Seeley
    1h 5m
    Appropriate for all
    Captions



  • Creating a Responsive HTML Email

    Design a responsive HTML email that will adapt to varying screen sizes and render correctly in over 30 different email clients, including Gmail, Outlook, and Yahoo.

    Chris Converse
    1h 21m
    Beginner
    Captions



  • Design Aesthetics for Web Design

    Learn how to incorporate principles of design such as contrast, unity, and balance in specific ways that improve your website.

    Sue Jenkins
    2h 5m
    Beginner
    Captions



  • Foundations of UX: Prototyping

    Discover prototyping, the tool for quickly and inexpensively exploring multiple iterations of designs and testing their performance.

    James Williamson
    1h 39m
    Beginner
    Captions



  • HTML5 Projects: Advanced To-Do List

    Build a to-do list widget with an editable field so users can easily create tasks and delete them as they are completed, and a drag-and-drop version that allows for quick and easy sorting.

    Joseph Lowery
    45m 50s
    Intermediate
    Captions



  • Installing Apache, MySQL, and PHP

    Describes how to install and configure Apache, MySQL, and PHP, known as the AMP stack, on a local development computer.

    David Gassner
    2h 49m
    Intermediate
    Captions



  • Working with Data on the Web

    Store simple data without a database using web storage solutions like XML, JSON, YAML, and HTML5.

    Joseph Lowery
    2h 21m
    Intermediate
    Captions



  • Up and Running with Azure Mobile Services

    Learn to build a scalable backend with Azure Mobile Services and connect it to an existing app, add user profiles and roles, store data in the cloud, and set up an API service.

    David Isbitski
    2h 17m
    Intermediate
    Captions



  • Muse Essential Training

    Shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Photoshop, InDesign, or Illustrator.

    James Fritz
    6h 1m
    Beginner
    Captions



  • Bootstrap 3: Advanced Web Development

    Generate an interactive website from scratch with Bootstrap.

    Ray Villalobos
    3h 20m
    Intermediate
    Captions



  • Ruby on Rails 3 Essential Training

    Shows how to create full-featured, object-oriented web applications with the latest version of the Ruby on Rails framework.

    Kevin Skoglund
    12h 27m
    Beginner
    Captions



  • Design the Web: Animated Loading GIFs

    Create custom animated GIFs for your websites, mobile applications, and other interactive projects in Photoshop.

    Chris Converse
    26m 10s
    Beginner
    Captions



  • Bootstrap 3: New Features and Migration

    Learn about the new CSS classes, mobile-first approach, and other enhancements in Bootstrap 3.

    Ray Villalobos
    46m 57s
    Intermediate
    Captions



  • Coding Faster with Emmet

    Learn to use Emmet’s abbreviated shortcuts to write full-fledged HTML, XML, CSS, and code faster and more efficiently.

    Ray Villalobos
    53m 12s
    Intermediate
    Captions



  • Foundations of UX: Information Architecture

    Find how your users think about the world, and transition those lessons to your product’s navigation, content classification, and layout.

    Chris Nodder
    1h 57m
    Beginner
    Captions



  • Up and Running with HTML5 Video

    Takes you through the history of video on the web, and shows you how to move forward with HTML5.

    Tom Green
    1h 50m
    Beginner
    Captions



  • Create an Interactive Animated Timeline with jQuery

    Learn to create an engaging, interactive, and animated timeline with HTML and jQuery.

    Chris Converse
    1h 7m
    Intermediate
    Captions



  • Design the Web: Sprite Sheets

    Learn techniques in this Photoshop tutorial to make sprite sheet creation fast and versatile.

    Chris Converse
    20m 49s
    Beginner
    Captions



  • Designing a Portfolio Website with Muse

    Create and publish a complete portfolio website with Adobe Muse—without writing any code.

    Steve Harris
    2h 55m
    Intermediate
    Captions



  • Up and Running with AngularJS

    Extend HTML through the rich JavaScript framework AngularJS.

    Joseph LeBlanc
    1h 9m
    Intermediate
    Captions



  • Start with a Theme: Food Blogs in WordPress

    Learn how to set up a food blog using WordPress and work with two different themes and a plugin that result in three completely different looks.

    Morten Rand-Hendriksen
    1h 24m
    Beginner
    Captions



  • Applied Interaction Design

    A hands-on approach to improving a website’s navigation, screen layout, interactive content, and forms to create a more satisfying user experience.

    David Hogue
    1h 49m
    Beginner
    Captions



  • Video SEO Basics

    Optimize your videos for search engines and convert the traffic to achieve your business goals.

    Ian Lurie
    1h 20m
    Beginner
    Captions



  • HTML5 Projects: Creating a Responsive Presentation

    Use open technologies (HTML5, jQuery, and CSS) to create a slideshow that responds to mobile and desktop layouts, and learn to customize the slideshow to fit your next project.

    Justin Putney
    1h 25m
    Intermediate
    Captions



  • HTML5 Projects: Creating an Advanced Responsive Presentation

    Learn to spiff up your HTML5 slideshows with automatic playback, integrated audio and video, and more.

    Justin Putney
    1h 15m
    Advanced
    Captions



  • CSS: Flexbox First Look

    Explore Flexbox, the Flexible Box Layout model, how it compares to other CSS layout techniques, and why it’s an important part of the evolution of CSS layout.

    James Williamson
    2h 3m
    Beginner
    Captions



  • Up and Running with Flash Professional CC

    Learn the concepts, tools, and techniques you’ll need to create your own animations, web experiences, and mobile applications with Flash CC.

    Anastasia McCune
    3h 56m
    Beginner
    Captions



  • Dreamweaver CC Essential Training

    Find out how to build standards-compliant websites from the ground up with Dreamweaver CC.

    James Williamson
    8h 7m
    Beginner
    Captions



  • JavaScript: Enhancing the DOM

    Learn to modify the DOM (Document Object Model), one of the core components of every HTML page, with JavaScript.

    Ray Villalobos
    2h 3m
    Intermediate
    Captions



  • Blogging for Your Business

    A primer for anyone tasked with starting a blog for a business.

    Morten Rand-Hendriksen
    1h 27m
    Appropriate for all
    Captions



  • Foundations of UX: Usability Testing

    Run your own basic usability study to find out just what your users need from your website, application, or device.

    Chris Nodder
    1h 29m
    Beginner
    Captions



  • HTML5 Projects: Creating Surveys

    Engage your website visitors with a unique 3D survey built with HTML5, CSS, and JavaScript.

    Joseph Lowery
    1h 12m
    Intermediate
    Captions



  • Edge Animate Essential Training

    Discover how to use the complete Edge Animate toolset to lay out and animate motion graphics for your website, mobile devices, digital magazine, iBooks, and more

    Chris Converse
    3h 52m
    Beginner
    Captions



  • Foundations of UX: Content Strategy

    Learn to develop a content strategy to analyze and shape the tone, voice, and visual style for your brand.

    Patrick Nichols
    46m 23s
    Beginner
    Captions



  • jQuery Essential Training

    Teaches how to use jQuery to build web pages that today’s users (and clients) are looking for, from complex animation effects to professional user interface controls.

    Joe Marini
    4h 52m
    Beginner
    Captions



  • HTML5 Projects: Interactive Charts

    Spice up dry data presentations with an interactive, visually engaging bar chart drawn with the HTML5 Canvas element.

    Joseph Lowery
    1h 7m
    Intermediate
    Captions



  • Up and Running with Foundation

    Introduces this web design framework and provides a quick overview of all of the goodies in Foundation.

    Jen Kramer
    3h 7m
    Beginner
    Captions



  • Bootstrap: Adding Interactivity to Your Site

    Add interactive elements like a thumbnail gallery, dropdown menus, or a contact form using Bootstrap and a simple text editor.

    Jen Kramer
    1h 25m
    Beginner
    Captions



  • The Creative Spark: Grant Skinner, Interactive Developer

    Join Grant Skinner at work and at play, designing cutting-edge interactive experiences, games, applications, and frameworks with technologies like HTML5 and Flash.

    Grant Skinner
    31m 35s
    Appropriate for all
    Captions



  • Dreamweaver: Creative Cloud Updates

    Learn what Dreamweaver CC has to offer you, including the new, intuitive CSS Designer pane, a new streamlined interface, updated HTML5 and jQuery integration, and more.

    Paul Trani
    59m 13s
    Intermediate
    Captions



  • Flash Professional: Creative Cloud Updates

    Learn about the interface changes and performance improvements that come with the latest release of Flash Professional CC.

    Anastasia McCune
    1h 11m
    Intermediate
    Captions



  • HTML5 Projects: Photo Card Titles

    Create an HTML form with CSS and JavaScript that allows users to submit captions for photo cards.

    Joseph Lowery
    1h 11m
    Intermediate
    Captions



  • WordPress Ecommerce: Easy Digital Downloads

    Build an online store for digital products like music, ebooks, and more using WordPress and the Easy Digital Downloads plugin.

    Morten Rand-Hendriksen
    1h 32m
    Beginner
    Captions



  • Creating an Animated Infographic with Edge Animate

    Tell a more compelling story in Edge Animate with an animated infographic.

    Chris Converse
    36m 3s
    Beginner
    Captions



  • WordPress Ecommerce: WooCommerce

    Build an online store using WordPress and the WooCommerce plugin.

    Morten Rand-Hendriksen
    2h 57m
    Beginner
    Captions



  • Validating and Processing Forms with JavaScript and PHP

    Learn how to ensure the data submitted to your web forms is complete, accurate, and nonmalicious with HTML5, JavaScript, jQuery, and PHP form processing and validation.

    Ray Villalobos
    2h 51m
    Intermediate
    Captions



  • Design the Web: Simulating Web Text

    Simulate the look of anti-aliased fonts in your next website mockup with this Photoshop tutorial.

    Chris Converse
    12m 25s
    Beginner
    Captions



  • WordPress Ecommerce: Core Concepts

    Find out what you need to build an online store and decide if WordPress is the right solution for you.

    Morten Rand-Hendriksen
    1h 3m
    Beginner
    Captions



  • Up and Running with Backbone.js

    Separate DOM manipulation from the data powering your web application with Backbone.js.

    Joseph LeBlanc
    1h 33m
    Beginner
    Captions



  • Design the Web: Video Graphics and Animation

    Learn to edit video and add custom graphics and animations to your projects in Photoshop CS6 with this Photoshop tutorial.

    Chris Converse
    24m 44s
    Beginner
    Captions



  • HTML5 Projects: Video Bumpers

    Put HTML5, CSS3, and recent JavaScript API technologies to work and provide an enhanced brand opportunity for your clients with custom video bumpers.

    Joseph Lowery
    31m 36s
    Intermediate
    Captions



  • Create a Sortable Photo Gallery with jQuery

    Implement and customize a sortable photo gallery with jQuery.

    Chris Converse
    1h 50m
    Intermediate
    Captions



  • Creating Interactive Projects with Edge Animate

    Explore the emerging workflow between the Adobe Creative Cloud applications and Edge Animate through a series of hands-on projects.

    Tom Green
    1h 43m
    Beginner
    Captions



  • CSS: Formatting Visual Data

    Learn to style lists, tables, charts, and graphs with CSS, HTML5, and JavaScript.

    Joseph Lowery
    1h 37m
    Intermediate
    Captions



  • JavaScript and JSON

    Explore how the JavaScript Object Notation (JSON) format works and how you can use it to read and share data in your web projects.

    Ray Villalobos
    1h 12m
    Intermediate
    Captions



  • Design the Web: Smart Objects

    Learn to speed up your design and production time in this Photoshop tutorial with the use of Smart Objects.

    Chris Converse
    29m 2s
    Beginner
    Captions



  • Create a Homepage Marquee with Edge Animate

    Use Edge Animate and HTML5, jQuery, and CSS to create a custom, interactive homepage marquee.

    Chris Converse
    1h 8m
    Intermediate
    Captions



  • Applied Responsive Design

    Real-world responsive design strategies to control the appearance and behavior of your website across multiple screen sizes and devices.

    James Williamson
    6h 1m
    Intermediate
    Captions



  • HTML5 Projects: Personalized Ads

    Discover how to combine advanced HTML5 form elements to gather personal details from your site visitors and deliver a better user experience.

    Joseph Lowery
    1h 11m
    Intermediate
    Captions



  • Building a Windows Store Game Using HTML and JavaScript

    Shows developers how to write their first Windows Store app with HTML5, JavaScript, and CSS.

    David Isbitski
    2h 16m
    Intermediate
    Captions



  • Up and Running with PhoneGap

    Build and package native device applications using PhoneGap and web technologies such as HTML, CSS, and JavaScript.

    Ryan Stewart
    1h 57m
    Beginner
    Captions



  • CSS: Gradients

    Discover CSS gradients, and add depth and texture to your web designs while reducing load times.

    Justin Seeley
    1h 13m
    Beginner
    Captions



  • CSS: Animations

    Presents a short series of CSS animation techniques, such as looping, playing, pausing, and more, and puts them together in a small project: an animated infographic.

    Val Head
    1h 56m
    Intermediate
    Captions



  • HTML5 Projects: Integrating Google Store Locator

    Take advantage of the HTML5 geolocation feature by using the recently released Google Store Locator Utility Library, and include directions and feature filtering in your web apps.

    Joseph Lowery
    43m 51s
    Intermediate
    Captions



  • ASP.NET Essential Training

    Learn to build and deploy a dynamic website using ASP.NET.

    David Gassner
    6h 24m
    Beginner
    Captions



  • Start with a Theme: Video Blogs in WordPress

    Set up a video blog using WordPress and three different free themes—Twenty Twelve, Origami, and Sundance—and get three completely different looks for your site.

    Morten Rand-Hendriksen
    58m 39s
    Beginner
    Captions



  • CSS: Visual Optimization

    Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability.

    Justin Seeley
    1h 11m
    Beginner
    Captions



  • Design the Web: Layer Comps

    Discover how to use Photoshop layer comps to storyboard your interaction designs.

    Chris Converse
    20m 51s
    Intermediate
    Captions



  • Installing and Running WordPress: BitNami

    Learn to install and configure WordPress locally on Windows with BitNami, the multiplatform, open-source server/database/scripting language and WordPress combo for Windows and Mac.

    Morten Rand-Hendriksen
    59m 31s
    Beginner
    Captions



  • Installing and Running WordPress: WebMatrix

    Learn to install and configure WordPress locally on Windows with Microsoft WebMatrix, the free server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    43m 11s
    Beginner
    Captions



  • Up and Running with Sublime Text 2

    Discover some of the basic, not-so-basic, and downright hidden features of the Sublime Text 2 code editor, and become a more productive developer.

    Kevin Yank
    1h 40m
    Beginner
    Captions



  • Installing and Running WordPress: MAMP

    Learn to install and configure WordPress locally on a Mac with MAMP, the open-source server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    45m 39s
    Beginner
    Captions



  • Installing and Running WordPress: WAMP

    Learn to install and configure WordPress locally on Windows with WAMP, the open-source server/database/scripting language combo that sets the stage for more serious WordPress development.

    Morten Rand-Hendriksen
    47m 59s
    Beginner
    Captions



  • Design the Web: Clipping Masks

    Shows you how to use clipping masks to create interesting design effects in Photoshop, while leaving the original images unharmed and ready for further edits.

    Chris Converse
    17m 29s
    Beginner
    Captions



  • CSS: Frameworks and Grids

    Explores CSS frameworks and grids, and helps you determine when a framework is right for you.

    James Williamson
    3h 27m
    Beginner
    Captions



  • Muse Power Workshop

    Go beyond the basics of Adobe Muse.

    Ted LoCascio
    4h 25m
    Intermediate
    Captions



  • JavaScript and AJAX

    Explore how to load dynamic content from JavaScript and jQuery using AJAX methods.

    Ray Villalobos
    1h 12m
    Intermediate
    Captions



  • Building Facebook Applications with PHP and MySQL

    Learn the basics of building complex, data-driven applications with the Facebook PHP SDK and MySQL.

    Ray Villalobos
    1h 45m
    Intermediate
    Captions



  • Responsive Design with Drupal

    Takes you through the process of making a Drupal website that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices.

    Chaz Chumley
    2h 38m
    Intermediate
    Captions



  • Templating with Joomla! 3 and Bootstrap

    Build a custom Joomla! 3 template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices, leveraging Bootstrap, which ships with Joomla! 3.

    Jen Kramer
    5h 8m
    Intermediate
    Captions



  • Getting Started with Muse

    Create rich, high-fidelity website layouts without having to delve into HTML and CSS code.

    Jim Babbage
    4h 28m
    Beginner
    Captions



  • User Experience Fundamentals for Web Design

    Discover how to create a user experience that embodies utility, ease of use, and efficiency by identifying what people want from websites, how they search for information, and how to structure your content to take advantage of this.

    Chris Nodder
    1h 47m
    Beginner
    Captions



  • WordPress.com Essential Training

    Establish a web presence quickly and easily with WordPress.com, without having to download any software or set up web hosting.

    Morten Rand-Hendriksen
    5h 3m
    Beginner
    Captions



  • Simplified Drupal Sites with Drush

    Manage your Drupal sites even more efficiently with Drush, the shell interface for managing and scripting Drupal site development.

    Jon Peck
    1h 22m
    Intermediate
    Captions



  • Create an Animated Star Field with Edge Animate

    Create a randomized animation with just a few lines of JavaScript and Edge Animate.

    Chris Converse
    42m 6s
    Appropriate for all
    Captions



  • WordPress 3: Building Child Themes

    Create a child theme based on an existing parent theme in WordPress and change the functionality, presentation, or styling of a site.

    Morten Rand-Hendriksen
    3h 11m
    Intermediate
    Captions



  • Start with a Theme: Magazine Styles in WordPress

    Set up an online magazine using WordPress and three different themes that result in three completely different looks—Max Magazine, Path, and Oxygen.

    Morten Rand-Hendriksen
    1h 18m
    Beginner
    Captions



  • Introducing the JavaScript Language

    Gain an understanding of variables, types, objects, arrays, operators, control structures, loops, and functions, then work through a series of hands-on examples that put these ideas into action.

    Joe Chellman
    2h 54m
    Beginner
    Captions



  • CSS: Styling Navigation

    Use CSS to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively.

    James Williamson
    5h 14m
    Beginner
    Captions



  • Creating an Effective Content Strategy for Your Website

    Walks you through the process of analyzing, planning, and managing different types of content—from blog posts to videos—so you can develop a content strategy for any website.

    Janine Warner
    1h 54m
    Appropriate for all
    Captions



  • HTML5 Projects: Engaging Ecommerce

    Build features that allow visitors to your online store to filter their selections interactively via sliders, drag items onto wish lists, and automatically save them locally.

    Joseph Lowery
    37m 29s
    Intermediate
    Captions



  • Responsive Design Workflows

    Evolve your current workflow to incorporate responsive design and collaboration practices, without adding too much complexity or overhead.

    Justin Putney
    1h 20m
    Beginner
    Captions



  • CSS with LESS and Sass

    Introduces the LESS and Sass tools—dynamic CSS style sheet preprocessors that add features like variables, conditionals, and functions to the CSS language and can accelerate complex CSS implementations.

    Joe Marini
    1h 57m
    Intermediate
    Captions



  • HTML5 Projects: Customized Photo Cards

    Build an online application for creating personalized photo cards with user-uploaded imagery and text.

    Joseph Lowery
    44m 20s
    Intermediate
    Captions



  • Responsive Design Fundamentals

    Introduces the concepts behind responsive design, covering concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.

    James Williamson
    2h 15m
    Beginner
    Captions



  • InDesign for Web Design

    Shows aspiring web designers how to quickly create webpage prototypes with text and object styles, modular layouts, and interactivity.

    Michael Murphy
    5h 7m
    Intermediate
    Captions



  • Dreamweaver and WordPress: Core Concepts

    Shows how to combine the utility of WordPress and the power of Dreamweaver to transition existing websites to the WordPress platform.

    Joseph Lowery
    5h 44m
    Intermediate
    Captions



  • Up and Running with HTML

    Leads you through the process of building an HTML website, from creating a new page to building links and tables, using simple, repeatable steps.

    James Williamson
    4h 32m
    Beginner
    Captions



  • Drupal 7 Custom Module Development

    Extend your Drupal 7 sites with custom modules, which allow you to create everything from admin interfaces to forms.

    Jon Peck
    2h 57m
    Advanced
    Captions



  • Analyzing Your Website to Improve SEO

    Walks step-by-step through the process of reviewing the content and markup of a web site to improve its ranking in search engine results.

    Peter Kent
    1h 43m
    Intermediate
    Captions



  • Up and Running with Bootstrap

    Discover Bootstrap, a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun.

    Jen Kramer
    2h 38m
    Beginner
    Captions



  • Create a Sliding Tabbed Panel with jQuery and Dreamweaver

    Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver.

    Chris Converse
    1h 6m
    Intermediate
    Captions



  • Create a Sliding Tabbed Panel with jQuery

    Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, and jQuery.

    Chris Converse
    58m 25s
    Intermediate
    Captions



  • Create Your First Online Store with Magento Go

    Discover how to use the robust set of Magento Go tools to create a shopping cart and create, manage, and grow your online business.

    Justin Seeley
    1h 57m
    Beginner
    Captions



  • Creating a Responsive Web Design

    Make your website more readable and efficient to download with Chris Converse’s responsive website techniques.

    Chris Converse
    1h 31m
    Beginner
    Captions



  • EaselJS First Look

    Introduces the EaselJS framework and the HTML5 Canvas element, and shows how to create interactive web content with this open web standard.

    Ray Villalobos
    1h 28m
    Beginner
    Captions



  • HTML Essential Training

    Explains the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages, and provides an introduction to HTML5 and CSS.

    Bill Weinman
    5h 34m
    Beginner
    Captions



  • Creating a First Web Site with Dreamweaver CS6

    Create a web site that works across multiple browsers and devices with Adobe Dreamweaver CS6.

    Paul Trani
    2h 48m
    Beginner
    Captions



  • Create a Tooltip with jQuery

    Shows how to convert text or graphics into a mouse-sensitive tooltip with HTML and jQuery.

    Chris Converse
    54m 23s
    Intermediate
    Captions



  • Create a Tooltip with jQuery and Dreamweaver

    Shows how to convert text or graphics into a mouse-sensitive tooltip with jQuery and Dreamweaver.

    Chris Converse
    54m 15s
    Intermediate
    Captions



  • Responsive Design with Dreamweaver CS6

    Learn how to use media queries and the new Fluid Grid Layout feature in Dreamweaver to create a single web site that delivers different layouts to desktops, tablets, and other mobile devices.

    Joseph Lowery
    2h 6m
    Appropriate for all
    Captions



  • WordPress: Building Responsive Themes

    Demonstrates different design strategies, best practices, and actual code examples for creating a web site that can adapt to multiple devices, screen sizes, and browsers.

    Morten Rand-Hendriksen
    2h 55m
    Intermediate
    Captions



  • Node.js First Look

    Take a first look at Node.js, a software system that makes it possible to write full web applications entirely in JavaScript.

    Joseph LeBlanc
    2h 10m
    Beginner
    Captions



  • WordPress Mobile Solutions

    Create a mobile-ready version of an existing WordPress web site by leveraging plugins.

    Morten Rand-Hendriksen
    44m 26s
    Beginner
    Captions



  • Create Navigation Menus with jQuery and Dreamweaver

    Find out how to add stylized dropdown menus in Dreamweaver using HTML, CSS, JavaScript.

    Chris Converse
    25m 49s
    Intermediate
    Captions



  • Create Navigation Menus with jQuery

    Find out how to add stylized dropdown menus to your web site using HTML, CSS, and JavaScript.

    Chris Converse
    24m 1s
    Intermediate
    Captions



  • Up and Running with Linux for PHP Developers

    Learn how to install and configure a local Linux server optimized for web application development with the LAMP (Linux/Apache/MySQL/PHP) software stack.

    Jon Peck
    1h 17m
    Beginner
    Captions



  • Fireworks CS6 Workshop

    Understand where Fireworks fits into the workflow for digital media projects ranging from simple web page prototyping to interface design for rich Internet applications.

    Tom Green
    6h 51m
    Beginner
    Captions



  • Start with a Theme: Creative Portfolios in WordPress

    Discover how to set up a portfolio of your work using WordPress and three free themes that result in three unique looks for your site—all without writing code!

    Morten Rand-Hendriksen
    1h 3m
    Beginner
    Captions



  • Illustrator for Web Design

    Create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator.

    Justin Seeley
    5h 27m
    Appropriate for all
    Captions



  • jQuery Mobile Web Applications

    Covers the major workflow elements of creating mobile web applications with jQuery Mobile, from building the components of a basic app to extending it with themes and data feeds.

    Ray Villalobos
    3h 13m
    Intermediate
    Captions



  • Photoshop for Web Design

    Reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Photoshop with navigation bars and buttons.

    Justin Seeley
    4h 53m
    Appropriate for all
    Captions



  • CSS: Transitions and Transforms

    Explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences.

    Joseph Lowery
    2h 25m
    Intermediate
    Captions



  • Building Flash Games with Starling

    A project-style course that teaches how to build a Flash-based game with Flash Builder 4.6, Flash Player 11, and the Starling framework.

    Lee Brimelow
    2h 57m
    Intermediate
    Captions



  • Choosing and Using Web Fonts

    Focuses on the theories behind web fonts: showing what makes a good font, why different fonts look the way they do, and how they affect the look of your web page.

    Laura Franz
    6h 52m
    Appropriate for all
    Captions



  • PHP 5.4 New Features

    Shows how to install the latest version of PHP, the popular web application server, and reviews the performance enhancements and language improvements in the 5.4 release.

    Drew Falkman
    1h 1m
    Intermediate
    Captions



  • Add Your jQuery Project to a Digital Magazine

    Combines the use of Adobe InDesign and Digital Publishing Suite to add an interactive web experience to your digital magazine.

    Chris Converse
    16m 43s
    Intermediate
    Captions



  • Building Facebook Applications with HTML and JavaScript

    Introduces developers and designers who are already familiar with HTML and JavaScript to Facebook app development.

    Ray Villalobos
    3h 0m
    Intermediate
    Captions



  • Dreamweaver with PHP and MySQL

    Add dynamic data to a PHP-enabled web site in Dreamweaver CS5 and CS6.

    David Gassner
    4h 55m
    Intermediate
    Captions



  • Create an iPad Web App

    Discover how to create an app-like experience for iPad with HTML, CSS, and jQuery, while bypassing the need for Objective-C or the App Store.

    Chris Converse
    1h 27m
    Beginner
    Captions



  • Edge First Look Preview 6

    Take a first look at Edge, a new tool from Adobe for creating interactive motion graphics, which utilizes the latest web standards including HTML5, JavaScript, and jQuery.

    Ray Villalobos
    1h 56m
    Beginner
    Captions



  • Add a Video to an iBook for iPad

    Integrate video into an EPUB destined for the Apple iBookstore or a web site.

    Chris Converse
    11m 22s
    Intermediate
    Captions



  • HTML5 for Flash Developers

    Shows Flash developers how to create dynamic content in the browser using HTML5, CSS, and other related technologies.

    Lee Brimelow
    3h 16m
    Beginner
    Captions



  • Adding Dynamic Functionality to Your Joomla! Site

    Enhance your Joomla! site by adding advanced functionality through extensions, plugins, and templates.

    Laura Gordon
    3h 37m
    Beginner
    Captions



  • HTML5 Power Workshop

    Covers advanced HTML5 topics like geolocation, mobile development, web sockets, Web SQL, and web workers.

    Andy Olsen
    3h 9m
    Intermediate
    Captions



  • View Source

    Ten-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more.

    Ray Villalobos
    2h 10m
    Intermediate
    Captions



  • Exploring CSS Positioning

    Learn CSS positioning concepts like the CSS box model, floats, and clears and gain a deeper understanding of how HTML and CSS work together to create the look of your web page.

    Candyce Mairs
    3h 57m
    Beginner
    Captions



  • ActionScript 3.0 in Flash Professional CS5 Essential Training

    Shows Flash designers how to incorporate ActionScript code into projects and create interactive presentations and applications.

    Todd Perkins
    7h 8m
    Beginner
    Captions



  • Add a Wraparound Effect for a Marquee with jQuery

    Add a wraparound effect to your homepage marquee with a concise bit of jQuery code.

    Chris Converse
    35m 51s
    Intermediate
    Captions



  • Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

    Add a wraparound effect to your homepage marquee with Dreamweaver and a concise bit of jQuery code.

    Chris Converse
    41m 46s
    Intermediate
    Captions



  • Intermediate Flash MX

    Learn intermediate Flash techniques by constructing a site entirely in Flash.

    Shane Rebenschied
    16h 3m
    Beginner



  • Learning Dreamweaver MX

    Tips, techniques, and features include accessibility, site management, rollovers, forms, frames, and how to get your site online.

    Garo Green
    6h 35m
    Beginner



  • Learning ActionScript in Flash MX

    ActionScript in Flash MX features include dot syntax, events, pathing, variables, loading external content, preloaders, functions, logic, and Boolean.

    Chris Byerley
    3h 55m
    Intermediate



  • Learning GoLive 6

    Covers working with text, creating links, tables, frames, cascading style sheets, forms, and JavaScript actions.

    Shane Rebenschied
    14h 54m
    Beginner



  • Learning Flash MX

    Walks through the essential features of Flash MX, including drawing tools, importing bitmaps and vectors, animation, masking, and ActionScripting basics.

    Shane Rebenschied
    15h 36m
    Beginner



  • Learning Flash 5

    Covers the essential features of Flash for new users: the authoring tool, drawing tools, importing, and more.

    Garo Green
    6h 17m
    Beginner



  • Learning Dreamweaver 4

    Over three hours of instruction on basic authoring and getting up to speed with Dreamweaver 4.

    Lynda Weinman
    3h 22m
    Beginner



  • Intermediate Dreamweaver 4

    Develop your power-user skills with professional tips and techniques including table coding, layers, CSS, and building DHTML menus.

    Donna Casey
    8h 45m
    Intermediate



  • Intermediate Flash 5

    Learn the secrets of Flash 5 mastery, including tips on site design strategy and workflow.

    Shane Rebenschied
    11h 9m
    Intermediate



  • Optimizing Flash 5 Content

    Create highly interactive and fast-loading web content; learn workflow, file size, and performance optimization.

    Shane Rebenschied
    1h 46m
    Intermediate



  • Learning Fireworks 4

    Focuses on skills for common web graphics, such as buttons, slicing, rollovers, optimization tools, animation, and image maps.

    Donna Casey
    4h 59m
    Beginner



  • Advanced Flash 5

    Teaches the fundamentals of object-oriented programming inside of Flash.

    Josh Ulm
    6h 18m
    Advanced



  • Learning Photoshop 6 and ImageReady 3 for the Web

    Shows integral features of Photoshop 6 and ImageReady 3 for the web.

    Bruce Heavin
    7h 23m
    Beginner



  • Learning Fireworks 3

    Shows how to optimize images; create JavaScript rollovers, slices, and animation; and integrate Fireworks with Dreamweaver.

    Garo Green
    5h 40m
    Beginner



  • Animation Principles

    Covers the underlying principles of animation and how to add and apply them to Flash work.

    Chris Casady
    1h 45m
    Appropriate for all



  • Learning Dreamweaver 3

    Topics include site management, linking, rollovers, image maps, behaviors, DHTML, CSS, and HTML styles.

    Lynda Weinman
    6h 2m
    Beginner



  • Learning UltraDev 4

    Shows Dreamweaver users how to utilize UltraDev to create database-driven web sites.

    Simon Allardice
    3h 25m
    Beginner



  • Learning Director 8.5

    Get a firm grasp of the Director interface, as well as a basic understanding of Director’s scripting language, Lingo.

    Vince Parker
    13h 41m
    Beginner


13 WordPress/ Final Prep

Posted on by
Reply

You have learned how HTML and CSS work, and you can build a website. Most web sites in the real world are not hand coded, but use a Content Management System, or CMS. While a CMS does not have to use a database, most do.

CMSs

High end CMS programs run sites like Google, Amazon or financial institutions. Most sites do not need that kind of performance or redundancy, and are built using open source software, usually PHP with MySQL as the database.

WordPress, Drupal and Joomla are three popular CMS. WordPress has become the most popular of these, even though it is the least CSM like. Comparison between the three main CMS platforms.

Each of these CMSs work very different, though all use PHP to construct the pages out of information provided by the database, and content stored in the site itself, on the basis of a template.

To modify the look of the CMS, requires modification of the template. You build your website by designing the template. The CMS does the rest.

WordPress

We focus on the most popular choice. Because there is not enough time in the class, I leave developing your own WordPress theme as an alternate choice.

You will be able to create a template from scratch by following the short course: WordPress 3: Creating and Editing Custom Themes with Chris Coyier of CSS-Tricks. To click this link, you first need to log into the Newschool Portal –> Library –> Databases –> search for Lynda.com, click on the link, go to Lynda.com, sign up for an account, and then sign in. You can then use this link to go to the tutorial and download the accompanying exercise files. Lynda.com.

When A Dynamic Website is Not the Best Choice

Dynamic websites are the best thing since sliced bread, but they come with one big drawback. If you do not keep up with the software, they can contain exploits used by people with malicious intent. This can render your website hacked. This is not possible with a conventional, hand coded website.

If you plan to not update your portfolio all of the time, it better be a hand coded site. If you plant to keep up with the software updates, then by all means, use a CMS.

Installing WordPress

You will find all the resources you need at wordpress.org. You start by downloading WordPress. Put all of the files in the directory you want WordPress to appear in.

You will go to that directory, and you will be guided by the WordPress Installer. You will need to know the name and password of the database that WordPress is to use. The installer will take care of setting up everything else.

See MAMP & WAMP for setting up WordPress on your own computer.

Chris Coyier outlines a great way to experiment by using a local MAMP installation at both Linda.com with a video tutorial or the Video on CSS-tricks.com. That’s a sure way to become familiar with using WordPress as the basis for building web sites.

WordPress Template

WordPress comes with a default templates. It is possible to modify them. The problem with preexisting templates is that if they are not exactly what you want, even though they are 95% of the way there, that extra 5% sometimes requires a lot more work than you would expect, as you have to deconstruct the template and rebuild it the way you want. It can take less time to do it from black template. That is why a better way is to design the template from scratch. Start with a blank template Chris prepared.

Having installed WordPress, you need to add this to the “themes” folder in the “wp-content” folder. Once it is there, you can activate it from within the WordPress Dashboard.

Yes I am going through this rather very fast, in part because we could never cover the whole topic anyway, and this is just to give you a taste of what is to come. Please do Chris’ tutorial if you want to learn more.

WordPress File Organization

Inside the blank template folder, you will find an index.php file. That is the main file creating each page.

You learned how PHP is able to include a number of files. That is what happens here. Everywhere you see a “get_” PHP will insert an associated file in that place. This is what the index.php looks like:

<?php get_header(); ?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
			<div class="entry">
				<?php the_content(); ?>
			</div>
			<div class="postmetadata">
				<?php the_tags('Tags: ', ', ', '<br />'); ?>
				Posted in <?php the_category(', ') ?> | 
				<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
			</div>
		</div>
	<?php endwhile; ?>
	<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
	<?php else : ?>
		<h2>Not Found</h2>
	<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

You will notice that the index file pulls in the header.php, the sidebar.php and the footer.php files, in addition to the loop that fetches the current post.

Here is a list of all the files in the template:

404.php
archive.php
comments.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

You need to understand that the HTML page that you otherwise code as one entity is here divided among these different files. It is quite easy to transfer your static website to a dynamic WordPress site by dividing up the web page into the existing pages like the header.php, sidebar.php, footer.php, etc.

The good news is that the CSS styles are included as an external stylesheet “style.css” exactly as you would expect.

As you translate your existing website to WordPress, you will once again learn everything that you have learned in class over again, but this time, you will be applying it to the modular structure of a dynamic php / database driven site.

There are many benefits to such a dynamic site, and a few drawbacks. Dynamic sites are a little slower and unless you keep up with the latest software, can be insecure, but that is not that large a price to pay when you add in all the benefits of a dynamic site.

I understand that this is all a little much. This is meant as a brief introduction. Watch the tutorial, and you will use WordPress to build your sites from that point on.

Assessable Tasks

Posted on by
Reply

Assessable tasks are those core tasks required to create modern web design.

TASKS / ACTIVITIES DATE REQUIREMENTS / INDICATORS
Marking‑up Content week 1 Is the markup valid and semantically correct HTML5? Are images the correct formatand size?
User Experience week 2 Are UX concerns driving the design process?
Design Process week 2 Are all 8 steps articulated? Are they reflected in the portfolio and final?
Styling the Content week 3 Is the CSS valid, clean, external, and using structural selectors wherever possible?
Layout out the Content week 4 Are multiple layout strategies used to construct the website? Document Flow? Positioning? Floats? Flex Box? Grid?
Constructing the Portfolio Site week 5 Is the site logically organized? Is it SEO friendly? Is it tracked using Google Analytics? (only for non‑Parsons hosted websites)
Is the web site Future Proof? week 3‑6 Is the website responsive to a change in viewport size, from smart phones to 4K Screens?
Does the typography communicate? week 6 Does the typography promote legibility? Accessibility?  Does it communicate the messaging, tone, sentiment, and aesthetics?
Exploring CSS3 and beyond week 9‑11 Are advanced CSS modules used to create the look, feel, and functionality of the website? Does it stand out?
Modularity and Interactivity week 12 Are PHP and Javascript used in the final website?
CMS: WordPress week 9‑13 Are You capable of creating a site using WordPress?
Forms week 14 Are forms used in the final website?

03 Demo Instructions

Posted on by
Reply

In class demonstration for week three: introduction to CSS. Finished file.

  1. pick up the HTML5 template from the class portal
  2. Give it a title.
  3. There is an embedded style sheet that we will not use. 
    <style type="text/css"> 
.example {
}
</style>
  4. There is a link to an external style sheet. 
     <link rel="stylesheet" href="CSS/styles.css" media="all">
  5. We will use an external style sheet. Create a folder called “CSS” and a file called “style.css” External style sheets are just blank files, filled with css rules attached to selectors that target the elements in the HTML document.
  6. If we were to start adding rules, we would be adding our rules on top of the default rules of the browser. Since we do not want to depend on the rules of this or that browser, we neutralize them with a browser reset.
  7. After the Browser reset, we begin by writing that this is where the user style sheets starts. 
    /*USER STYLES*/
  8. We start by targeting the most general tags, and slowly work our way to more specific tags.
  9. The most general tag is the <body> tag. Do we want to keep the white background? What fonts do we want, etc? How about: 
    body {
background: hsla(0,100%,70%,1);
font:  400 1.5em/1.6em  "Times New Roman", Georgia, Serif;
}
  10. Be careful with this font property, as it combines a number of properties, and you need to execute it exactly as it is here. 400 refers to the weight of the font. 400 is normal. 700 is bold. 1.5/1.6 provides us with both the font size and the line height. I then name the font family, were Times New Roman is requested, and if that is not available , Georgia, then any serif font. See Class 6 for more font information.
  11. Since every other tag will be written inside the body tag, they will inherit some of these properties. The font property is inheritable, the background property is not.
  12. The next strategy is to limit the width of the window when looking at the website on a computer screen, and to center it in the middle. We limit the width to 940px and place it in the middle by using the CSS property margin with value auto like so: margin: auto;. 
    section {
width: 940px;
margin: auto;
background: hsla(30,100%,98%,1);
}
  13. The background of the section tag is only as large as the information inside of the tag. Right now it takes on the size of the picture. Let’s swap the picture with the text that one of you has written. The section expands to contain the new content.
  14. The CSS reset has reset most properties, so we need to define all of our CSS. We start by providing the section tag with 40px padding. This keeps the content from hitting the edges of the section tag.
  15. Save the document, make the browser window active by clicking on it and hit command-R to refresh the browser.
  16. We can keep the top from touching the top of the window by giving it a positive top and bottom margin. This is done by adding 40px before the auto. margin: 40px auto;
  17. CSS always starts on top, then goes clockwise, to the right, bottom, and finally left. If you only have one value, all sides take on that number. If you specify two numbers, the first signifies the top and bottom, the second the right and left sides. If there are three numbers, you can give different values to the top and bottom, and the sides stay the same. With four values all the sides are specified separately.
  18. Let’s define the section by adding a #444 border. We can do that with a shortcut that allows us to specify width, kind and color at the same time; border: 3px solid #444;
  19. The entire code for the section now looks like this: 
     section {
width: 1100px;
margin: 40px auto;
padding: 70px 30px;
background: hsla(30,100%,98%,1);
border: 3px solid #444;
}
  20. What if I were to give the header a background color? If I color the header, it looks kind of clumsy, because of the padding I gave the section. I want to counteract that by giving the header negative margins for each side, but not the top or bottom. That is accomplished by margin: 0 -60px; Giving it a little extra makes it stick out over the section, and has the effect of raising the header above the rest of the document, which helps define its importance in the visual hierarchy. I also want a little space between the header and whatever comes next. 30px should do it. margin: 0 -60px 30px; I give it a border border: 1px solid #444; and 20px of padding to finish it off. 
    header{
background: hsla(0,100%,90%,1);
margin: 0 -60px 30px;
padding: 20px;
border: 1px solid #444; 
}
  21. Next up is to style the h1 header. If we make it 2em (that is a size based on the width of an em dash). OK, that is not brash enough. Lets go with 4em. The serif font does not work and I change it to Helvetica. There are more interesting fonts available, but for now, lets keep it simple.
  22. The navigation is a list. Lists items by default act like blocks. That means they go down like paragraph returns. We want them to go across, so we need to target the list items in the header and change the display from block to inline-block. With a little margin we can separate the menu items. We can go further, but lets leave that till class 5. 
    header li {
display: inline-block;
margin: 0 10px;
}
  23. It is easy to have paragraphs display one below the other. It is more difficult to display them side by side. Going vertical is natural, going horizontal is what will give you your headaches.
  24. To give us some practice, I will demonstrate the float technique to place items horizontally. This is the technique used by the NYTimes.com to create their layout. You can see this for yourself by installing the Plugin. Click on the bug that is installed to the right of your address bar, select outline in the pop-up and select outline frames. You will see almost every box in the layout light up.
  25. The float technique was originally used for floating pictures, but five years ago it was adopted by the NYTimes to float layout elements. Tables were used for layout before that time.
  26. The first step is to float an image to the right. Create a figure, img and figcaption and link to an appropriately sized picture. Since I may want to move pictures to the right more often, I create a class called pict-r, and use the class attribute in the figure class="pict-r" . A selector for the class is placing a period before pict-r in the CSS style sheet .pict-r . I also specify a smaller font for the caption, and align it to the right, and put a border on the image, though I offset it by 2px using padding. 
    .pict-r {
float: right;
margin-left: 40px;
}
img {
border: 3px solid silver;
padding: 2px;
}
figure {
}
figcaption {
font:  400 .7em/.7em  Helvetica, san-serif;
text-align: right;
}
  27. The picture moves to the right. The caption is flush right. The picture has a border around it, and the text runs around that picture.
  28. We use the same idea, but now we float a layout element to the left. THe layout element is created by introducing a div in the markup that encloses the text I want to float to the left.
  29. This time I use an ID to target the div. An ID can only to used once on a page. The id attribute is placed in the div tag: id="left" and in the style sheet, a hashtag is used as the selector: #left 
    #left {
float: left;
width: 44%;
margin-right: 3%;
padding-right: 3%;
border-right: 2px solid silver;
margin-bottom: 10px;
}
  30. I used percentages as an easy way to figure out the width. It is always a percentage of the width of the parent element. I could have figured out the pixels values and done it that way as well.
  31. When I decided to put a top and bottom holding line it, a problem arose, and I needed to push the last paragraph below the float. There is a CSS property to do this, called clear, meaning clear float. That allowed me to put the last paragraph below the two columns.
  32. To finish it off, I gave the paragraphs a 13px spacing at the bottom. 
     .bottom {
border-bottom: 2px solid silver;
padding-bottom: 10px;
margin-bottom: 20px;
}
.top {
clear: left;
border-top: 2px solid silver;
padding-top: 10px;
margin-top: 20px;
}

15 Final Presentation

Posted on by
Reply

Week 15
12/11

Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream of, on the web. Show your final, walk us through your code. What was the most difficult/frustrating part of the project? What was the most rewarding?

Homework

Final Assessment:

Class Evaluation

  • 15 minutes to fill out the course evaluation.

Materials

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

Goal

The goal of this unit is to:

  • provide each student with the time to exhibit their work to the rest of the class.
  • receive feedback from everyone.
  • to celebrate that you have learned a new and imminently usable skill and now belong to the modern world wide web culture.

Outcomes

At the end of this unit, students will have:

  • spent about ten minutes each presenting their final assignment.
  • expressed the UX and IA decisions that went into the project
  • explained the problems they set out to solve
  • show the way that they tackled those problems.
  • used the work-sheets to help present and express themselves.

Definitions

These are the general criteria that The Webby Awards use to evaluate web sites. You should be familiar with them.

Content
Content is the information provided on the site. It is not just text but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

15 Parting Essay

Posted on by
Reply

You now know a lot more about CSS and HTML than you did when you walked in. It was difficult to first wrap your head around how this new language worked. You had to practice coding. Once you shed the obvious mistakes, coding HTML and CSS proved to be not nearly so difficult as you had first imagined. With the confidence you’ve gained you are hopefully liberated in your design sensibilities and impose it upon the code, and not the other way around. Make the code work for you.

If you’ve become really good at HTML and CSS you can give back and offer your services at the University Learning Center

Keep yourself in the loop of the continually evolving web by paying attention to what the browsers are doing, like Google Chrome Developer and Mozilla Developer.

Know that the web will be the next computing platform. HTML and CSS are to play a gargantuan role. Know it. Use it. Keep on top of it as it evolves.

Have you become interested in front end web design? Know it takes more than HTML and CSS.

Push the limits. It is amazing what a little CSS can do. Check out Diana Smith’s CSS Francine and the Explanation.

Use the web to facilitate your professional aspiration with real target audiences to make you a better and more responsive student.

Be good, enjoy what you do and have an effective web presence.

And have an interesting and rewarding life.

All the best,

onno

13 CMS: WordPress / Final Review

Posted on by
Reply

Week 14
11/27

Forms and Peer Review. HTML forms are a standard way to collect information from the user. Activity: Create a simple form. Your final project should be a functional web site by this time. Activity: Peer Review: Students split up into pairs and review each other’s web sites.

Homework

You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.

Materials

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

Goal

The goal of this unit is to:

  • Everyone is pretty busy with their finals but I thought to wrap up the course with a guided tour of a WordPress template.
  • look at how PHP creates the WordPress Website out of different sections.
  • take a detailed look at the WordPress style sheet.

Outcomes

At the end of this unit, students will have:

  • been exposed to a content management system (CMS).
  • worked through WordPress template.
  • understood how PHP combines the page out of disparate files.
  • will have been helped with any outstanding issues remaining in their final project.

Step-by-Step

20 Review homework and answer questions.
40 Show and Tell: Content management System — WordPress: new site

15 Student Evaluations: I will leave the room while you fill out the evaluations.
10 Break
80 In Class Help on the Final

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Move the Web Forward is the hub for how to engage the web community once you have joined it. You have all joined this community by now, and this will be a continually updated resource at the center of the web design universe.
  2. Changing the World! Web Governance
  3. Paul Irish Industry leader.
  4. Eric Meyer The original Industry Leader that helped bring in Standards based web design.
  5. Jeff Zeldman Another industry leaders that helped bring in standards based web design.

There are, of course, many more resources but in this ever changing fast moving web culture, you can count on these to move the web forward. This will keep you going.

  1. One last article that introduces freelance bidding sites.

    As long as you are a student, your courses provide you with projects but if you are graduating, I highly recommend checking these sites out, and doing a number of projects, if not for the money, for the experience, so that you can build up your portfolio.

Definitions

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

14 Forms / Peer Review

Posted on by
Reply

Week 14
12/04

Forms and Peer Review. HTML forms are a standard way to collect information from the user. It requires setting up a php script. Activity: Create a simple form and include it in your final. Activity: Peer Review: Students split up into pairs and review each other’s web site(s).

Homework

1) For class: sv Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that to the person whose site you reviewed and to me. Read: chapter 16. 3) For final: Use the feedback from the peer review to finish your website. Due: The following week.

Materials

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

Goal

The goal of this unit is to:

  • Be able to incorporate forms into the final website.
  • Understand how to critically review web site design and execution.
  • Have your web site reviewed by a peer.
  • Critique and review a peer’s web site.
  • Have me review your web site.

Outcomes

At the end of this unit, students will have:

  • Learned how to construct forms in HTML.
  • Activated forms on the server side using a PHP script.
  • Implemented forms on their own website.
  • To have been a user and test a peer’s web site
  • Critiqued and reviewed that website.
  • Had their web site critiqued and reviewed.
  • Used the feedback to finish web site.

Step-by-Step

20 Review homework and answer questions.
20 Forms
20 Implement Forms and PHP script on server.
20 How to peer review a website
10 Break
20 User test partner’s site
30 Peer review partner’s site
40 Switch Roles

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Opera Developer Blog
  2. Safari Developer Blog
  3. Mozilla Hacs

There are, of course, many more resources but Safari, Firefox and Opera are the standards compliant browsers that have carried web forward. Microsoft is also becoming a player but all of you use Macs.

Talking Points

LYNDA.COM is available to all Newschool students by logging in, going to the library page, clicking on databases and search for lynda.com. You will have to sign up and activate an account but this will will give you access to both the video and the supplementary exercise files.

LYNDA.COM video Series: Validating and Processing Forms with JavaScript and PHP

Validating web forms is a critical skill for any web developer, ensuring that the data that’s submitted is complete, accurate, and not malicious before it’s sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it’s ready for other applications.

Assignment Links

Links that I expect to be up and the end of the semester:

Example of landing page from a previous semester.

    Week 2

  1. Assignment 1 (5 pages marked up)

    Week 3

  2. Index.html landing page— these links and a picture next to your name.
  3. Worksheet: behind the scenes on creative process.
  4. NY Times Wireframe
  5. Portfolio Photoshop Comp

    Week 4

  6. Portfolio exhibiting the CSS selections

    Week 5

  7. Portfolio Photoshop comp to HTML/CSS.

    Week 6

  8. Portfolio: rough, including SEO, Google Analytics and Styled Navigation

    Week 7

  9. Midterm Quiz
  10. Midterm: Portfolio (can be the same link as week 6)

    Week 8

  11. Typography Poster
  12. Final Worksheet with topic

    Week 9

  13. Responsive Redesign of Portfolio

    Week 10

  14. CSS3 Collateral ( and post the exercise you did in class)

    Week 11

  15. CSS3 Animatics (and post the exercise you did in class)

    Week 12

  16. Final: Rough

    Week 12

  17. Multimedia Demonstration

    Week 13

  18. Final: Modular Navigation

    Week 14

  19. Final: User Testing

    Week 14

  20. Final: Peer Review

    Week 14

  21. Forms

    Week 15

  22. WordPress CMS

    Week 15

  23. Link to Final

    The final website sells something. It does not have to be lots of pages but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms media queries, etc.

Definitions

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