GET GRIP. Web Design. Advanced Apprenticeship and level 4 Practical Guide practice web design with videos and sample assignments.

Transcription

1 A GET GRIP AT Web Design Advanced Apprenticeship and level 4 Practical Guide practice web design with videos and sample assignments Page 1

2 Getting A Grip Learning Guide: Web Design - Apprentice Learning Guide 1 PART WAMPSERVER is another localhost package that helps you set and develop a site on your computer. The advantage of using WAMPSERVER is that you don t have to develop the site online, and you can check errors and any other issues with your web development, giving the opportunity to test your site as if it was online. Wamp stands for: Windows Apache My SQL PHP Download WAMPSERVER from You will see the download link on the home page, you can t miss it (Start Using WAMPSERVER). On the download 2 page, you will have a few options to choose from. Please research beforehand on the version you have to download. You might have to make arrangements with your manager or IT team. If your are apprentice it take the opportunity to research other packages such as XAMP, VAMP, Webmatrix to understand the advantages and disadvantages for each. Thake the leap and show your ability to take initiatives with your line manager. For the purpose 3 of the lesson WAMPSERVER 32bits & PHP E was selected. So select your version, and read the warnings on the screen to ensure you understand the process involved. Click on the direct link opition to download if you don t to the mailing list. On the link page click on download. Once the package is downloaded click on the.exe file 4 in your download location. Run the installation and don t 5 forget to accept the licence agreement. Time to review the Open Source Software license and copyrights while the software is installing. At the end of the 6 installation you can choose FireFox as your default browser if you want. But have also the option to set your default e- mail details just ignore for the moment. Windows XP was used for the purpose of this lesson. If you are using older operating systems, it is most likely that you will have to download the WAMPSER 32bits & PHP E. If your are using Windows 8 just go ahead and download WAMPSERVER 64bits & PHP E. Page 2

3 PLANNING A SITE WAMPSERVER is now installed on your computer, now your next step is to set you first site. But there are a few steps you need to take before you start design or development of a site. You need: To install Wordpress Check if your installation is working Decide if you want to use WAMPSERV- ER for one or more developments. 1Just launch your web server by looking in your applications launcher. This will turn on the server and let you set different projects. Check the installation of WAMPSERVER in 2 your browser. Open Google or Firefox and in the address bar just type: localhost or The browser will open your server home page. 3Now it is time to set your first web sites folders in www folder. Locate your localhost folder on your network drive or computer: C:\wamp\ www and create two folders, name the 1st one Project1 and the second one Project2. If your refresh /reload your browser window, you will now see the a new folder on the WAMPSERVER home page. If you have closed your browser open it and locate locahost ( You will see your sites folders under the Your Project sheading on the home page. Now that you are starting to experiment with working locally on a computer, they are different topics that your need to discuss in your plan. 1- You need to research different online hosting solutions for your site. With that topic in mind, research cost, but also based on your local development, you need to get an hosting solution that offers the same configurations as your localhost, if use Apache and SQL, then you have to ensure that your hosting company will offer this server type. 2- You need to know what development package you are comfortable using, CMS or Dreamweaver. When it comes to CMS, remember that WordPress is not the only solution out there you also have Joomla, Drupal and more. At this stage I advise you to test more than one now that you are learning how to develop more than one site at the same time. You plan should discuss what development solution you will be using to produce the site and why. 3- Remember that using the localhost solution is a effective way to cut cost in development, but also to test the look and feel and all the functionality of your site. Your plan must discuss how your are going to test the development. So take the opportunity to discuss why developing locally is effective. Discussing local machine development is effectively demonstrating good practice as opposed to working online. 4- Costing is a crucial factor that will make or break your project, your plan must include costs. 5- Thinks of all the headings your project plan should include: Project objectives Site aims Site long term goals Site short term goals Costs User profile Technology Schedule and Tasks Planning Phase Development Phase Testing Phase At this stage should start adding more to your plan and ensure that you have research (links, quotes) to evidence some of the points in your plan. This a level 4 to 5 course. Page 3

4 Getting A Grip Learning Guide: Web Design - Apprentice Learning Guide WAMPSERVER with WORKING WAMPSERVER is easy not as easy to use to work on multi web sites as Webmatrix. While Webmatrix is making the process of creating different projects locally, WAMPSERVER requires more setting up from your part. Advanced level apprentices and level three and above should be using and more complex system than webmatrix, as it helps develop IT skills which are vital at job interviews. You need to know how to edit and use system files safely. You can try and experiment with 1 the setting yourself but be carefull. We are going to create two site: Your personal portfolio Your Project website If you have not done it yet, launch the 2 WAMPSERVER from your application menu. This will turn your server on. To ensure that the installation went well, go to your localhost on home page using your browser. 3Now you need to access the host file in your systems directory. You need to search for it if you don t want to mess with your files and directories, use the Windows search function. The file that you are looking for is: c:/windows/system32/drivers/etc You can search for the file in your c:/drive. If you are working on a secure network you will need to get your IT team to give you directions and support to make any changes to that file once you find it. Once you have located the file open it 4 using WordPad or NotePad. Your are going to create two addresses for the two site you are going to create. Within that file you need to find the line: localhost 5Just bellow that above line you will need to configure the addresses for your projects. Just add line 1 & 2 as bellow: project project2 6Don t delete any other lines as this could change other configurations on your system. Save the document. Page 4

5 PART2 At STUDY GUIDE 7Time to check your sites configurations. Open your browser and type: If the configuration worked you should see a WAMPSER home page for the each project. You will 8 now need to download WordPress at this level of study you should be able to discuss web developments in a historical context, and be able to differentiate between the different technologies evolutions. Research both the history of the Internet and the World Wide Web. You please write a 500 words report that will be used for workshop/group discussion in our next tutorial. Topics that you should discuss in your report are: CERN Tim Berners Lee MIT UCLA ARPANET VOIP IP Although you are doing some research at home don t forget to allocate time for web design practice. Try and use WAMP, MAM., Bitnami, or Webmatrix and a Content Management System to develop your site. 9Extract the package to C:\ wamp\www\project1. Repeat the extraction to the folder c\wamp\www\project2. Page 5