Download Graphical FTP clients

Week 11
Further Web Design Concepts and Tools
FTP, CMS, Wordpress and Responsive Web
Design
File Transfer Protocol
(FTP)
•
•
•
•
FTP is the acronym for File Transfer Protocol.
As the name suggests, FTP is used to transfer files between computers on a network.
You can use FTP to exchange files between computer accounts, transfer files between an
account and a desktop computer, or access online software archives.
FTP is used to upload your completed website to a web server.
How To Use FTP
•
•
•
•
•
•
•
Graphical FTP clients
Graphical FTP clients simplify file transfers by allowing you to drag and drop file icons
between windows. When you open the program, enter the name of the FTP host
(e.g.,ftp.empire.gov) and your username and password.
Some common FTP programs includes Cyberduck, WinSCP, FileZilla and Cute FTP.
Web browser FTP
Often your web host may offer a web browser based service to connect to FTP addresses.
Using a web browser for FTP transfers makes it easy for you to browse large directories and
read and retrieve files. Your web browser will also take care of some of the details of
connecting to a site and transferring files. While this method is convenient, web browsers are
often slower and less reliable than graphical FTP clients.
Command line FTP
If you are feeling really nerdy Windows, Mac OS X, and Linux also have built-in command line
clients.
Exercise 1:Using an FTP Client
•
•
•
•
•
Links:
http://cyberduck.ch/
https://filezilla-project.org/
http://www.cuteftp.com/
http://winscp.net/eng/index.php
Content Management Systems:
•
•
•
•
•
•
•
A Content Management System (CMS) is a bundled or stand-alone application to designed
create, manage, store and deploy content on Web pages.
CMS features vary widely from system to system. Simple systems showcase a handful of
features, while other releases offer more complex and powerful functions. Most CMS include
Web-based publishing, format management, revision control, indexing, search, and retrieval
tools.
Popular content management systems include:
Wordpress ( http://wordpress.org/ )
Weebly ( http://www.weebly.com/ )
Concrete 5 ( http://www.concrete5.org/ )
SquareSpace ( http://www.squarespace.com/ )
Wordpress:
•
•
•
•
•
WordPress is a powerful semantic publishing platform, and it comes with a great set of
features designed to make your experience as a publisher on the Internet easy. It was
developed in 2003 as a blogging system, but has since developed into the most popular CMS
used today.
Wordpress Themes:
Wordpress uses themes to ‘skin’ or alter the layout and design of a wordpress site.
A WordPress Theme is a collection of files that work together to produce a graphical interface
with an underlying unifying design for a weblog. These files are called template files.
A Theme modifies the way the site is displayed, without modifying the underlying software.
Exercise 2: Installing Wordpress
1. Download the latest release of WordPress.
2. Unzip the downloaded file to a folder on your hard drive.
3. Follow the MDIM Guide found on the class blog.
Responsive Web Design:
•
•
•
•
•
•
•
Responsive web design is a concept/web design approach aimed at crafting sites to provide
an optimal viewing experience— that is easy reading and navigation with a minimum of
resizing, panning, and scrolling, across a wide range of devices (from desktop computer
monitors to mobile phones).
One way to make a design “responsive” is to use fluid, percentage-based layouts which scale
as the viewport shifts. This approach, coupled with media queries that target common device
sizes, will give you the best shot at building a robust responsive design that both looks great
and behaves as you expect across a multitude of devices.
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
EXAMPLES:
http://styletil.es/
http://stuffandnonsense.co.uk/
Responive web Design Themes with Wordpress
•
•
•
http://codex.wordpress.org/Using_Themes
http://themetrust.com/
http://inspiredm.com/10-best-new-free-and-responsive-wordpress-themes/