Web Design Reviewer PDF

**[II. INTERNET ]** **INTERNET** -- the internet is the interconnection of computers on a global scale. It is the biggest network in the world today, connecting computer from all over the world. It works by technique packet switching. **INTERNET SERVICE PROVIDER (ISP)** -- company or organization...

**[II. INTERNET ]** **INTERNET** -- the internet is the interconnection of computers on a global scale. It is the biggest network in the world today, connecting computer from all over the world. It works by technique packet switching. **INTERNET SERVICE PROVIDER (ISP)** -- company or organization that provides internet connection. Examples are PLDT, DSL, Globe, Smart bro, and Converge **Types of ISPs**: 1. **Dial-up:** An old-school method that uses telephone lines. 2. **DSL:** Also uses phone lines but offers faster speeds than dial-up. 3. **Cable:** Uses the same lines as our cable TV, providing higher speeds. 4. **Fiber-optic:** Transmit info as light pulses through glass or plastic fiber-optic cables. 5. **Satellite: **Uses satellites to provide internet access. 6. **Wireless:** Uses radio signals, often found in rural areas. **WORLD WIDE WEB (WWW)** --The infrastructure or application to support email, and peer-to-peer networks for file sharing and telephony. Often simply called the Web, a system of interlinked hypertext documents and multimedia content that you can access via internet. (webpages, URLS, Http) **WEBSITE** -- is a collection of web pages connected with each other through hyperlinks. (Google, Yt) **WEB PAGES** -- are simply text documents. These text documents are written in Hypertext Markup Language or HTML for short, with HTML, web pages can display text, images and videos. **WEB BROWSERS** -- are application or software that allows us to see websites. (chrome, safari) HTML (HyperText Markup Language) -- the standard language used to create and design web pages. **WEB ADDRESSES** --contain a unique worldwide address. This address (or Uniform Resource Locator, URL, in Internet jargon). ([www.pup.website.edu.ph](http://www.pup.website.edu.ph)) **DOMAINS**-- unique names that identify websites on the internet. (.gov-government,.edu-education,.com-commercial) **BROWSER EXTENSIONS-**small software programs that can be installed to add new features or functionality to a web browser. **FILE COMPRESSION**-files are compressed to make them smaller in size and faster to download. **WEB MULTIMEDIA**-The Web is rapidly evolving from primarily text-based documents to multimedia experience of sight, sound and motion which rival CD-ROM titles. **ELECTRONIC MAIL**- a method of exchanging digital messages. E-mail systems are based on a store-and-forward model in which email computer server systems accept, forward, deliver and store messages on behalf of users. **PING-**computer network administration utility used to test the reachability of a host on an Internet Protocol (IP) network and to measure the round-trip time for messages sent from the originating host to a destination computer. **[III. DATA COMMUNICATION & NETWORKING]** **DATA TRANSMISSION, DIGITAL TRANSMISSION, OR DIGITAL COMMUNICATIONS** - physical transfer of data (a digital bit stream) over a point-to-point or point-to-multipoint communication channel. Examples of such channels are copper wires, optical fibers, wireless communication channels, storage media and computer buses. **DIGITAL TRANSMISSION -** Discrete signals that represent data as distinct values, widely used in modern computing and communication systems. **ANALOG TRANSMISSION -** Continuous signals that vary in amplitude or frequency, commonly used in older technologies like radio. **5 Basic Components of Data Communication:** **BANDWIDTH** - The amount of data which can be transmitted on a medium over a fixed amount of time (second). It is measured on Bits per Second or Baud Bits per Second (bps) **BPS** - A measure of transmission speed. The number of bits (0 0r 1) which can be transmitted in a second. **PACKETS**-Transmissions are broken up into smaller units or data transmissions called packets. **TRANSMISSION DIRECTION**: 1. **Simplex Transmission** -- one direction only. 2. **Half Duplex Transmission** -- both directions but only one direction at a time. 3. **Full Duplex Transmission** -- send and receive both directions at once. **ETHERNET -** Developed at Xerox in 1976. First protocol approved as an industry standard protocol 1983. LAN protocol used on bus and star. **TCP/IP** - Developed in 1973 for use on the ARPANET which was a defense force research network. Allows transfer of data using packet switching. **LAN (LOCAL AREA NETWORK) -** network confined to a small geographic area which is a building or a group of buildings. **WAN (WIDE AREA NETWORK)** - which is a network spread over a large geographic area. The [largest WAN] is the [internet]. **NETWORK**- number of computers and peripheral devices connected together so as to be able to communicate. **TYPES OF NETWORKS:** 1. **WIDE AREA NETWORK-** exist over a large area. Data travels through telephone or cable lines. 2. **LOCAL AREA** **NETWORK**- spans a relatively small area. Data travel between network devices via network cables. 3. 4. **PERSONAL AREA NETWORK -** is used within a very small area. This is usually on a person or in a vehicle**.** 5. **METROPOLITAN AREA NETWORK -** a computer network that is larger than a single building local area network but is\ located in a single geographic area that is smaller than a wide area network. **INTERNET, INTRANET, EXTRANET** 1. **INTERNET** -- public/international network, which is used to access information, eshopping, e-banking, email. 2. **INTRANET** - private network (LAN or WAN) used to share resources in secure environment. Uses web pages (HTML to view) and TCP/IP protocols (to make connection). 3. **EXTRANET** -- intranet that has been extended to include access to or from selected external organizations such as customers, but not general public. **TRANSMISSION MEDIA:** - **Twisted pair** -- telephone cable - **Coaxial cable** --Thick black cable used for higher bandwidth communications than twisted pair (i.e. Optus cable) - **Fibre optic** -- data transferred through pulses of light. Extremely fast. - **Non cable methods** such as satellite, microwave, wireless and Bluetooth. **NETWORK HARDWARE:** 1. **SERVERS**: Help to manage the network and the resources of that network. 2. **ROUTERS**: connects multiple networks and are protocol independent. can be used in place of a switch or bridge. 3. **SWITCHES**: smart hubs which transmit packets to the destination port only 4. **HUBS**: like double adapters /power boards in the home except instead of plugging in extension cords we are plugging in computers to allow them to communicate. **IP ADDRESSES**- IP stands for Internet Protocol. IP Addresses serve as the location of websites on the Internet as well as the workstations that are connected to the web. IP addresses are made up of four sets of numbers called "Octets" **NETWORK TOPOLOGY**- Refers to the shape of a network, or the network\'s layout. How different nodes in a network are connected to each other and how they communicate are determined by the network\'s topology. **TYPES OF NETWORK TOPOLOGY**: 1. **POINT-TO-POINT-** functionality of the sender and receiver. 2. **BUS TOPOLOGY** - All devices are connected to a central cable, called the bus or backbone. 3. **RING** - It forms a ring connecting devices with exactly two neighboring devices. 4. **STAR** - All the devices are connected to a single hub through a cable. This hub is the central node and all other\ nodes are connected to the central node. 5. **TREE** - All the devices are connected to a single hub through a cable. This hub is the central node and all other\ nodes are connected to the central node. 6. **MESH** - Every device is connected to another device via a particular channel. 7. **HYBRID** - combination of all the types of topologies. Used when the nodes are free to take any\ form. **FIREWALL** - a software that can be loaded on to a network that can serve as a barrier that keeps destructive forces away from a network of computers. **ROUTERS -** specialized computers that send your messages and those of every other Internet user speeding to their destinations along thousands of pathways. **[IV. INTERNET SECURITY]** **INTERNET SECURITY** - a vital field that safeguards networks, devices, and sensitive data from cyber threats like phishing, malware, ransomware, and social engineering attacks. **MAIN TYPES OF RISKS TO INTERNET SECURITY**: 1. **MALWARE -** any software designed to damage or steal data from computer systems. - **VIRUSES** - program that affix themselves to healthy files and propagate when the contaminated file is shared. - **WORMS** - self-replicating malware that spreads to other systems by taking advantage of network weaknesses. - **TROJAN HORSES** - programs which pose as trustworthy software, could open backdoors for intruders. - **RANSOMWARE** - a dangerous type of virus that encrypts a victim\'s files and demands money to unlock them. Significant data loss and business interruption are potential consequences of ransomware attacks. 2. **PHISHING -** sending bogus emails pretending to be from reputable sources, including banks or retailers who sell online, is a common tactic used in phishing scams. - **EMAIL PHISHING** - fraudulent emails that pretend to be from reliable sources and persuade the receiver to click on harmful links or expose personal information. - **SPEAR PHISHING** - type of targeted phishing assault in which the attacker focuses on a particular person or organization, frequently exploiting personal information that gives legitimacy to their attack. - **WHALING** - a highly skilled phishing attempt to obtain private company data by targeting notable individuals such as executives. 3. **RANSOMWARE** - is a type of malicious software that encrypts files and folders on a user\'s computer to prevent them from being accessed. The virus then demands payment, usually in bitcoin, in order to unlock the encrypted files and return the computer to regular operation. 4. **SOCIAL ENGINEERING -** most difficult cyber security challenges of today\'s age. It refers to the act of exploiting human vulnerabilities via deception to achieve a malevolent objective. - **HUMAN-**BASED **ATTACK** - the attacker interacts with the victim directly to obtain the necessary information. - **COMPUTER-BASED ATTACK** - to obtain information from the targets, software-based attacks are carried out utilizing gadgets like computers or mobile phones. - **SOCIAL-BASED ATTACK** - take use of the victims\' relationships to manipulate their emotions and mind. Because they entail human contact, these attacks are the most successful and harmful. - Important strategies consist of: 1. **PRETEXTING -** When an attacker fakes a situation in order to win over the victim and obtain information. 2. **BAITING** - The practice of luring someone into a trap by offering them a prize, like a USB drive contaminated with malware. 3. **VISHING -** Voice phishing is a tactic used by attackers to obtain sensitive information from victims over the phone. 5. Other prominent risks consist of: - **MAN-IN-THE-MIDDLE (MITM) -** Attackers that intercept communications between two parties to steal or alter data. - **PASSWORD ATTACKS -** Accounts and systems can be hacked by methods like attempting assaults, in which attackers try to guess passwords. - **ADWARE AND SPYWARE -** These malware categories have the ability to monitor user activity and show intrusive advertisements, which may result in data theft. **SECURITY PRACTICES** 1. Employing robust passwords by keeping it between 12 to 16 characters while using a combination of special characters, numerals, capital and lowercase letters. 2. Steering away from utilizing guessable information such as birthdays or well-known terms. 3. Use two-factor authentication in addition to a password, such as SMS Codes, and Biometric Verification. 4. Updating your antivirus program, operating system, and apps frequently to guard against security flaws is one way to secure your devices. 5. Enable automatic updates to guarantee you get the most recent security updates. **DATA ENCRYPTION** -- a security measure that transforms readable data into an encoded format, making it inaccessible to unauthorized users. **SECURE DATA STORAGE -** refers to the methods and technologies used to protect data from unauthorized access, corruption, or loss. **PRIVACY POLICIES -** legal documents that outline how an organization collects, uses, stores, and shares personal data. This consent must be informed, meaning individuals should understand what they are agreeing to, including the purpose of data collection and their rights. Organizations must also avoid \"*bundled consent*,\" where multiple unrelated consents are grouped together, as this can pressure individuals into agreeing to all terms without understanding them. **[V. INTRODUCTION TO E-COMMERCE]** **E-COMMERCE --** or electric commerce is the process of buying and selling goods and services over the internet. **E-COMMERCE MODELS** 1. **B2B (Business-to-Business) --** transactions occur between businesses. This model is characterized by companies selling products or services to other companies, such as manufacturers selling to wholesalers or retailers. Ex: A wholesaler selling products to a retailer. 2. **B2C (Business-to-Consumer)** -- refers to the direct sale of products and services from businesses to individual consumers. This model is what most people associate with e-commerce, as it includes online retailers selling directly to customers. Ex: A furniture supplier selling office furniture to consumers. 3. **C2C (Consumer-to-Consumer)** -- transactions between consumers, often through a third-party platform that provides the necessary infrastructure for buying and selling. This model has gained popularity with the rise of online marketplaces such as eBay, Etsy, and Facebook Marketplace, where individuals can sell their goods directly to other consumers. Ex: A reselling market where consumers buy and sell goods to each other. 4. **C2B (Consumer-to-Business)** -- individuals sell products or services to businesses. This model reverses the traditional business-consumer relationship, allowing consumers to offer their skills or products to companies. Ex: A sole proprietorship serving a large corporation. **KEY TECHNOLOGIES USED IN E-COMMERCE** 1. **PAYMENT GATEWAYS** - act as intermediaries between the customer and the merchant, enabling the transfer of payment information. Payment gateways encrypt sensitive data, ensuring secure transactions and protecting against fraud. - **PAYPAL** - a globally recognized payment gateway, widely used in the Philippines for both domestic and international transactions. - **GCASH** - a prominent e-wallet and payment gateway in the Philippines that facilitates various transactions, including online purchases, bill payments, and money transfers. - **MAYA BUSINESS** (PayMaya) -- offers a range of payment solutions, including e-wallet services and online payment processing. 2. **SHOPPING CART SYSTEMS --** allow customers to select products, manage their orders, and proceed to checkout. - **SHOPIFY** -- a comprehensive e-commerce platform that includes a shopping cart, payment processing, and marketing tools. - **WOOCOMMERCE** -- WordPress plugin that turns a site into a fully functional e-commerce store, offering extensive customization options. - **BIGCOMMERCE** -- a cloud-based e-commerce platform that provides built-in features for managing sales, inventory, and marketing. 3. **DIGITAL MARKETING TOOLS --** vital for promoting e-commerce businesses and driving traffic to online stores. They help businesses engage with customers, analyze performance, and optimize marketing strategies. 4. **CURRENT TRENDS IN E-COMMERCE -** Significantly influenced by mobile commerce and social commerce. - **MOBILE COMMERCE -** Dominates the e-commerce industry, accounting for 73% of the global e-commerce market share. Innovations in mobile payment solutions, app development, and responsive design are making it easier for consumers to shop on-the-go. - **SOCIAL COMMERCE --** Social media platforms are increasingly integrating shopping features, allowing users to purchase products directly through their feeds. - **PERSONALIZATION THROUGH AI** - Artificial Intelligence (AI) is revolutionizing the e-commerce landscape by enabling highly personalized shopping experiences. - **AUGMENTED AND VIRTUAL REALITY (AR/VR) AR AND VR TECHNOLOGIES** -- enhanced product visualization, allowing customers to \"try before they buy.\" - **VOICE COMMERCE** -- this trend simplifies the shopping process and caters to the growing demand for convenience, making it easier for customers to order products hands-free. **[VI. SOCIAL MEDIA AND DIGITAL MARKETING]** **SOCIAL MEDIA --** most effective tool for sharing and marketing. **SOCIAL MEDIA PLATFORMS:** 1. **X (FORMERLY KNOWN AS TWITTER) --** microblogging system that enables real-time interaction between posters and followers. The advantage to using twitter is the ability to post links to other websites and tag certain themes to attract readers to your posts. 2. **INSTAGRAM --** it is another microblogging platform, but it largely focuses on pictures and short video content. The advantage of Instagram over Twitter is you can write as much as your heart desires on your posts. The disadvantage to Instagram, other than the focus on pictures, is that you can't post links to other websites directly on your posts. 3. **FACEBOOK --** The use of Facebook is on the decline. The main advantage to Facebook is the ability to create groups and pages. 4. **LINKEDIN --** where you could connect with professionals and with potential employers. The advantage of using LinkedIn for knowledge dissemination is that the people who are likely to engage with your work and posts are those with the goal of professionalism. The disadvantage is that it is not a very wide-reaching platform, in that you are not going to reach a diverse group of readers 5. **REDDIT --** open-source community where users can submit original content or content taken from somewhere else. Users then vote on the content posted, and the most popular content is shared with all users. **WHAT ARE THE ADVANTAGES OF SOCIAL MEDIA?** 1. 2. You reach large audiences 3. You have a direct connection with your audience 4. You can create organic content 5. You have access to paid advertising services 6. You build your brand 7. You drive traffic to your website 8. You can evaluate your performance 9. You can join social media networks for free 10. You can create viral content 11. You can uncover valuable insights **WHAT ARE THE DISADVANTAGES OF SOCIAL MEDIA?** 1. You can receive negative feedback 2. You open up to the potential for embarrassment 3. You must spend a lot of time on your campaigns 4. You have to wait to see results **[VII. SEARCH ENGINE OPTIMIZATION]** **SEARCH ENGINE OPTIMIZATION (SEO)** -- focuses on improving a website\'s visibility on search engine result pages (SERPs). It involves practices such as keyword optimization, meta descriptions, link building, and content creation, among others, with the objective of attracting and increasing organic traffic. **KEY COMPONENTS OF SEO:** 1. **KEYWORDS --** Specific words or phrases that users enter search engines when looking for information. 2. **BACKLINKS --** Links from other websites that point to your site. High-quality backlinks from reputable sites signal to search engines that your content is credible and valuable, which can improve your site\'s authority and ranking. 3. **META TAGS** -- Snippets of text that describe a webpage\'s content. A well-crafted title tag can improve click-through rates by accurately representing the content and including relevant keywords. **ELEMENTS OF SEO** 1. **TECHNICAL SEO** -- Refers to the optimization of the technical aspects of a website to improve its visibility to search engines. Ensuring a clean and organized site structure that allows search engines to crawl and index pages efficiently. 2. **ON-PAGE SEO** -- Involves optimizing individual web pages to rank higher and earn more relevant traffic. Identifying and strategically placing relevant keywords throughout the content, titles, and meta tags to signal to search engines what the page is about. 3. **OFF-PAGE SEO** -- Focuses on activities conducted outside the website to improve its authority and ranking. Acquiring high-quality backlinks from reputable websites, which serve as endorsements of your site\'s credibility. 4. **CONTENT** -- referred as the backbone of SEO. **STRATEGIES AND PRACTICES** - Improved search engine rankings - Enhanced user experience - Increased click through rates - Building authority through backlinks **[VIII. USER EXPERIENCE (UX) DESIGN]** **USER EXPERIENCE UX DESIGN** - Concerns itself with the overall experience a user has when navigating a website. **KEY ELEMENTS OF USER EXPERIENCE (UX) DESIGN:** 1. **USABILITY** - ensures that the interface is easy to use, intuitive, and efficient. Usability is the cornerstone of UX design and refers to how easily and efficiently users can interact with a product. **CHARACTERISTICS OF USABLE UX DESIGN**: - Clear and logical navigation structure - Easy to learn and understand - Allows users to accomplish tasks quickly - Easy to remember how to use after a period of not using it - Users should be able to navigate through the interface without confusion. - The design should facilitate quick completion of tasks. - New users should find the interface easy to learn. - A usable design anticipates potential user errors. 2. **ACCESIBILITY** -- ensures that the interface is inclusive and usable by people with various abilities and disabilities. Accessibility ensures that all users, including those with disabilities, can effectively use a product. **CHARACTERISTICS OF AN ACCESSIBLE UX DESIGN**: - Providing alternative text for images and other non-text content - Ensuring proper color contrast for readability - Allowing keyboard navigation for users who cannot use a mouse - Providing clear and concise content that is easy to understand - Providing descriptive text for images and non-text - Ensuring that all interactive elements can be accessed via keyboard shortcuts - High contrast between text and background colors - Using straightforward language and avoiding jargon 3. **VISUAL HIERARCHY --** arrangement of elements on a page to guide the user\'s attention and create a logical flow. **ELEMENTS OF VISUAL HIERARCHY:** - Size: Larger elements attract more attention - Color: Contrasting colors draw the eye - Proximity: Elements that are close together are perceived as related - Alignment: Consistent alignment creates a clean and organized look - Whitespace: Proper use of whitespace enhances readability and focus - Larger elements, such as headings or call-to-action buttons - Using contrasting colors - Related items should be grouped together - Adequate spacing around elements 4. **SATISFACTION --** refers to the pleasure and fulfillment users derive from their interactions with a product. 5. **EFFICIENCY --** refers on how quickly and effectively users can achieve their goals with the product. **WIREFRAME** - a basic, black-and-white layout that outlines the structure of a web page or an app screen. A wireframe focuses on site architecture, determines the size and location of page elements, and defines the paths between the pages. **CREATING A SIMPLE WIREFRAME FOR A WEBSITE** 1. **USABILITY** Design the navigation menu to be straightforward and logical. Use clear labels for menu items and ensure that the most important sections (like Home, Shop, Cart, and Account) are easily accessible. 2. **ACCESSIBILITY** Ensure that the wireframe includes elements that cater to users with disabilities. This might include designing for keyboard navigation or ensuring that buttons are large enough to be easily clicked. 3. **VISUAL HIERARCHY** Use size, color, and placement to establish a visual hierarchy in the wireframe. Important elements, such as calls-to-action (e.g., \"Add to Cart\" buttons), should be prominent.