Presentation is loading. Please wait.

Presentation is loading. Please wait.

What We’ll Cover  FTP - why it should be the first tool in your web developer toolbox.  HTML basics, what's involved in writing it and understanding.

Similar presentations


Presentation on theme: "What We’ll Cover  FTP - why it should be the first tool in your web developer toolbox.  HTML basics, what's involved in writing it and understanding."— Presentation transcript:

1

2 What We’ll Cover  FTP - why it should be the first tool in your web developer toolbox.  HTML basics, what's involved in writing it and understanding the basic elements of a webpage.  Cascading Style Sheets (CSS) and how they control the presentation of HTML.  Javascript and its role in user interaction, how it integrates and why it matters.  Flash and what role it plays in presentation, interaction and the ups and downs of using it.  PHP and ASP will be discussed in very general terms with an eye toward use of dynamic pages and Content Management Systems.

3 But first, some background... Basics of how the web works and how your website fits into the big picture.

4 Host User Web Page Domain Registry Domain Name Resolver IP address Internet Service Provider Domain Name Registrars HTTP request: “www.sitename.com” HTTP response Basic HTML pages – ‘flat website’ Advantages: Speed / Flexibility Disadvantages: Labor-intensive / navigation issues

5 Host User Web Page Domain Registry DNR IP address ISP Domain Name Registrars HTTP request: “www.sitename.com” HTTP response Database-driven website PHP Scripts MySQL Database “LAMP” Linux Apache MySQL PHP CMS – Content Management System WordPress Drupal Joomla many more Advantages: Automation of navigation, easy to change overall site design (‘theme’) Disadvantages: Speed / Server Load / Script conflicts (plugins)

6 FTP  FTP = File Transfer Protocol  This is the method you’ll use to move files to and from your host.  The better the tool integrates with your computer, the easier it will be to publish your site changes.  There are web-based tools but I’ve found them inefficient.  Higher-end tools like Interarchy are blazing fast and support all the special cases you’ll run into. ‘dot’ files being one of them.  Tight integration with your text editor can make editing easier.  Can be used to change file permissions.

