Differences

This shows you the differences between two versions of the page.

--- eg-259:practicals:0 [2012/01/19 10:12] – [Step 1: Install Firefox 3.6] eechris
+++ eg-259:practicals:0 [2013/01/27 12:37] (current) – [Step 4: Install LAMP platform] eechris
@@ Line 12: / Line 12: @@
-Although you can get away with a basic web browser, text editor and access to a web server, web application development is somewhat more pleasant if the text editor "knows" about the application languages to be used and you have access to tools for developing, deploying and debugging client-side and server side code. In this module, I will be advocating use of a professional quality code editing and project management tool called Aptana Studio. This is a version of the Eclipse development tool that is tuned for development of Web applications (HTML5, CSS3, PHP, Databases, Ruby on Rails).
+Although you can get away with a basic web browser, text editor and access to a web server, web application development is somewhat more pleasant if the text editor "knows" about the application languages to be used and you have access to tools for developing, deploying and debugging client-side and server side code. In this module, I will be advocating use of a new editor from Adobe called Brackets. This is a web application, written in HTML5, CSS and JavaScript that is distributed as a desktop app (for Windows and the Macintosh). It is tuned for the editing of client-side languages HTML, CSS and JavaScript but in future is likely to be supportive of the server-side too.
 The tool kit that I recommend for this module consists of:
