Empowerment Technologies Web Page Design Using Templates and Online WYSIWYG Platforms PDF

Empowerment Technologies Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms CO_Q1_Empowerment Technologies SHS Module 10 Empowerment Technologies Alternative Delivery Mode Quarter 1 – Module 10: Web Page Desig...

Empowerment Technologies Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms CO_Q1_Empowerment Technologies SHS Module 10 Empowerment Technologies Alternative Delivery Mode Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms First Edition, 2020 Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the Government of the Philippines. However, prior approval of the government agency or office wherein the work is created shall be necessary for exploitation of such work for profit. Such agency or office may, among other things, impose as a condition the payment of royalties. Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.) included in this module are owned by their respective copyright holders. Every effort has been exerted to locate and seek permission to use these materials from their respective copyright owners. The publisher and authors do not represent nor claim ownership over them. Published by the Department of Education Secretary: Leonor Magtolis Briones Undersecretary: Diosdado M. San Antonio Development Team of the Module Writers: Ericelle Bianca A. Baltazar Editors: Analisa I. Panaligan Reviewers: Lorena J. Mutas Illustrator: Ericelle Bianca A. Baltazar Layout Artist: Melody Zulaybar De Castro Management Team: Malcom S. Garma, Director IV Genia V. Santos, CLMD Chief Dennis M. Mendoza, Regional EPS In-Charge of LRMS Micah S. Pacheco, Regional ADM Coordinator Loida O. Balasa, CID Chief Grace R. Nieves, Division EPS In-Charge of LRMS Lorena J. Mutas, Division ADM Coordinator Printed in the Philippines by ________________________ Department of Education – National Capital Region Office Address: ____________________________________________ Misamis St., Bago Bantay, Quezon City ____________________________________________ Telefax: 02-929-0153 ____________________________________________ E-mail Address: ____________________________________________ [email protected]  Empowerment Technologies Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms Introductory Message This Self-Learning Module (SLM) is prepared so that you, our dear learners, can continue your studies and learn while at home. Activities, questions, directions, exercises, and discussions are carefully stated for you to understand each lesson. Each SLM is composed of different parts. Each part shall guide you step-by- step as you discover and understand the lesson prepared for you. Pre-tests are provided to measure your prior knowledge on lessons in each SLM. This will tell you if you need to proceed on completing this module or if you need to ask your facilitator or your teacher’s assistance for better understanding of the lesson. At the end of each module, you need to answer the post-test to self-check your learning. Answer keys are provided for each activity and test. We trust that you will be honest in using these. In addition to the material in the main text, Notes to the Teacher are also provided to our facilitators and parents for strategies and reminders on how they can best help you on your home-based learning. Please use this module with care. Do not put unnecessary marks on any part of this SLM. Use a separate sheet of paper in answering the exercises and tests. And read the instructions carefully before performing each task. If you have any questions in using this SLM or any difficulty in answering the tasks in this module, do not hesitate to consult your teacher or facilitator. Thank you.  What I Need to Know This module was designed to start you on a path towards future studies in web development and design, no matter how little experience or technical knowledge you currently have. The module mainly focuses on one lesson: 1. Lesson 1 – Web Page Design Using Templates and online WYSIWYG Platforms Learning Competencies: Create an original or derivative ICT content using online creation tools, platforms, and applications to effectively communicate messages related to specific professional track. This module outline provides a summary of topics that can be used as a guide when progressing through this module, and upon its successful completion, you are expected to: 1. define WEB PAGE DESIGN and its basic elements; 2. identify the different web templates and WYSIWYG platform; and 3. design a website using an online WYSIWYG platform. 1 CO_Q1_Empowerment Technologies SHS Module 10  What I Know Directions: Choose the best answer for each question. Write the letter of your answer on a separate sheet. 1. What does the HTML pages’ editor (WYSIWYG) allow you to do? a. read errors from the browser c. produce a document b. create and edit website pages d. develop an online system 2. What does WYSIWYG acronym stand for? a. What you see is where you go c. What you see is what you get b. What you see is what you need d. What you see is what you sign 3. Which of the following programs is used by web clients to view the web pages? a. Web browser c. Web server b. Protocol d. Search Engine 4. What are shared on the internet and are called as web pages? a. Program c. Hypertext Documents b. Cables d. None 5. What is the language that instructs the browser on how to display the hypertext, and adds pictures to the document? a. C Language c. HTML b. Cobol d. Visual Basic 6. Which of the following is an advantage offered by WYSIWYG online editors for creating a Web site? a. Ready templates c. creating own design b. coding practice d. designing the web structure 7. Which of the following is a component of functional design principles for web sites? a. Accessibility c. readability b. Design d. Structure 8. You received some complaints that your website is not easy to read. You notice that most of the content is centered on the page. Which aesthetic principle should you use to increase your website’s readability? a. color c. accessibility b. alignment d. repetition 9. Where should the navigation be on a website? a. Inside the toolbars b. On the center side of the page c. On the right side or down at the bottom d. At the top and down the left side of the page 10. Which website builder enables you to create Web pages directly and update the site without the need of uploading files? a. HTML c. offline site builder b. online site builder d. ftp uploader 2 CO_Q1_Empowerment Technologies SHS Module 10 11. Which term describes the readymade webpages design that a developer can use as a starting point? a. Wireframe c. Template b. Blueprint d. Structure 12. Which term describes how a designer place webpage element to form links and direct the focus of visitors? a. hierarchy c. orientation b. layout d. typography 13. What is the name of the web creation tool that allows us to work online website designing? a. Dream weaver c. Wix.com b. Notepad d. Word processor 14. In webpage design, which color is considered the color of extremes and is used to capture attention, and to indicate word emphasis? a. Blue c. Yellow b. Red d. Violet 15. Which term describes the technique used to save image, audio and video files and reduced file sizes? a. File compression c. Media encryption b. File encryption d. Media encryption 3 CO_Q1_Empowerment Technologies SHS Module 10  Lesson Web Page Design Using Templates and 1 online WYSIWYG Platforms The web is a gigantic place, and if you are using internet every day, you probably visit several websites whether for news, entertainment, business or education. But have you ever wondered how these websites actually work? How are they built? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of website designing. What’s In Directions: Search at least two different types of WYSIWYG online platforms. Discuss the PROS AND CONS and features of each. Then, create and complete the Venn diagram to summarize your preferences. Pros Cons 4 CO_Q1_Empowerment Technologies SHS Module 10  What’s New Directions: Match each term in the left column with the correct definition in the right column. _______ 1. E-commerce a. is a website or printed listing of information which lists businesses within niche based categories _______ 2.Blogs and b. websites that are excellent way to share information Personal and resources on the web. _______ 3. c. is an ongoing online diary or commentary written by Informational an individual, rather than a corporation or organization. _______ 4. Online d. is an online document used and created by a person Community to present their background, skills, and accomplishments. _______ 5. Photo e. is an online shop where people can order goods and Sharing make payments from the comfort of their own homes. _______ 6. e-resume f. Websites such as Pixabay.com allow people to upload and download photos for free. _______ 7. e-portfolio g. these are great ways to get in touch and share ideas with people with the same interests or from similar backgrounds through the internet. _______ 8.Catalogue h. is a detailed online description of a person's life and Brochure _______ 9. Business i. is a website that presents visitors with photos and Directory descriptions of their products and/or services. _______ 10.e-Biography j. is a website that showcases a person’s work, skills and potentials for future employers. _______ 11. k. websites that do not aim to sell products or services Entertainment to their visitors, but they still need to convince people to support their cause. _______ 12. Business l. is an online platform which people use to build social networks or social relationships with other people who share similar personal or career interests, activities, backgrounds or real-life connections. _______ 13. NGO / m. is any website that’s devoted to representing a Non-profit specific business. _______ 14. Job n. is a website that deals specifically with employment Searching or careers. _______ 15. Social o. is an online brand or website that focuses on Media producing high quality entertainment content for its users. 5 CO_Q1_Empowerment Technologies SHS Module 10  What is It Web Page Design A website is a collection of publicly accessible, interlinked web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes. Together, all publicly accessible websites constitute the World Wide Web. Web design is a similar process of creation, with the intention of presenting the content on electronic web pages, which the end-users can access through the internet with the help of a web browser. Every single web page in a website has different content, but all the pages are using a similar graphic design. Often, sites will use website templates, which contain all the basic elements of web design such as: Layout – It means that your design should align with a handful of soothing adjectives; it should be simple, familiar, intuitive, clean, and accessible. Use plenty of whitespace (or padding and margins) to give the elements of your site room to breathe, and use grid-based designs to keep design items organized and orderly. Strong photography, icons, or graphics provide supplementary information to your text but make sure the images complement each other and the brand you’re looking to represent. Colour - As for choosing a color scheme, paying attention to your topic, brand or industry perspectives, along with your target audience demographics will make this a somewhat a painless process. Always look for ways to narrow your scope from the roughly 7 million discernable hues the eye can detect. 6 CO_Q1_Empowerment Technologies SHS Module 10  Navigation - Your site’s navigation is not a space in which to be creative. First off, don’t fall into the trap of overly animated hover effects and complex. Navigational elements which can exist in a site’s header, body, and footer simply serve to direct your visitors to the information they desire as quickly as possible. Navigation Bar Fonts - Your text should be easily readable, which generally means body copy should be at least 16 pixels. Using a complementary font is ideal for headings or accents, but don’t go beyond three typefaces or unnecessary sizing adjustments. Of course, you’ll want to make sure there’s plenty of contrast between your text and the site’s background colors, which generally means a light color paired with a dark tone. Also, avoid that piercing red-font-on-green-background eyesore. Content - Your site visitors and potential customers want information quickly such as, is your brand trustworthy? Experienced? Is it capable of delivering top- notch products and services? Given people’s short attention spans and lightning-fast first impressions, communicating clearly is critical, thus, information should be easy to read and digest. Web Template It is a pre-designed webpage on set of HTML webpages that anyone can use to “plug- in”. Website templates allow anyone to setup a website. A web design template is a catchall name for several types of templates like; 1. HTML templates – website design templates represented with HTML code only 2. PSD templates – templates which contain only.psd files, graphics only, with no code 3. Flash templates – website design templates developed with Flash 4. Flash intro templates – templates of an intro clip, developed with Flash only and used to represent a company or/and a project. Online WYSIWYG Platforms Whether you’re attracted in learning to make your own website or want to start a blog without having to learn HTML or other coding languages, you may want to consider using a website builder that makes use of a WYSIWYG editor. 7 CO_Q1_Empowerment Technologies SHS Module 10  WYSIWYG stands for what you see is what you get. In other words, you are creating a website using drag-and-drop interface or changing the way fonts look in an editor, that is how your finished product will look. There are different benefits related with using a WYSIWYG editor. You have control over what your website looks like, and you don’t have to pay a professional to handle the coding for you. There are also a number of web hosts that have their own built-in editors, meaning you can create your website and publish it to the web immediately. WYSIWYG (What You See Is What You Get) WEBSITE BUILDERS WIX SQUARESPACE WEEBLY WORDPRESS SHOPIFY * Easy drag- * Easy to * Easy to * Near- infinite *Easy-to- and-drop use use customizability use product interface platform dashboard * thousands management * Limitless * Beautiful * Professional of available plugins and * Inventory customization design for - looking management options sites templates themes and POS integration Creating a Website Using an Online Website Builder Wix.com is a WYSIWYG cloud-based web development platform that was first developed and popularized by the Israeli company also called Wix. It allows users to create websites and mobile sites through the use of online drag-and-drop tools. For this topic, you will create your own personal website that focuses on your passion or hobby. 8 CO_Q1_Empowerment Technologies SHS Module 10 1. Create an account on Wix through their website www.wix.com and click GET STARTED. 2. Select “Create a New Site” from the drop down menu in the top right corner of the dashboard. Once it’s clicked, Wix will ask what type of website do you want to create. There are options for everyone, from online stores to personal portfolios. 3. Customize your website with the Wix Editor. Once you select a template, you can be able to customize it in the Wix Editor using simple drag-and-drop editing. 4. Update the Texts and Images At this point, you can get to see a preview page of your chosen template. This is where you can play around with simple but brilliant editing features, like the drag- and-drop design and text boxes. 5. Personalize the Background If small images are still not enough, you can also change your template background. The left-hand sidebar features a ‘Background’ button, which you can use to click and change with ease. 9 CO_Q1_Empowerment Technologies SHS Module 10 6. Add Pages Once you created a stunning homepage, there are few other more pages you can add to ensure that your website has everything visitors are looking for. For example, make sure to include a “Home”, “About” and a “Contact Us” page. 7. Publish your Wix website To make your website publicly accessible, you need to publish it. To do so, click “Publish” from the top menu. However, before Wix will publish your site, the last step in the process is to create your own subdomain or connect a custom domain. For a serious website, you should connect your own custom domain name, rather than using a Wix subdomain. 10 CO_Q1_Empowerment Technologies SHS Module 10  What’s More Create Your Own Digital Portfolio Directions: Using Wix.com, create your own e-portfolio on specific subject area, to showcase your work to future employers. In this website, you can put infographics, audio recordings, video clips and texts together to showcase your achievements and experiences. This activity is an alternative way for traditional portfolio. Notes to the Teacher In this activity you may inform your students to send you a copy of link that they will post. This will serve as your evidence. What I Have Learned The Do’s and Don’ts of Making Websites Direction: Write Do at the beginning of the statement given if it suggests the right thing to do in making a website and write Don’t if it is not. Write your answer on a separate sheet of paper. 1. _________ write everything in bold 2. _________ add links to other websites 3. _________ check for spelling mistakes 4. _________ write everything in capital letters 5. _________ use lots of pictures and animations 6. _________ use fonts that people can read easily 7. _________ put original, interesting content in your site 8. _________ put your navigation bar on every page of your websites 9. _________ have all your writing crammed into one side of the page 10. _________ cover every part of your pages in writing / images / animations 11 CO_Q1_Empowerment Technologies SHS Module 10  What I Can Do A. Share Your Story Using Digital Storytelling Directions: Using Wix.com create a photography gallery website to showcase your stories. Include texts, drawings, photos, animations, audios, and videos in your work. Story ideas can come from personal and family experiences, connections to other cultures, and real or imaginary people, places, or events. B. Why is it important to have a good quality website? Directions: Visit at least two government agency websites and two commercial websites and look for good and bad examples for each type. Keep detailed notes about what you observe. Identify which one is the highest quality website, and which one is the lowest. Rate each site from 1 to 5 (5 being the highest). Create a table for your notes which looks something like this: Website Name URL Rating Design Content Features 1. 2. 3. 4. Notes to the Teacher In this activity you may inform your students to send you a copy of link that they will post. This will serve as your evidence. 12 CO_Q1_Empowerment Technologies SHS Module 10  Assessment Directions: Choose the best answer for each question. Write the letter of your answer on a separate sheet. 1. You received some complaints that your website is not easy to read. You notice that most of the content is centered on the page. Which aesthetic principle should you use to increase your website’s readability? a. color c. accessibility b. alignment d. repetition 2. Where should the navigation be on a website? a. Inside the toolbars b. On the center side of the page c. On the right side or down at the bottom d. At the top and down the left side of the page 3. Which website builder enables you to create Web pages directly and update the site without the need of uploading files? a. HTML c. offline site builder b. online site builder d. ftp uploader 4. Which term describes the readymade webpages design that a developer can use as a starting point? a. Wireframe c. Template b. Blueprint d. Structure 5. Which term describes how a designer place webpage element to form links and direct the focus of visitors? a. hierarchy c. orientation b. layout d. typography 6. What is the name of the web creation tool that allows us to work online website designing? a. Dream weaver c. Wix.com b. Notepad d. Word processor 7. In webpage design, which color is considered the color of extremes and is used to capture attention, and to indicate word emphasis? a. Blue c. Yellow b. Red d. Violet 8. Which term describes the technique used to save image, audio and video files and reduced file sizes? a. File compression c. Media encryption b. File encryption d. Media encryption 9. What does the HTML pages’ editor (WYSIWYG) allow you to do? a. read errors from the browser c. produce a document b. create and edit website pages d. develop an online system 10. What does WYSIWYG acronym stand for? a. What you see is where you go c. What you see is what you get b. What you see is what you need d. What you see is what you sign 11. Which of the following programs is used by web clients to view the web pages? a. Web browser c. Web server b. Protocol d. Search Engine 13 CO_Q1_Empowerment Technologies SHS Module 10  12. What are shared on the internet and are called as web pages? a. Program c. Hypertext Documents b. Cables d. None 13. What is the language that instructs the browser on how to display the hypertext, and adds pictures to the document? a. C Language c. HTML b. Cobol d. Visual Basic 14. Which of the following is an advantage offered by WYSIWYG online editors for creating a Web site? a. Ready templates c. creating own design b. coding practice d. designing the web structure 15. Which of the following is a component of functional design principles for web sites? a. Accessibility c. readability b. Design d. Structure Additional Activities Directions: Answer the following questions. Write your answer on a separate sheet of paper. 1. Explain the difference between the website and webpage. _____________________________________________________________________ ________________________________________________________________________ 2. Which online WYSIWYG features or tools do you find most useful? Why? ________________________________________________________________________ ________________________________________________________________________ 14 CO_Q1_Empowerment Technologies SHS Module 10  Answer Key 10.c E 10. b 10. Don’t 9. d 9. b 15.L Do 9. 14.N 8. d 8. b 13.K Do 8. 7. b 12.M 7. a Do 7. 11.O 6. c 10.H 6. a Do 6. 9. A 5. b 5. c Do 5. 8. I 4. c 7. J 4. c Don’t 4. 6. D 3. b Do 3. 5. F 3. a 4. G 2. d Do 2. 2. c Don’t 1. 3. B 2. C 1. b 1. b Learned 1. E What I have What’s New What I Know Assessment References “WIX.COM” https://www.wix.com/ (Accessed 11/26/2019). “What is web design” (2019)www.treefrog.ca https://www.treefrog.ca/what- is-web-design/ (Accessed 11/26/2019) “7 best WYSIWYG web builder reviews (2020)” HostingAdvice.com https://www.hostingadvice.com/how-to/wysiwyg-web-builder/ (Updated: October 29, 2019) “Top 6 basic elements of web design”. (2018). Dream host https://www.dream host.com/blog/elements-of-webdesign/ (Updated: September 26, 2018) 15 CO_Q1_Empowerment Technologies SHS Module 10 For inquiries or feedback, please write or call: Department of Education - Bureau of Learning Resources (DepEd-BLR) Ground Floor, Bonifacio Bldg., DepEd Complex Meralco Avenue, Pasig City, Philippines 1600 Telefax: (632) 8634-1072; 8634-1054; 8631-4985 Email Address: [email protected] * [email protected]