Menu toggle

Software

Web Development Tools

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.


Sublime Text 2

The primary editor being used during class is Sublime Text 2. Here are some helpful links for setting up and customizing the editor:

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')

Theme & Color Scheme & Settings

{
	"auto_complete": true,
	"auto_complete_commit_on_tab": true,
	"auto_complete_with_fields": true,
	"bold_folder_labels": true,
	"caret_style": "phase",
	"detect_slow_plugins": false,
	"draw_white_space": "all",
	"fade_fold_buttons": true,
	"font_face": "Courier New",
	"font_options": "subpixel_antialias",
	"font_size": 14,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"rulers":
	[
		80,
		120
	],
	"scroll_past_end": true,
	"tab_size": 2,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true,
	"wrap_width": 120
}
					

Suggested Packages

  • Alignment
  • ApplySyntax
  • AutoFileName
  • Emmet
  • FileDiffs
  • Package Control
  • Side Bar
  • Trailing Spaces
  • SublimeLinter

Helpful Fetch Settings

{
	"files":
	{
		"Eric-Meyer-Reset": "http://meyerweb.com/eric/tools/css/reset/reset.css",
		"html5shiv": "https://raw.github.com/aFarkas/html5shiv/master/dist/html5shiv.js",
		"jquery": "http://code.jquery.com/jquery.min.js",
		"modernizr": "https://raw.github.com/Modernizr/Modernizr/master/modernizr.js",
		"picturefill": "https://raw2.github.com/scottjehl/picturefill/master/picturefill.js",
		"respond": "https://raw.github.com/keithclark/Respond/master/respond.min.js"
	},
	"packages":
	{
		"Twitter Bootstrap": "https://github.com/twitter/bootstrap/zipball/master",
		"WordPress": "http://wordpress.org/latest.zip",
		"html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
		"pjs-starter": "https://github.com/philsinatra/pjs-starter/zipball/master"
	}
}
					

Adobe Brackets

  • Developer Site
  • Features
  • Essential Plugins
    • Beautify
    • Code Folding
    • colorHints
    • Delete to Line Start/End
    • Emmet - Docs
    • Indentator
    • Markdown Preview
    • Quick Search
    • Special Html Characters
    • spell-check
    • String Convert
    • Strip trailing spaces
    • SVG Preview
    • W3CValidation

Brackets


FTP Setup

fetch

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

  1. Open Fetch. It will prompt you to enter some login info.
  2. For Host, type your domain name. Also type in your username and password and click OK.
  3. Once you have logged in, open the public_html folder. To open it, double-click it.
  4. Once in the public_html folder, click Put Files.
  5. Select the file(s) you want to upload. Then click on Choose.
  6. Fetch will confirm the file name that will be uploaded and saved. Click OK to upload.
  7. 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.


FileZilla

FileZilla


dreamweaver

Dreamweaver

Map your site in Dreamweaver

manage sites

1. Go to the Site menu and click on Manage Sites

manage sites window

2. In the window that pops up, click on the New… button, and click on Site in the sub-menu that pops up

site name

3. Go over to the Advanced tab in the new window.
4. Complete all the information on the Local Info option.

  • Enter a name into the Site name input box
  • Enter the absolute path to the directory where the content is stored on your computer, locally. You can also use the folder icon next to the input box to browse to the directory

manage sites

5. Go to the Remote Info option and fill out all the information

  • At the Access drop down box, select FTP
  • In the FTP Host text box, enter yourwebsite.com
  • Enter the host directory (/public_html/)
  • Enter your ftp username and password information
  • Click the Test button to verify the information you entered is correct.
  • IF you have trouble, try checking the Use Secure FTP (SFTP) check box
  • Click the Ok button to exit the window and save the new site configuration.

site name

6. Upload your files to the server

  • Select the root folder in the Files sub-window
  • Click the Put (the up arrow) button to upload the files to the server
  • Enter your ftp password if prompted if you did not tell Dreamweaver to save your password when you set up the site.