Building a Website The <hr> element is most often displayed as a horizontal rule that is used to separate content. Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name=”value”. Creating an HTML page is easy as saving a notepad document, Follow the steps below to save an HTML using a simple text editor like Notepad. 1. Open notepad and create the basic HTML structure based on the following tags: Sample Code <html> <body> <p>Line-1</p> <hr> <p>Line-2</p> </body> </html> Output Line-1 Line-2 HTML Tag Attributes • <hr> Horizontal rule 2.3. Creating a Webpage The City School 51 2023-2024
2. Save the file on your computer. Select File > Save as in the Notepad menu and manually change the index.txt to index.html. Always save the first page of your web with the name index as index.html is the most common name used for the default page shown on a website if no other page is specified when a visitor requests the site. In other words, index.html is the name used for the homepage of the website. 3. After saving the file, close the notepad and double click on the file to execute. You will notice instead of opening this file in notepad it will open in your default web browser. 4. To edit the same file with text editor simply right click on the file and open with notepad. The City School 52 2023-2024
Building a Website This tag specifies that the webpage is written in HTML. It appears at the very first and last line of the webpage. It is mainly used to show that the page uses HTML5 – the latest version of the language. Also known as the root element, this tag can be thought of as a parent tag for every other tag used in the page. This tag is used to specify metadata about the webpage. It includes the webpage’s name<Title>…</Title>, its dependencies (JS and CSS scripts), font usage etc. As the name suggests, this tag contains the title/name of the webpage. You can see this in your browser’s title bar for every webpage open in the browser. Search engines use this tag to extract the topic of the webpage, which is quite convenient when ranking relevant search results. Everything the user sees on a webpage is written inside this tag. It is a container for all the contents of the webpage. Six different variations of writing a heading. <h1> has the largest font size, while <h6> has the smallest. A webpage’s content is usually divided into blocks, specified by the div tag also known as division. 2.4. Common HTML Tags <html>...</html> <head> … </head> <title> … </title> <body> … </body> <h1..h6> … </h1..h6> <div> … </div> The City School 53 2023-2024
<p> … </p> <br/> <sub> … </sub> <sup> … </sup> <b>…</b> OR <strong>…</strong> <u>…</u> <i>…</i> OR <em>…</em> <a href=“”> … </a> <img src= “” Alt/> Plain text is placed inside this tag. A line break for webpages. Is used when wanting to write a new line. Used for writing a subscript (smaller font just below the mid-point of normal font). Example: H2 O Similar to the above tag, but for superscripting. Example 12th. For making the text bold. For the underline. For making the text bold and em means to emphasize. Anchor tag. Primarily used for including hyperlinks. A tag to display images in the webpage followed by the URL or path where the image is located either on your drive or on the web. The alt tag is alternative is a contingency that if the image is not loaded from the server due to the wrong URL or non-responsive connection from server a text related to the image will appear. The City School 2021-2022 54 The City School 2023-2024
Building a Website Dreamweaver is a web development tool. It is basically for generating HTML while using an editable front end, kind of like using Word to do all your layout, and the end result is an HTML code. The idea is that you should be able to do all of your layouts visually without having to worry about the underlying generated code. Adobe Dreamweaver is one of many HTML editors. It is used to edit HTML, PHP, JavaScript, CSS and related files and can also be used to upload them to one’s Web server. Dreamweaver is considered to be a WYSIWYG (What You See Is What You Get) editor, although what you see in the program is not always an exact match of what you would see on a live page as that requires a thorough understanding of the code as well its structure. On welcome screen select HTML to open a blank HTML file and save it in a folder. Unlikely notepad Dreamweaver will save the document in HTML format. It is highly recommended to save your HTML documents in a separate folder as other documents like CSS and Images will also need to save in this folder, the reason behind this is that other external resources will be embedded through the URL and improper placements may cause malfunction of content. 2.5. Introduction to Adobe Dreamweaver 2.6. Getting Started with Adobe Dreamweaver Welcome Screen The City School 55 2023-2024
Dreamweaver Interface 2.7. Creating Webpage in Dreamweaver To add content on your webpage, we will use the design view of DW (Dreamweaver). This UI looks similar to a word processing software but there are some limitations due to the HTML code. Follow the steps below to create an HTML document about General information of Pakistan: 1. Open DW and copy-paste the text from google. 2. DW supports all the external HTML items. Therefore any data, text, and images copied from other sources will be pasted here with all the relevant formatting and hyperlinks, which might disturb the existing HTML layout, therefore while pasting external content use the Ctrl+Shift+V to Paste Special and select the option of Text only. Checkpoint A webpage can contain multiple types of scripting and programming languages such as HTML, CSS, JavaScript, Python, PHP, ASP.Net etc. WYSIWYG stands for What You See Is What You Get The City School 56 2023-2024
Building a Website 3. Add the HTML title to About Pakistan. 4. Select the text of Pakistan heading and change it to Heading 1 from the Properties option at the bottom. 5. To change the font colour of the heading, select Page Properties. A dialog box will open. From the Category menu, select Headings (CSS) and select the desired font colour. The City School 57 2023-2024
6. Once the colour is applied DW will automatically create a CSS with the name of style1 as a default action, this style can also be used to apply the same formatting to any other text as well. 7. Create a five-point bulleted list for the information of Pakistan using the Bullet option from the Properties on the bottom. 8. To add hyperlink, add a simple text Click here for more information. Copy and poste the URL in the Link section in the Properties panel at the bottom. The City School 58 2023-2024
Building a Website 9. Save the file and click on the globe icon or press F12 to preview it on the default web browser. 10. The preview would look like this: 2.8. Creating Website in Dreamweaver In a traditional website, there is a lot of content containing text, images, videos, sounds, etc. this content needs proper management to effectively use the space and also provide a clear and aesthetic look to users/viewer. Content management on a webpage can be achieved in several ways but the two most common ways are: • Tables • DIVs. Tables in HTML can be formed using the Table icon which will later ask for the The City School 59 2023-2024
properties of the table like the number of rows and column, table width, border thickness, cell padding and spacing (cell margins). The table can also have tables inside to manage the content more symmetrically, and this table is called a nested table/s. Follow the steps below to create a webpage with navigation using tables: 1. Add background colour or a background image to the page from Page Properties option on the bottom, also set the font to Verdana from the same menu so the whole text in this document should be displayed with Verdana font. These formatting will automatically add CSS in the code. 2. Add the HTML webpage title as Search Engine Database. The City School 60 2023-2024
Building a Website 3. Insert a table from Insert> Table. 4. Create a new table with 1000px width and 6 rows and 4 columns. Set cell border, cell padding, cell spacing to 0, by doing this the table will not visible and can be used only for the structure and content management. The City School 61 2023-2024
5. Select the cells of the first row, right-click to open the menu and from the menu select Table> Merge Cells or press CTRL+ALT+M after selecting the cells. 6. Insert a relevant header image to the topic in a merged cell as a header of the website. Using the insert image option by clicking Insert>Image 7. In the next line write the name of search engines in the centre of the cells columnwise: Google, Bing, Yahoo and Baidu and also create a link to each of them to their respective websites. To center align the text, hilight the text and right click. Select Align>Left. The City School 62 2023-2024
Building a Website 8. Change the font color to white by clicking on the Page Properties option. 9. Download the logos of these search engines and place them in the third row. Images can be inserted from Insert>Image. Resize the image size to your desired size. To align the images, right click the image and select the desired alignment 10. To hyperlink the images with the relevant websites, select the image and enter the search engine’s URL in the Link section in Properties panel. The City School 63 2023-2024
11. Merge the remaining columns and insert some relevant information about each search engine. HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player. Dreamweaver supports code hints for adding video and audio tags. 2.9. Inserting Media with HTML5 Inserting Sound with HTML5 Follow these steps to embed an Audio element in an open Dreamweaver CS5 HTML web page: 1. To insert audio, go the to Split View in the Dreamweaver. The City School 2021-2022 64 The City School 2023-2024
Building a Website 2. In Split view, place your cursor after the opening <body> tag, and press Enter to create a new line of code. Type <au and then press Tab to complete the beginning of the <audio> tag. 3. Press the spacebar and double-click src in the pop-up list. 4. Press the spacebar and double-click src in the pop-up list. The City School 65 2023-2024
5. Next, we’ll add a parameter to display a controller (player) for the audio. Press the spacebar, and double-click controls from the code hints. In HTML or on the website, the videos can be placed by two methods. Either we embed the video from an external website like YouTube or we can place the video along with our website. Embedding a video from YouTube is always recommended as it does not occupy space on our server and it does not affect the traffic of our website. 1. Access the video which you want to embed in HTML. the text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element. <audio> can be used to play sound files in the following formats: • .mp3: Supported by all modern browsers. • .wav: Not supported by Internet Explorer. • .ogg: Not supported by Internet Explorer and Safari. • audio can be placed like an object similar to images or text in DIV or Table. Important to note: Inserting Video with HTML5 Embedding video from YouTube The City School 66 2023-2024
Building a Website 2. Click on share and then click on Embed. 3. YouTube will automatically give you the code for embedding, add that code to your HTML and resize height and width from the iframe code if necessary. To embed video using the video tag, it is important to have downloaded on your computer. Enter the following code in the Split view. Embedding Video using <video> tag The City School 67 2023-2024
Important to note: • the controls attribute adds video controls, like play, pause, and volume. • it is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. • the <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. • the text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element. • video can be placed like an object similar to images or text in DIV or Table. 2.10.Getting Started with CSS CSS stands for Cascading Style Sheets, CSS describes how HTML elements are to be displayed in web browsers, CSS typically creates design profiles for any HTML element for reuse and overall layout control of the document layout. There are three methods of CSS integration in HTML: • inline CSS • internal CSS • external CSS. A CSS rule consists of a selector and a declaration block: The selector points to the HTML element to style (h1). The declaration block (in curly braces) contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. h1 { color : blue ; font-size : 12px; } selector Declaration property value property value CSS = Styles and Colors Manipulate Text Colors, Boxes The City School 68 2023-2024
Building a Website Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a powderblue background color: The City School 69 2023-2024
2.11. CSS with Dreamweaver CSS can be added and edit using GUI of DW as well and DW will automatically add the CSS code respectively. Follow the steps below to add CSS using GUI of DW: 1. Start DW with a new HTML document. Right-click on the blank area of CSS Styles panel which is usually located on the right side and click New. 2. Select Tag from the Selector Type drop-down list. Select h1 from the Selector Name drop-down list. This will add the style to the Heading1 of the document. Click OK. The City School 70 2023-2024
Building a Website 3. The next window that pops up, allows you to define CSS rule definition for heading-1 i.e. About Pakistan. The Category panel on the left provides different options to work with. For this example we will add CSS rule definition to the Type category. 4. After defining the properties of CSS, it will be added and available in CSS Style Panel on the right side for further editing and addition. By clicking on Add Property option more properties can be added for the whole class. 5. By clicking on the Split view, you can see the underlying CSS code to style heading-1. You can style the other HTML tags in the similar manner. The City School 71 2023-2024
2.12. Creating Web Forms Creating Web Forms Using Dreamweaver A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product or can be used to retrieve search results from a search engine. One of the most common and important uses of web forms in a website is the Contact Form in which developers or site owners ask the relevant information from the user to contact them in terms of sales or technical support. Follow the steps below to create a contact form: 1. Create a new HTML document and set any desired from the page properties panel. Enter the contact us text as a heading using H1 heading. Checkpoint CSS stands for Cascading Style Sheets An inline CSS is used to apply a unique style to a single HTML element. An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The City School 72 2023-2024
Building a Website 3. Create a table of 10 rows and 2 columns while setting its cell spacing to 4, border and padding to Using a table to manage the forms elements is highly recommended for place management. Recommended width 500px. 4. On the left column, we will enter the title of information required such as name, address etc. whereas on the right side we will enter the form elements. 5. The first element we will insert is a text field. Click on this button and another will appear with numerous information required: • ID: information is used to program the form text field with programming languages like PHP, JavaScript etc. 2. From the Insert option, click on Forms Tab and insert the form to let the HTML knows that this is the form area. After clicking on this button, a red dashed line will appear to represent that this is the form area, from this point onward we will be working inside the <form> tag. The City School 73 2023-2024
• Label: information is used to place the title along with form element, but in this case, we are already using the table, therefore, no need to fill in the label information and also select the option of “No Label tag”. • The access key: is used to assign a specific hotkey to directly shift the cursor focus by pressing Alt+“Access Key”. • Tab index: is the sequence of cursor focus, if we enter 3 over here then the cursor will focus this specific text field on the third press of the TAB key. 6. The next form element we will enter is List/Menu to create a drop-down list for selecting an option from a list given. HTML tag for form list is <select> </select>. 7. The number of list item can be inserted from List Values… button on the bottom from the properties panel, click on the List Values… button and another window will appear, click on the + icon to add the list menu items. The City School 74 2023-2024
Building a Website 10. The next form element is the Text area. Text area works like a simple text field but it can accommodate more words than a normal text field and its layout is like a paragraph. 8. The next form element is Radio buttons, the function of a radio button is to get one single answer from the multiple choices given. 9. The next form element is checkboxes, the function of checkboxes is to get multiple answers from the multiple choices given. The City School 75 2023-2024
11. Buttons are the action element of form to submit or reset the form. 12. Preview your form in the web browser. The City School 76 2023-2024
1. A web page or webpage is a document commonly written in HTML (Hypertext Mark-up Language) that is accessible through the Internet or other networks using an Internet browser. 2. Hypertext Mark-up Language (HTML) is the standard mark-up language for documents designed to be displayed in a web browser. 3. A paired tag consists of two tags, the first one is called an opening tag and the second one is called closing tag. 4. An Unpaired tag is a single tag which does not need a companion tag. 5. Attributes define additional characteristics or properties of the element such as width and height of an image. 6. Dreamweaver is a web development tool. It is basically for generating HTML while using an editable front end. 7. Content management on a webpage can be Tables and DIVs. 8. CSS stands for Cascading Style Sheets. It typically creates design profiles for overall document layout. 9. An inline CSS is used to apply a unique style to a single HTML element. 10. An internal CSS is used to define a style for a single HTML page. 11. A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. My Notes! Let’s Review The City School 2020-2021 77
The Pew Research Center recently released a study about how adults use social media, which made us wonder how teens and adults stack up when it comes to social media use. Teenagers today grow up in a digital world, so it is no surprise that they are pretty savy when it comes to all things online and technology. Surprisingly, though, when it comes to early adoption of newer social mediums like Pinterest and Instagram, adults seem to have teens beat, if only slightly. 72% 81% Adults Teens Who uses which social media network most? Adults V/S Teens Teens seem to dominate the traditional social networks like Facebook and Twitter, while adults use Instagram, Tumblr and Pinterest more than teens 6% 5% Tumblr 13% 11% Instagram 1% 15% Pinterest 67% 94% Facebook 26% 18% Twitter Adults Teens
Student Learning Outcomes ISTE Student Standard Coverage 1. Understand Data and Network Security (WEP, WPA, WPA2) 2. Understand how the Internet works 3. Understand Computer Networks (LAN, WAN, MAN, Wireless, 3G, 4G & 5G) 4. Understand Digital Citizenship (Personal data, intellectual property law, license, freeware and shareware) 5. Familiarize with cloud storage and cloud services 6. Use different services of Google Suite After going through this chapter, students will be able to: Empowered Learner Creative Communicator Global Collaborator Digital Citizenship 1b 2b 6d 7b 7d All About Cloud
A network, in computing, is a group of two or more devices that can communicate. In practice, a network is comprised of several different computer systems connected by physical and/or wireless connections. The scale can range from a single PC with some basic peripherals to massive data centres located around the World, to the Internet itself. Regardless of scope, all networks allow computers and/or individuals to share information and resources. Computer networks serve many purposes, some of which include: 3.1. What is a Computer Network @ Communications such as file transfer, email, instant messaging, chat rooms, etc. Shared hardware such as printers and input devices. Shared data and information through the use of shared storage devices. Shared software, which is achieved by running applications on remote computers. The City School 80 2023-2024
All About Cloud 3.2. Network Topology and Type 3.3. Types of Area Network Network Topology is the schematic description of a network arrangement, connecting various nodes (sender and receiver) through lines of connection. Networks can be arranged in three ways: • Star topology • Bus topology • Ring topology • Star topology: All computers and devices are connected to a network switch and this is one of the common topologies nowadays. • Bus topology: In this arrangement computers and devices are connected to a single linear cable called a trunk. • Ring topology: Computers and devices are connected to a closed-loop cable. The Network allows computers to connect and communicate with different computers via any medium. LAN, MAN and WAN are the three major types of the network designed to operate over the area they cover. There are some similarities and dissimilarities between them. One major difference is the geographical area they cover, i.e. LAN covers the smallest area; MAN covers an area larger than LAN and WAN comprises the largest of all. The City School 81 2023-2024
LAN - Local Area Network: WAN - Wide Area Network: LAN is an interconnection of computers and its related devices within a small geographical area or a building, home, office, school, where the distance between the computers is small. Mostly the LANs are built to share vital resources such as printers and exchanging files. LAN is also used in providing other services such as sharing applications, games, files, accessing the Internet. A speed of LAN is higher than WAN i.e. 1000 Mbps. Ownership of this network is private and maintained by a single organization. WAN is a computer network that covers broad and large areas such as small towns and cities. The design and maintenance are more difficult than LAN. Ownership of the network can be private or public as well. WANs are very complex to manage by private administrators and they usually have public ownership. WAN is a connection between multiple geographic locations which is composed of multiple LAN’s. The best example of a WAN is the Internet which connects many smaller LANs and MANs through ISPs. A speed of WAN is comparatively low than LAN i.e. 150 Mbps. It ranges up to 10000 Km. WANs are more congested than LANs. WANs have a lower data transfer rate compared to LANs. The City School 82 2023-2024
All About Cloud 4G Network 5G Network 4G is the fourth generation of broadband cellular network technology, succeeding 3G. Potential and current applications include amended mobile web access, IP telephony, gaming services, highdefinition mobile TV, video conferencing, and 3D television. 5G is the fifth generation of mobile networks, a significant evolution of today’s 4G LTE networks. 5G has been designed to meet the very large growth in data and connectivity of today’s modern society, The Internet of things with billions of connected devices, and tomorrow’s innovations. 5G will initially operate in conjunction with existing 4G networks before evolving to fully standalone networks in subsequent releases and coverage expansions. 1. You either type an address (URL) into your address Bar or click on a hyperlink. 2. Your browser sends a request to your ISP server asking for the page. When the browser sends a request to the ISP the following information is transferred from user PC: • Web Page Request • User ID • IP Address 3. The ISP server forwards the request to the country’s gateway. After receiving the user request, the ISP transmits the following information to the country’s gateway: • Web Page Request • User ID • IP Address • ISP ID 4. The host server sends the requested page back to the country gateway and similarly, the country gateway sends the page back to the concerned ISP server. 5. Your ISP sends the page to your browser and you see it displayed on your screen. 3.4. How Does the Internet Work The City School 83 2023-2024
The Internet is a worldwide network of computers linked together by telephone wires, satellite links and other means. All computers on the Internet can be divided into two categories: servers and browsers. 3.5. Internet Functions 3.6. Communication Links Server: are where most of the information on the Internet lives. These are specialized computers which store information, share information with other servers, and make this information available to the general public. Browser: ISP servers receive requests from browsers to view web pages, check email, etc. As each server cannot hold all the information from the entire Internet, so in order to provide browsers with the pages and files they ask for, ISP servers must connect to other Internet servers. This brings us to the next common type of server: the Host Server. 1. Dialup connection 2. DSL Connection 3. Cable Net (Coaxial Cable) 4. Fibre-Optic 5. Satellite Links Checkpoint Star topology: computers and devices are connected to a network switch Bus topology: computers and devices are connected to a single linear cable Ring toplogy: computers and devices are connected to a closed-loop cable. The City School 84 2023-2024
All About Cloud 3.7. Data and Network Security WEP-Wired Equivalent Privacy WPA-Wired Protected Access Wi-Fi Protected Access (WPA), Wi-Fi Protected Access II (WPA2), and Wi-Fi Protected Access 3 (WPA3) are three security protocols and security certification programs developed by the Wi-Fi Alliance to secure wireless computer networks. Different types of wireless security protocols were developed for home wireless networks protection. Not only do the wireless security protocols prevent unwanted parties from connecting to your wireless network, but also encrypt your private data sent over the airwaves. WEP was developed for wireless networks and approved as a Wi-Fi security standard in September 1999. WEP was supposed to offer the same security level as wired networks, however, there are a lot of well-known security issues in WEP, which is also easy to break and hard to configure. Despite all the work that has been done to improve the WEP system it still is a highly vulnerable solution. For the time the 802.11i wireless security standard was in development, WPA was used as a temporary security enhancement for WEP. One year before WEP was officially abandoned, WPA was formally adopted. Most modern WPA applications use a preshared key (PSK), most often referred to as WPA Personal, and the Temporal Key Integrity Protocol (TKIP) for encryption. WPA Enterprise uses an authentication server for keys and certificates generation. Still, WPA2, WPA’s newest version, is more secure and even better than WPA. WPA2 is the latest and strongest wireless security and encryption standard. Almost all modern routers support it and you should definitely use this option to protect your home network. $ The City School 85 2023-2024
3.8. Understanding Digital Citizenship Personal Data Personal data, also known as personal information, personally identifying information (PII), or Sensitive Personal Information (SPI) is any information relating to identifying a person. Some examples of PII are: We must never give our name, address, telephone number or other personal data to strangers or unknown websites to avoid identity theft or to protect our financials. • Names: your full name, your maiden name, and your mother’s maiden name • Personal ID numbers: NIC#, driver’s license#, passport#, patient ID#, taxpayer ID# etc • Addresses: your street address and email address • Biometrics: retina scans, fingerprints, facial geometry, or voice signatures, Vehicle ID or title numbers • Technology asset information: Media Access Control (MAC) or Internet Protocol (IP) addresses that are tied to a certain individual. You probably have heard that it is important to be a good citizen. So, what would it mean to be a good digital citizen? The word digital refers to any type of technology that you use. • If you are a citizen, this means you belong to a group of people. So you could be a citizen of your classroom or your neighbourhood. • Being a digital citizen means you are a part of the group of people that use technology to communicate. • There are rules that you need to follow when you are a digital citizen, to protect yourself and to protect others. Adnrea Bilarosa The City School 86 2023-2024
All About Cloud Intellectual Property (IP) Intellectual Property Law (IP) Software Licensing Freeware It is a category of property that includes intangible creations of the human intellect. There are many types of intellectual property, the most well-known types are copyright, patents, trademarks, industrial design rights, plant variety rights etc. It is the area of law that deals with legal rights to creative works and inventions. It controls who gets to use creations including new products, artistic works and designs. The purpose of intellectual property law is to allow the people who create and invent things to profit from their work. Lawmakers believe that it is fair for creators to profit from their own work product. Software licenses typically provide end-users with the right to one or more copies of the software without violating copyrights. The license also defines the responsibilities of the parties entering into the license agreement and may impose restrictions on how the software can be used. Software licensing terms and conditions usually include fair use of the software, the limitations of liability, warranties and disclaimers and protections if the software or its use invades on the intellectual property rights of others. Freeware is software, most often proprietary, that is distributed at no financial cost to the end-user. There is no agreed-upon set of rights, license, or EULA that defines freeware unambiguously; every publisher defines its own rules for the freeware it offers. For instance, modification, redistribution by third parties, and reverse The City School 87 2023-2024
Shareware engineering without the author’s permission are permitted by some publishers but prohibited by others. Unlike with free and open-source software, which are also often distributed free of charge, the source code for freeware is typically not made available. Shareware is a type of proprietary software which is initially provided free of charge to users, who are allowed and encouraged to make and share copies of the program. Shareware is often offered as a download from a website or as a compact disc included with a magazine. There are numerous platforms which offer shareware like GitHub, Stack Overflow, Source Forge etc Cloud storage is a model of computer data storage in which the digital data is stored in logical pools. The physical storage spans multiple servers (sometimes in multiple locations), and the physical environment is typically owned and managed by a hosting company. These cloud storage providers are responsible for keeping the data available and accessible, and the physical environment protected and running. People and organizations buy or lease storage capacity from the providers to store user, organization, or application data. The widespread cloud services are Google Drive, One Drive, DropBox, Media Fire, Mega.nz, pCloud, iCloud, Amazon Drive etc. 3.9. Cloud Storage The most popular at the moment are iCloud on Mac, and Dropbox, both of which attract an impressive 300 million users to their platforms. 88 The City School 2023-2024
All About Cloud Disadvantages of Cloud Storage • It needs an Internet connection: if you find that you urgently need to access your files and don’t have an Internet connection or have a very slow one, then this could lead to delays. • Security: if you don’t use strong passwords or if the cloud service is not secure enough, you may face security issues. • Unavailability risks: although very rare, the cloud service may be temporarily unavailable, perhaps when you most need it. Another slight risk is that the company offering the service might go out of business and you may lose your data. Advantages of Cloud Storage • Data safety: your files are protected against physical disasters because they are stored in multiple remote servers. This means that you don’t have to worry if your hard drive fails. • Access your data from anywhere: no need to transfer files across your computers with USB drives anymore. • Sharing & collaboration: you can easily send a link to one of your files to all your friends and they can download it. You can also share entire folders, which enables you to work collaboratively on group projects via the Internet. • Cost-Effective: reduced energy costs, a significant portion of an organization’s energy bill stems from server power consumption and maintenance is reduced. The City School 89 2023-2024
G Workspace, also known as Google Suite or G Suite, is a collection of business, productivity, collaboration, and education software developed and powered by Google. The primary G Suite tools include Gmail, Drive, Docs, Sheets, Slides, Forms, Calendar, Google+, Sites, Hangouts, and Keep. The newest cloud-based storage system, Google Drive allows users to store files on their servers, synchronize files across devices, and share files. In addition to a website, Google Drive offers apps with offline capabilities for Windows and MacOS computers, and Android and iOS smartphones and tablets. Google Drive encompasses Google Docs, Google Sheets, and Google Slides, which are a part of an office suite that permits collaborative editing of documents, spreadsheets, presentations, drawings, forms, and more. Files created and edited through the office suite are saved in Google Drive and can be downloaded to a device in numerous formats especially which are compatible with Microsoft office. 3.10.Getting Familiar with Google Workspace 3.11. Google Drive Accessing Google Drive There are a few methods in which we can access Google Drive. The easiest way is by using the Chrome browser. In Chrome, we click on a new browser or a new tab, we will be presented with the following page. From here click on next to your profile icon. The City School 90 2023-2024
All About Cloud To use Google Drive, we are required to have a Google account. If you already own a Google account then just continue with signing in, for those of us who have yet to create an account, we will continue with signing up for Google account. 1. On the Google Drive welcome page, click on Go to Drive button. You will be redirected to the sign-in page. Sign-in with your Google account, if you already have one. Alternatively, click on Create account. 2. You can either create account for personal use or to manage your business. 3. Fill out the information on the signup page and click Next. Signing up for a Google Account The City School 91 2023-2024
4. On this page, all the information is required except for the field mobile phone and your current email address. Both these fields will only be used for security purposes such as when you would like to prove that you are the owner of the account. There are cases where an account was hacked. To get the account back, Google would ask you to verify that you are the owner by sending messages or an email to the phone number and email address provided. It is recommended that you fill in both these fields but it does not have to be filled during registration and you can always fill them up later. 5. Once we have completed the form, please make sure you click on the I agree button or you will not be able to submit. Verify that all information is correct and submit the form. 6. After submitting the form, you would be redirected to Google Drive page. The City School 92 2023-2024
All About Cloud 3.12. Getting Started with Google Docs Google doc User interface of Google Docs, Spreadsheet and Slides Google Docs is an online version of Microsoft Word, PowerPoint and Excel. In Google Docs they are called Google Document, Spreadsheet and Presentation. After we complete our registration, we will be directed to the following Google Drive page: 1. On the left is the folder view which shows any files shared with us, starred files and recently modified files. 2. At the top is the menu bar i.e. My Drive, contains options such as creating new folders and files. 3. The centre is the area where files in the Drive will be displayed, but since we do not have any files yet, this shows information about Google Drive. The City School 93 2023-2024
Adding Files to Google Drive Google spreadsheet Google slides Google has always intended to make its product user friendly and therefore using Google Drive and Google Docs is much easier than most cloud storage solutions. To add a file to Google Drive, click on the My Drive button and choose the option to create a new folder or to create any office document. The City School 94 2023-2024
All About Cloud Whereas if you need to upload an existing file in your google drive simply drag and drop the file in that folder or root to begin your upload. Alternatively, you can upload file or folders by selecting Upload File or Upload Folder option from My Drive drop-down menu. After uploading the file, we can also share that file or data with anyone specific or can create a public link to share without any restriction. To do that right-click on the file and select share option. The City School 95 2023-2024
In the sharing window there will be two procedures to share the file. We can share this file to an individual by entering the email address of the recipient or we can click on the Copy Link button to get a shareable link. You can either allow certain members to have access to your files or folders by selecting Restricted option or you can allow anyone with the link to have access to your files. Restricted: when you change a link’s setting to Restricted, the only people who can still see the file or folder are those you have directly shared with in the ‘Share with people and groups’ section. Anyone with the Link: allows your document to be accessed by any person who has the URL of the file or the folder. The City School 96 2023-2024
All About Cloud Real Time Collaboration Google Drive lets multiple people in different locations collaborate simultaneously on the same file from any computer with Internet access. When someone is viewing or editing something at the same time as you, you’ll see a coloured tile with their name in the top right of your screen. Google Translate is a free multilingual machine translation service developed by Google, to translate text. It also offers a website interface for mobile apps for Android and iOS, and an API that helps developers build browser extensions and software applications. Google Translate supports over 100 languages at various levels and serves over 500 million people daily. To access Google Translate use the URL: translate. google.com or search on google for google translate. 3.13. Google Translate The City School 97 2023-2024
You can translate text in photos you’ve already taken. You can also take a new photo in the Translate app and translate text on the new photo. 1. On your Android phone or tablet, open the Translate app. 2. Pick the languages. • At the top left, choose the language you want to translate or Detect language. • At the top right, choose a language you read. 1. Enter text for translation 2. Select source language 3. Select the language translation 4. Switch the language 5. Input through speech and hear the input 6. Hear the translation 7. Copy the translation 8. Share the translation Google Translate Text from Photos Checkpoint Software licenses provides end-users with the right to one or more copies of the software without violating copyrights. Freeware is software, is distributed at no financial cost. Shareware is initially provided free of charge to users, who are allowed and encouraged to make and share copies of the program. The City School 98 2023-2024
All About Cloud 3. Beneath the text box, tap Camera • To translate the whole text instantly, tap Instant Instant. • To translate part of the document: a. Tap Scan and then Capture . b. Use your finger to highlight the text you want to translate, or tap Select all. • To choose an existing photo to translate, at the bottom right, tap Import . 4. Use your finger to highlight the text you want to translate, or tap Select all. 3.14.Google Maps Google Maps is a web-based service that provides detailed information about geographical regions and sites around the world. In addition to conventional road maps, Google Maps offers aerial and satellite views of many places. In some cities, Google Maps offers street views comprising photographs taken from vehicles. To access Google Maps on a desktop, use the URL: google. maps.com or search on Google for Google Maps. Google Maps offers several services as part of the larger Web application, as follows: • A route planner offers directions for drivers, bikers, walkers, and users of public • transportation who want to take a trip from one specific location to another. • The Google Maps application program interface (API) makes it possible for web site administrators to embed Google Maps into a proprietary site such as a real estate guide or community service page. • Google Maps for Mobile offers a location service for motorists that utilizes the Global Positioning System (GPS) location of the mobile device (if available) along with data from wireless and cellular networks. • Google Street View enables users to view and navigate through horizontal and vertical panoramic street-level images of various cities around the world. • Supplemental services offer images of the moon, Mars, and the heavens for hobby astronomers. The City School 99 2023-2024
Types of Maps Google Maps is a web-based service that provides detailed information about geographical regions and sites around the world. In addition to conventional road maps, Google Maps offers aerial and satellite views of many places. In some cities, Google Maps offers street views comprising photographs taken from vehicles. Google Maps offers several services as part of the larger Web application, as follows: Roadmap: this is the default type. It shows the street view of the selected region. Satellite: this is the map type that shows the satellite images of the selected region. Terrain: this is the map type that shows the terrain and vegetation. To switch to a particular map type, click on the top left corner. The City School 100 2023-2024