What is FLASH?
Flash is a multimedia and software platform used for authoring of vector graphics, animations, games and rich Internet applications (RIAs).
What is HTML?
HTML is actually a really easy language to learn. with just a little bit of tutelage and a few tags, you could put together basic web pages within a hour! At it's core HTML is no more than telling the browser what the content is, ie: this is a paragraph, this is a headline, this is an image.
HTML stands for HyperText Markup Language. But it was sloppy, there were no web standards, and every browser had quirks and displayed the information in different ways. So the W3C applied the rules for XML (or Extensible Markup Language, a markup language where everything has to be marked up correctly, which results in "well-formed" documents) to HTML, and XHTML was born.
What is CSS?
CSS stands for Cascading Style Sheets and defines how XHTML elements are displayed. In our CSS documents we can tell the browser how to display our headlines and paragraph text.
In the old days you would set color, font, size and weight for every block of text on every page in the HTML. This ends up being a ton of redundant data for the browser to download. When a CSS document is downloaded, it is cached so you browser remembers you display settings and apples them to every page that references that CSS document.
This is the process of separating content from presentation. This is part of a larger discussion called Accessibility. It allows various browsers and interpreters to access the data equally. We will be discussing this in further detail later on in the course.
Web Technology
Web design requires the knowledge of the technologies behind the surface design. The more you dig into this field you will find many specialized areas that go into building a website. From project planning, to information architecture, to visual design to client-side and server-side programming.
Every visual choice you make in the design will have a technological consequence. There are two different environments that are called upon in every web page interaction.: The Client-Side and The Server-Side.
Client Side
Client-Side Technologies have to do with the users computer: The system hardware, the browser, the plugins.
- Browser
- Chrome, Firefox, Safari, IE, Opera, Netscape (each with it's own quirks). These request, retrieve and display pages from the server.
- HTML
- Hypertext Markup Language. Tag based language best used to define the structure of the content
- CSS
- Cascading Style Sheets. Used to define the visual style of the document
- JavaScript
- HTML is static, javascript makes pages dynamic. Object Oriented Programming Language
- Adobe Flash
- Used to make animations, games, banner ads, even entire websites. Requires browser plugin
- Multimedia
- Audio & Video Requires browser plugin
Server Side
Server-Side Technologies are languages the require the web server to execute before serving the requested pages to the users browser. Servers can deliver two kinds of pages: Static or Dynamic Static Pages do not require any extra server side processing Dynamic Pages run server side scripts to create dynamic data to build pages on the fly then serves them to the client
- XML
- Extensible Markup Language
- AJAX
- Asynchronous JavaScript and XML
- PHP
- Perl
Software
HTML5 is not software that has to be installed but rather a new version of the language HTML. Web browsers must support this new version of HTML in order to correctly display web pages using HTML5 functions. It is upon the developers of browsers to update their software to use HTML5; users simply must allow these updates to be done on their computers, but do not have to install additional software.
Mac
- Editors
- FTP
Windows
- Editors
- FTP
Best Practices
Programming
- Never use a space in a file name
- Never use a special character in a file name
- HTML
- user lower case for all elements, attributes, and values
- CSS
- use dashes for id and class values
class="my-class-name"
- use dashes for id and class values
- Javascript
- use camelCase for variables and function names
- Actionscript
- use camelCase for variables and function names
- PHP
- use underscore_naming for variables and function names
Directory Structure
- online - wdbv370
- hwk01
- filename.jpg
- filename.swf
- filename.html
- hwk01
- local - src
- hwk01
- filename.fla
- filename.psd
- filename.ai
- hwk01
Sublime Text 2
Installing the Package Manager
The Package Manager is a tool for discovering, installing, updating and removing packages for Sublime Text 2.
To install the Package Manager, open Sublime Text 2 and access the console using the keyboard shortcut ctrl+`. In the console, copy/paste the following command:
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')FTP Setup
Fetch
Mac only
Drexel provides a copy of Fetch for students, available to download with your student account from the IRT Software page. Sign in with your Drexel id/password and navigate to the Mac OS software.
Download and install the app, and use the Serial Number provided in the text file by IRT to register your software.
Connect and Upload
- Open Fetch. It will prompt you to enter some login info.
- For Host, type your domain name. Also type in your username and password and click OK.
- Once you have logged in, open the public_html folder. To open it, double-click it.
- Once in the public_html folder, click Put Files.
- Select the file(s) you want to upload. Then click on Choose.
- Fetch will confirm the file name that will be uploaded and saved. Click OK to upload.
- When you look under public_html, you should see the newly uploaded file.
You can also drag/drop files to and from Fetch, like you would move files in your Finder.