-  * The Firefox web browser (latest version is version 9)
+  * The Google Chromium web browser (latest version is version 24)
-  * Firebug, a Firefox extension that adds sophisticated HTTP, HTML, CSS and JavaScript browsing and debugging tools to Firefox
+  * Brackets: an open source code editor for HTML, CSS and JavaScript written in HTML, CSS and JavaScript.
-  * Aptana Studio: a professional interactive development environment written in Java and designed for code development in multiple languages (we will be using Aptana Studio 3 in this module)
-  * Version 6 or 7 of the Java Development Kit (JDK) which is needed to run Aptana Studio.
-The downloading and installation of the full set of tools will take a couple of hours to complete, but as all the software is free, it will cost you nothing but time and bandwidth.
+The downloading and installation of the full set of tools will take no more than half an hour to complete, and as all the software is free, it will cost you nothing but time and bandwidth.
-==== Step 1: Install Firefox ====
+==== Step 1: Install Google Chrome ====
-Mozilla Firefox is an open-source browser that endeavours to track web standards closely and provides best-of-breed support for web standards in HTML, CSS and JavaScript. The latest version (at time of writing) is Firefox 9 and as a self-respecting web developer, you will no doubt already have Firefox installed on your desktop or laptop computer. If not then you should get a copy and luckily installation is straightforward. Simply go to the [[http://www.mozilla-europe.org/en/firefox/|Firefox home page]], press the "Free Download" button and let the install wizard run.
+Google Chrome (Chromium) is an open-source browser that endeavours to track web standards closely and provides best-of-breed support for web standards in HTML, CSS and JavaScript. The latest version (at time of writing) is Chromium 24, but as it instals updates automatically and silently in a rapid development mode, you will always have the latest version. As a self-respecting web developer, you will no doubt already have Chromium installed on your desktop or laptop computer. If not then you should get a copy and luckily installation is straightforward. Simply go to the [[https://www.google.com/intl/en/chrome/browser/|Chrome home page]], press the "Download Chrome" button and let the install wizard run.
-{{eg-259:practicals:ff-install.png|Firefox 3 Free Download button}}
+If you happen to be using a University computer that does not have Chrom installed, you can use the [[http://portableapps.com/apps/internet/google_chrome_portable|Portable Apps version of Chrome]] to install it on a USB data stick.
-If you already have a version of Firefox installed, run it and select ''Help->Check for Updates'' to see if you can upgrade to the latest version.
-Of course, if you need to use a computer on which Firefox is not installed, you have a problem.  Follow the [[eg-259:practicals:0:install-portable-firefox|link]] to see a screen cast which describes how to install Firefox on a USB data-stick so that you can run Firefox on any Windows machine to which you have access.
+If you have a Google account, you can sync all your settings, bookmarks and extensions across all your applications automatically.
 ==== Optional Step: Other Browsers ====
@@ Line 38: / Line 33: @@
 If you have a windows machine, you should upgrade to Internet Explorer 9. This is the first version of windows to feature support for HTML5 and CSS3. Depending on you application, you should also be aware of the quirks and work-arounds needed to support older versions of Internet Explorer.
-You should install Google Chrome and optionally Opera.
+You should install Mozilla Firefox and optionally Opera.
 On a Macintosh you will have Safari installed as standard and you may wish to install the Windows version.
-==== Step 2: Install Firebug ====
+==== Step 2: Explore the Developer Tools ====
-Firebug is an essential HTML/CSS/JavaScript comprehension and debugging tool that every web developer should have in his or her toolkit. Unfortunately it is designed for use with Mozilla Firefox so if you are developing for Internet Explorer, you are out of luck! The [[eg-259:practicals:0:firebug|attached link]] takes you to a screencast in which I demonstrate the firebug installation process and demonstrate its main features. You will also see Firebug used live in the lectures.
-[[eg-259:practicals:0|Back]] | [[eg-259:practicals:0#Step 3: Install Java Development Kit|Next Step]]
-==== Step 3: Install Java Development Kit ====
-The Java Development Kit is a version of Java that includes the Java Virtual Machine. Follow [[eg-259:practicals:0:install-jdk|this link]] for full installation instructions.
-==== Step 4: Install Netbeans ====
+Google Chrome, Safari and Firefox have their own built-in development tools and I will demonstrate some of these in one of the sessions to come. You may be interested in exploring the [[https://developers.google.com/chrome-developer-tools/|Chrome Developer Tools]] site for tutorials and videos to help you master these tools.
-Netbeans is a free Interactive Development Environment originally designed and developed for application development in Java but now supporting multiple languages and applications including HTML, CSS, PHP, Ruby (and Rails) and JavaScript. Whith the addition of a set of C/C++ compiler tools, it is also usable as a full-featured C/C++ development environment. Follow [[eg-259:practicals:0:install-netbeans|this link]] for installation instructions.
+[[eg-259:practicals:0|Back]] | [[eg-259:practicals:0#Step 3: Install Code Brackets Editor|Next Step]]
-==== Step 4.5 (Optional): Install Cygwin and C/C++ Development Tools ====
-Netbeans can also act as a development environment for C and C++ but to do so, it needs access to a set of compiler tools. On windows, the recommended set is the Gnu C/C++ toolset (gcc, g++, make, gdb) which is available in the cygwin package. Follow [[eg-259:practicals:0:cygwin|this link]] if you'd like to create a C/C++ development environment for your Netbeans installation.
+==== Step 3: Install Brackets Editor ====
-==== Step 5: Install LAMP platform  ====
+Brackets is a free code editor for web applications that this being developed as an open-source product by Adobe. It is actually a web application itself and the coding has been done in HTML5, CSS3 and JavaScript. The installation of Brackets is straightforward. Goto the [[http://brackets.io/|the Brackets page]] and download and run the installer. You may also wish to watch this short video from Jeffrey Way on Nettuts+ [[http://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-brackets/|A peak at Brackets]].
-See [[eg-259:practicals:1|Practical 1]].
+[[eg-259:practicals:0|Step 2: Explore the Developer Tools]] | [[eg-259:practicals:0#Step 4: Install LAMP platform|Next Step]]
+==== Step 4: Install LAMP platform  ====
+See [[https://github.com/cpjobling/eg-259-vm|A Virtual Machine for the EG-259 Module (GitHub)]]. You may wish to sign-up for a free account on GitHub and install Git, VirtualBox and Vagrant for your machine as described in the section [[https://github.com/cpjobling/eg-259-vm#getting-started|Getting Stated]] to save some time in the practical.