Data Protection and Web Browsers

Data Protection Laws

• Designed to protect personal data from misuse and unauthorized access.
• Grant rights like access to personal data, rectification of incorrect data, data erasure, and data portability.
• Developers need to use encryption and secure protocols like HTTPS, and also update software regularly
• Personal data must be collected for legitimate purposes, kept secure, and not retained longer than needed.

Web Browsers

• Application software to access and interact with WWW content.
• User interface for navigating the Internet, retrieving web pages, and displaying them on a computer.
• Enables users to input web addresses, search for information, view text, images, and videos.
• Has a graphical user interface with an address bar, navigation buttons, and bookmarks.
• Security features include pop-up blockers and private browsing mode.
• Support extensions for enhanced functionality.
• Available on various operating systems, offering cross-platform compatibility.
• Act as intermediaries between users and web servers, translating HTML and CSS.

Popular Web Browsers

• Google Chrome is the most popular for its speed, simplicity, and extensive library of extensions.
• Apple Safari is the default for Apple devices and is known for efficient energy saving on macOS and iOS.
• Mozilla Firefox is an open-source browser with strong privacy features and customizable add-ons.
• Microsoft Edge is the default for Windows 10 and later, built on the Chromium engine, and known for speed and web standard compatibility.
• Opera is feature-rich, focusing on speed and privacy, with a built-in ad blocker and free VPN service.
• Web browsers share tabbed browsing, bookmark management, and password storage. They differ in speed, privacy, customization, and integration.
• Users can select the web browser that best fits their preferences.

Browsing and Information Management

• Browsing also called Surfing, is the process of looking into the information available on the internet.
• Time Efficiency: Bookmarks help reduce time spent searching.
• Productivity: Allows users to focus on tasks rather than repeated searches.
• Content Retention: Bookmarks help users revisit useful articles, resources, or tools.
• Cross-Device Accessibility: Synchronization of settings and bookmarks enables access on various devices.
• Enhanced Security: Password managers help secure sensitive data.

Browser Window Navigation

• Key elements in Google Chrome include Back, Forward, and Refresh buttons, Tabs, Bookmark buttons, Profile icon, Menu, Extensions, Windows Management icons, and the Address bar.
• Bookmarks are tools for saving and organizing frequently visited websites.
• Creating, editing, and organizing bookmarks enhances productivity. Bookmarks allow users to easily revisit webpages without needing to search or memorize URLs.

Browser History and Settings

• Browser history records all web pages a user has visited, maintained by the web browser.
• Browsing history data helps users revisit sites, autocomplete forms, and resume activities.
• Configuring basic settings personalizes a user's online experience while enhancing security and optimizing performance.
• Setting include general settings, privacy and security controls, Cookies and pop-up controls, managing extensions, and syncing browsing data across devices.

Browser Extensions and Syncing

• Extensions are small software programs that enhance browser functionality.
• Consistent Experience: Syncing provides access to the same bookmarks, history, passwords, and settings on all devices.
• Convenience: Passwords, payment methods, and addresses are automatically filled in.
• Backup and Recovery: Data is easily recovered if a device is lost or replaced.
• Security Risks: A compromised account can lead to unauthorized access of synced data; avoid syncing on public devices.
• Data Usage: Syncing can consume data, an issue for users with limited data plans.
• Device Dependency: Improperly managed sync settings can affect the experience on all synced devices.

Information Search

• Information Search is actively seeking and retrieving specific data, facts, or knowledge from various sources, often utilizing search engines or databases.
• Can be done for various purposes, including academic research, projects, or personal curiosity.
• Key steps include formulating a clear query, using search tools, evaluating results, and extracting relevant information.
• Effective searching needs query refinement, understanding of search operators, and credibility assessment.
• A search engine is software embedded in a website to search for information on the WWW.
• Search engines facilitate quick and efficient internet information retrieval.
• Information found may consist of web pages, images, videos, infographics, articles, research papers, and other files.

Search Engine Examples

• Google is known for its speed, relevance, and comprehensive index.
• Bing offers features like image and video search, plus Microsoft Office integration.
• Yahoo provides search, news, email, and more; its search is powered by Bing.
• DuckDuckGo values user privacy by not tracking search activity.

Key Functions of Search Engines

• Keyword Search: Users type words/phrases to find relevant web pages.
• Advanced Search: Provides options to refine searches using filters for date, language, region, etc.
• Image, Voice, and Local Search helps to find local businesses, services, and points of interest.

Role of Search Engines in Web Development

• Web developers improve site visibility, attract more visitors, and achieve objectives through Search Engine Optimization (SEO).
• Identifying potential visitor keywords is part of Keyword Research.
• Keywords are words and phrases people type into search engines.

Three Types of SEO

• On-Page SEO: Optimizes website content and structure, including HTML tags, meta descriptions, and page content.
• Off-Page SEO: Everything outside the website that refers or links to it are backlinks from reputable sites to improve authority and ranking.
• Technical SEO: Website accessibility to crawlers, quick loading, indexability, and mobile-friendliness.

