Egyptian Language School Computer Department Egyptian Language School 2nd prep - 1st Term 2017 / 2018

Stages of designing and creating Unit One Lesson Two Stages of designing and creating A Website

Objectives: Designing and creating a website goes through stages that can be set here: The first stage: planning to create a website. The second stage: design the web pages. The third stage: prepare and develop the web pages. The fourth stages: implement the web pages. The fifth stage: publish the website on the internet.

What are the stages to design and create a website? From the previous lesson: What are the stages to design and create a website? -How many stages we must follow to design & create a web site? 3 5 7 -We must follow them in order? No Yesssss -What’re these stages?

The Stages of designing and creating a Website are: Plan Design Prepare & Develop Implement Publish Back to the Practical classwork

Home Page Webpage#1 Webpage#2 Webpage#3 The First Stage: Planning Home Page Webpage#1 Webpage#2 Webpage#3 In this stage we draw a simple diagram of the web pages of the website, the homepage and the connected pages. Decide the information and data to be included as data or service according to the need Back to the Practical classwork

Enrichment: Questions every Web Developer should ask his client before they design a Website: Describe your target audience. What is the purpose of the website? What makes you different from your competitors? Describe the style of the website you want. Do you have specific colors that need to be used? Do you have any other materials that the site needs to match with in some way (brochures, press materials, etc.)? (enrichment) What do you like most about your current website? (theme) Are there any websites with designs that you like & hate? (browse) Where is your website hosted? (search for free hosts) Do you have full access (Owner / Designer)? Do you have a budget you are trying to meet? (enrichment) Back to the Practical classwork

The Second Stage: Designing the webpage: The most important The Second Stage: Designing the webpage: We : Design the format and shape of the homepage and other pages. The different format types are designed, the color, the background, the font size and type. Decide the place of putting text, images and video clips. Decide the different hyperlinks inside the same page and connected with other pages in the website.

The Third Stage: Preparing & Developing: This stage consists of important steps which are as follows: Prepare the text which will be added to the page using a text editor program and save it in a folder. Prepare the image files and save them in a folder. Prepare the video and sound files and save them in a folder.

All in the SAME folder

(Note: Hyperlinks could be text or picture) The Forth Stage: Implementation: This is the stage when we: Change the paper design into web page to be shown and visited on the internet with an internet browser program. (examples) Input the data, text, images, videos and so on. Create the necessary hyperlinks to connect the different pages and facilitate browsing the site. using HTML. (Note: Hyperlinks could be text or picture) Back to the Practical classwork

(Search for these: hosting & Publishing) The Fifth Stage: Publishing on the internet: This is the stage : A web address is taken The storage capacity is decided to save on one of the servers and publish the site on the internet. (Search for these: hosting & Publishing)

Practical Calsswork #2 Project intro: During the Term we’ll work on building a website to encourage tourism in Egypt, Website name: “An Eye on Egypt” Contents: # Website gives information about 5 different regions in Egypt (Coats, Deserts, Upper Egypt, Lower Egypt, and Unusual Egypt). # Website contains edited Videos, audios and photos in addition to detailed information about these regions.

(Please, each draft in a separate page in the copybook) Task#1: Homepage Planning: (Individually): Back to #1-Planning In your copybooks draw a plan for the webpage which must contain: -Logo (Unified for all the webpages of the site) -The Name of the Homepage: (“An Eye on Egypt”). -A Banner contains different photos of the required regions of Egypt. -Text#1: Explains the vision of the website. -Text#2: “Egypt in brief”: Talks about Egypt with an attractive vocabs. -Video: Contains collection of clips & audios for the regions, with effects. -Audio: Mix of Folkloric songs for each region, with effects. (Background) -Links to open a webpage for each region: Coasts, Deserts, Upper Egypt, Lower Egypt, and Unusual Egypt. 2.Suggest 2-different drafts for the homepage & draw them in your copybook. (Please, each draft in a separate page in the copybook)

Task#2: Other Webpages Planning: (Group Work) 1.Make 5 groups each contains 4 students at least. 2.Think together about the plan of assigned region webpage. (drafts in your copybooks) (Draft contains: Logo, Region Name, and Text about region, different photos from this region, videos, audios, and hyperlinks to go back to homepage) 3.In the Group sheet draw the final draft of your webpage, defining each part. (Draw it as clear & organize as you can) 4.Define the role of each member to prepare: Text, photos, videos, audios and strange (Strange: facts, places ,events, history etc. of this region)

Written Calsswork #2 First Question: Complete the following: Designing and creating a website goes through stages which are: 1. The first stage: planning to create a website. 2. The second stage: designing the web pages. 3. The third stage: preparing and develop the web pages. 4. The fourth stages: implementing the web pages. 5. The fifth stage: publishing the website on the internet Back to shape Second Question: in the stage of implementation, we 1. Change the paper design into web page to be shown and visited on the internet with an internet browser program. 2. Input the data, text, images, videos and so on. 3. Create the necessary hyperlinks to connect the different pages and facilitate browsing the site. using HTML Back to Implementation

Tip for next lesson? In Stage three in designing and creating a website, we prepare audio files. How can we create a sound file? Please, search for different audio editing software's (following searching tips explained before, and write a brief about these stages in their copybooks

Homework #2 Re-arrange the following stages of designing a website: -Implementation -Planning -Preparation -Designing (on paper as a draft) -Testing & Publishing 4 1 3 2 5 Click to go to next slide without solving the H.W.

Write the Number and the name of the stage: ………………………..We decide the different format types are designed, the color, the background, the font size and type, place of putting text, images and video clips and decide the different hyperlinks inside the same page and connected with other pages in the website. 2. …………………… We change the paper design into web page to be shown and visited on the internet with an int. browser. 3. ………………………..we draw a simple diagram of the web pages of the website, the homepage and the connected pages. 4. ………………………..We prepare the text which will be added to the page using a text editor program and save it in a folder. (2nd-Designing) (4th- Implem) (2nd-Designing) (3rd -Preparing) Click to go to next slide without solving the H.W.

Continue …. Write the Number and the name of the stage: (5th-Publishing) 5. …………………………A web address is taken and the storage capacity is decided to save on one of the servers and publish the site on the internet 6. …………………………We decide the information and data to be included as data or service needed. 7. …………………………………We create the necessary hyperlinks to connect the different pages and facilitate browsing the site. This is done using HTML codes. 8. ……………………………We prepare the image files and save them in a folder. 9. ……………………………We design the format and shape of the homepage and other pages. 10. ………………………………We Input the data, text, images, videos and audio files. 11. ………………………We prepare the video and sound files and save the m in a folder. (1st -Planning) (4th-Implementing) (3rd-Preparing) (2nd-Designing) (4th-Implementing) (3rd-Preparing) Click to go to next slide without solving the H.W.

Culture #2*: a. From the bark of which tree aspirin is extracted? b. What is the only place that the Queen of England does not enter? c. What is the real name of boxer Mohammed Ali Clay? Imagine#2: If you went back in past, which historical event you want to change and why? In Culture: You can answer only one question