7 Examples of FTP Programs For Mac:  Interarchy (http://nolobe.com/interarchy/)http://nolobe.com/interarchy/  Cyberduck (http://cyberduck.ch/)http://cyberduck.ch/  Transmit (http://www.panic.com/transmit/)http://www.panic.com/transmit/ For PC:  WS-FTP (www.ipswitchft.com/)www.ipswitchft.com/  FTP Explorer (http://www.ftpx.com/)http://www.ftpx.com/  Smart FTP (http://www.smartftp.com/)http://www.smartftp.com/

8 HOST FTP in the scheme of things HOST Editor on local PC Web Page FTPFTP Edit/Preview within tool Web Page FTPFTP Text editor / freestanding FTP Dreamweaver / IDE Browser View http

9 GUI EDITORS - WYSIWYG  Dreamweaver Beginners always seem to start with this. It’s a great tool. The preview isn’t quite right, it’s slow, it’s big, it’s expensive. Has a built-in FTP tool. Tight integration with Adobe CS.  FrontPage Very common starting point on PC. Solid and serviceable. Deep integration with Windows OS.  Plain-text editor Cheap. Fast. Efficient. Reliable. Trustworthy. Multi-platform. My choice – BBEdit for the Mac. Downside: not quite as ‘helpful’ as GUI apps.

10 TEXT EDITORS For Mac: BBEdit (http://www.barebones.com)http://www.barebones.com Text Wrangler (http://www.barebones.com)http://www.barebones.com SubEthaEdit (http://www.codingmonkeys.de/)http://www.codingmonkeys.de/ For PC: NotePad++ (notepad-plus.sourceforge.net/)notepad-plus.sourceforge.net/ Crimson (www.crimsoneditor.com)www.crimsoneditor.com jEdit (http://www.jedit.org/)http://www.jedit.org/

11 HTML BASICS HTML – Hyper Text Markup Language HTML is a ‘markup’ language. It consists of TAGS: This is bold - looks a lot like the pre-WYSIWYG wordprocessor ‘WordStar’. Browsers interpret and ‘present’ the markup code. Tags generally ‘open’ and ‘close’ – except for single-element tags like, and. Images and link paths can be ‘absolute’ or ‘relative’ – demo For many years HTML page design was done using the tag – in the last decade CSS (Cascading Style Sheets) support in browsers has improved to where object-oriented design techniques can be used, separating design from content and allowing site-wide design changes with minor edits.

12 HTML PAGE ELEMENTS DOCTYPE – Rendering rules for HTML HTML – Beginning of hypertext HEAD – Title / Links / Scripts / Meta BODY – The visible content of the page

13 Anatomy of an HTML page Page Title Page Banner Main Content Column Right Column Left Column Footer

14 banner footer rightcolmaincol leftcol wrapper Two cols pagewidth

15 CSS – CASCADING STYLESHEETS Definitions of STYLES for HTML Elements Rather than: Doo Dah (as inline style) Doo Dah (as line in stylesheet) p { font-size:12px; } Can also refer to DIVisions of a page. (live demo)

16 CSS Cheat Sheet

17 Javascript JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. - Wikipedia

18 JAVASCRIPT Common uses: Form validation – check user input before submission Popups Hide/show page elements Image rollover swaps Javascript can be placed in A command within a tag (MouseOver) The portion of a document An externally-referenced file Frameworks – many commons functions are available as ‘frameworks’

19 FLASH Flash allows the presentation of scalable, vector-based information. It has numerous advantages but is not intended as a primary tool for constructing general-purpose websites. Here’s a few drawbacks: How do you bookmark your location? Not supported – all navigation is absolute and programmatic. Requires an add-on to the browser. Largely supported but can be issue. Complex animations can run slowly on low-end machines, yielding low framerates and jerky display. Flash is a great tool to present an animated piece of content but care should be taken to factor in user issues if the entire site will be built in it.

20 PHP and ASP – the dynamic duo  PHP – Hypertext Preprocessor – a language designed to create HTML using programming logic  ASP – Active Server Pages – the Microsoft version of PHP.

21 Information Architecture  The blueprint that describes how information is organized and structured.  The relative position of files and folders  The ‘concept’ behind your navigation

22 Product... Product 2 Home About Contact form Products Map Staff list Links ProductsOrder Form about.html contact.html index.html links.html map.html product_list.html products (directory) product1.html product2.html. product-x.html staff.html store (directory) order.html validate.js

23 LEARNING RESOURCES HTML Tutorial (http://www.w3schools.com/html/)http://www.w3schools.com/html/ HTML Reference (http://www.w3schools.com/tags/)http://www.w3schools.com/tags/ HTML Validator (http://validator.w3.org/)http://validator.w3.org/ HTML Cheat Sheet ( ) CSS Tutorial (http://www.w3schools.com/css/)http://www.w3schools.com/css/ WestCiv CSS Guide ( ) CSS Cheat Sheet ( ) CSS Layouts Step-by-step ( ) Javascript Tutorial (http://www.w3schools.com/JS/default.asp)http://www.w3schools.com/JS/default.asp

24 TOOLS 4096 Color Wheel (http://www.ficml.org/jemimap/style/color/wheel.html)http://www.ficml.org/jemimap/style/color/wheel.html CSS Creator (http://www.csscreator.com/version2/pagelayout.php)http://www.csscreator.com/version2/pagelayout.php Layout-o-matic ( ) Little Boxes ( ) Entity Lookup ( ) Stu Nicholls (http://www.cssplay.co.uk/)http://www.cssplay.co.uk/ Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)https://addons.mozilla.org/en-US/firefox/addon/1843

25 CONTENT MANAGEMENT SYSTEMS WordPress Blogging Community – set up a free blog and get used to using WordPress in a controlled environment before ‘self-hosting’ (http://www.wordpress.com)http://www.wordpress.com WordPress Developer Community – once you have your feet wet, get your own domain name and host, then roll your own look feel (http://www.wordpress.org)http://www.wordpress.org Boulder Digital Arts courses on installing, managing and customizing (http://www.boulderdigitalarts.com/training/details.asp?offering=216)http://www.boulderdigitalarts.com/training/details.asp?offering=216 (http://www.boulderdigitalarts.com/training/details.asp?offering=217)http://www.boulderdigitalarts.com/training/details.asp?offering=217 (http://www.boulderdigitalarts.com/training/details.asp?offering=235)http://www.boulderdigitalarts.com/training/details.asp?offering=235

26 Q & A M. Douglas Wray


Download ppt "What We’ll Cover  FTP - why it should be the first tool in your web developer toolbox.  HTML basics, what's involved in writing it and understanding."

Similar presentations


Ads by Google