Search Strategies

• Search strategy is the action plan drawn to conduct a search, with several issues to consider.
• Consider concepts/facts, representative terms, retrieval system features, and revision measures for appropriate search statements.
• The more accurate the word choice, the more accurate the results.
• Basic Search: Entering a single search term is the simplest form of search.
• Exact Match Search: Technique finding results with the exact phrase in quotation marks.

Search Techniques

• Google returns only results containing the precise sequence when searching with quotation marks.
• It is useful for specific phrases, names, quotes, or exact text strings.
• Boolean Search: common technique combining search terms with Boolean logic.
• Boolean Operators refine search: AND narrows, OR broadens, and NOT excludes terms.
• Site Search: Enables users to quickly locate information within a specific website using the "site:" operator for example, searching "CSS Grid site:w3schools.com" will return results about CSS Grid from w3schools.com.
• Wildcards () Search: Use of asterisk () as a placeholder for missing words.
• File Type Search: Uses the filetype: operator to search for specific file types.
• Definitions: Simply type define: followed by the word and it provides the definition of that word.

Advanced Search Options

• Exclude Words: Filter out irrelevant results by excluding specific terms.
• Site or Domain: Search within a specific website for content.
• File Type: Search for specific file types like PDF.
• Usage Rights: Filters results based on usage rights.
• Region: Narrow search results to a specific region.
• Date: Set a date for recent file updates.
• Safe Search: Set search filter for language, etc.

Reverse Image Search

• Valuable for finding an image's source, similar images, and webpages where it appears.
• Key use cases:
  • Verifying Image Authenticity: Comparing an image with its original & other versions.
  • Identifying Sources and Attribution: Finding image sources to provide proper credit.
  • Researching Products or Objects: Using reverse image search to identify objects.
  • Detecting Fake Profiles or Scams: Verifying profile picture authenticity.
  • Locating Higher-Resolution Versions: finding higher-resolution images for various project purposes.
• Tin Eye specializes in finding where images appear, while Google Images and Bing Visual Search allow to search for images and sources.

Evaluating Resources

• Choose resources to improve learning experiences and knowledge.
• Students should critically evaluate online content to ensure it's from trusted sources.
• Many sites and social media share inaccurate information for political or financial gain.

The CRAAP Framework

• The CRAAP framework helps evaluate the credibility, reliability, and relevance of information sources.
• Copyright laws protect creators by controlling how their work is used, distributed, and modified, promoting trust and ethical practices.
• Web developers should ensure all website assets are created by them, licensed, or available under a Creative Commons license.
• Copyright infringement can lead to significant penalties like fines, legal action, and loss of customer trust.
• By respecting copyright and safeguarding data, developers can create secure, compliant, and trustworthy websites.

Development Environments for Web Dev

• Setting up a development environment is an important initial step in web development.
• It includes identifying necessary tools and resources for creating HTML code, used for writing, testing, and debugging.
• A text editor, web browser, local web server, tools and resources are all necessary to create web pages.
• Key IDE Text-Editors are Notepad++, VS Code, SEO, Metadata, and Tool.
• A software configuration/installation supports the development of software applications with certain reasons/importance.
• It provides a platform for developers to create, test, upload a HTML to a live website.
• They allows code experimentation in a controlled environment without risking breaking the web site.
• IDEs make the development process more efficient and productive.

HTML Dev Tools

• Necessary tools for setting up a development environment for HTML include text editors like Notepad++, Visual Studio Code, Sublime, and Atom, each with their own features.
• Web browsers like Google Chrome, Mozilla Firefox, and Apple Safari are used to view web pages for testing HTML code.
• Local web servers such as XAMPP, WAMP, and MAMP allow web applications to run without uploading to a live server for testing before deployment.
• Text editors allow users to check syntax, insert HTML tags and structures, and provide auto-completion and translate the code generated through an HTML editor can be translated to XML, JavaScript.
• HTML editors structure, create websites and write the HTML Code.

HTML structure

• HTML (Hyper Text Markup Language) is a markup language
• is used to structure or create the skeleton(appearance) of web page of your website which includes hyperlinks, multimedia etc
• tells the browser how to display content.
• uses predefined Tags( predefined name)
• HTML elements are defined by a start tag, and end tag. and the HTML Tags are special words wrapped/covered enclosed /surrounding in angle brackets symbol which are used to define different types of content on a webpage

HTML Elements Hierarchy

• consists of the following elements
• nested inside each other to create a tree-like structure of the content on the web page.
• this hierarchical structure is the DOM (Document Object Model)
• it is used by the web browser to render the web page
• Basic HTML document structure consists of document declaration, the HTML root element, meta element
• Two sections: Heading and body
  • There is the tag used to show the title of a webpage which should begin and end
  • Then tag is used to display content in the browser window within and tag