IB COMPUTER SCIENCE OPTION C WEB SCIENCE

WEB SCIENCE | CREATING THE WEB

PART 2

ALSO IN THIS TOPIC
CREATING THE WEB PART 1
CREATING THE WEB PART 2
SEARCHING THE WEB
DISTRIBUTED APPROACHES TO THE WEB
THE EVOLVING WEB
ANALYSING THE WEB
THE INTELLIGENT WEB
NETWORK COMPONENTS
XML AND XMLT
PHP PRINCIPLES
JAVASCRIPT PRINCIPLES
REVISION CARDS
ANSWERS

SECTION 1 | WEBPAGE STRUCTURE

HTML5 introduced a new set of semantic elements to improve the structure and readability of web pages. Semantic elements are tags that have a clear meaning about the content they represent, making it easier for search engines, browsers, and developers to understand the structure and purpose of the content on a webpage.

A web page is composed of several key components that work together to create a functional and visually appealing online experience.

HTML (Hypertext Markup Language)
Structure: HTML provides the basic structure of the site, using tags to denote different content types like headings, paragraphs, links, and images.
Elements: Common HTML elements include <head>, <body>, <header>, <footer>, <article>, <section>, and more.

META
The <meta> tag in HTML is a versatile element used to provide metadata about the HTML document. Metadata is information about the data (web page) but is not displayed on the web page itself.

HEADER
The <header> element represents the header section of a page or a content block. It typically contains the website logo, site navigation, or a banner. The <header> can be used more than once within a page if necessary, such as within an <article> or <section>.

NAVIGATION
The <nav> element is used to define a navigation block within a web page. It typically contains a list of links to other pages or sections of the website. The <nav> element can be placed inside the <header> or as a separate element on the page.

MAIN
The <main> element is used to enclose the main content of a web page. It should be unique to each page and not include content that is repeated across multiple pages, such as headers or footers. There should only be one <main> element per page.

SECTION
The <section> element is used to define a grouping of content within a page, often containing related content like articles or other sections. Each <section> should have a heading (e.g., <h2> to <h6>) to describe its content.

ARTICLE
The <article> element represents a self-contained piece of content that can be independently distributed or reused, such as a news article, blog post, or forum post. An <article> can be nested within a <section> or used on its own.

ASIDE
The <aside> element contains content that is related to the main content but can be considered separate, such as sidebars, pull quotes, or supplementary information. It can be placed within a <section> or <article> or used on its own.

FOOTER
The <footer> element represents the footer section of a page or a content block. It typically contains metadata, copyright information, or contact details. The <footer> can be used more than once within a page if necessary, such as within an<article> or <section>

Further to HTML elements CSS is used for styling the visual presentation of web pages. It controls layout, colours, fonts, and even some animations.

SECTION 2 | COMMON LANGUAGE PROTOCOLS

The importance of protocols and standards on the web cannot be overstated, especially in the context of ensuring compatibility through a common "language" internationally. These protocols and standards are the backbone of the internet, enabling seamless communication and interaction across diverse systems and platforms and are essential for ensuring Compatibility and Communication through use of common language and interoperability.

Common Language | Protocols like HTTP, TCP/IP, and FTP serve as a universal language for computers and networks worldwide. They define how data is transmitted, ensuring that devices with different hardware, software, and network configurations can communicate effectively.
Interoperability | Standards ensure that different web technologies (like browsers, servers, and multimedia tools) can work together smoothly. Without these standards, developers would face numerous compatibility issues, leading to a fragmented web experience.

Protocols and standards are pivotal in ensuring the web's global reach and uniformity, enhancing user experience, and driving innovation. They enable websites to be accessed seamlessly worldwide, transcending national and cultural boundaries. Standards like HTML and CSS ensure consistent display of web pages across various browsers and devices. Protocols like TCP provide reliable data transfer, ensuring stability, while HTTPS enhances security, protecting sensitive data and maintaining user trust. These standards form a foundation for development, fostering innovation and adaptability by allowing the integration of new technologies and trends, crucial for the web's continuous evolution.

SECTION 3 | DIFFERENT TYPES OF WEB PAGES

The web is a diverse platform hosting various types of web pages, each serving different purposes and audiences. Here's a description of some common types of web pages:

PERSONAL PAGES
Description: Personal web pages are created by individuals to share information about themselves, their interests, or experiences. They often include biographical information, personal photos, and links to social media. For example; a personal portfolio site showcasing someone's work and achievements.

BLOGS
Blogs are regularly updated web pages or websites that are written in an informal or conversational style. They often focus on a specific topic or a range of subjects and allow readers to interact through comments. For example; a cooking blog featuring recipes and cooking tips.

SEARCH ENGINE PAGES
These are web pages that provide a search facility to find information on the internet. They index millions of web pages and provide relevant results based on user queries. For example; Google’s search page, where users can enter search terms to find web pages, images, videos, and news.

FORUMS
Forums are online discussion sites where people can hold conversations in the form of posted messages. They are often focused on specific subjects or communities. For example; Reddit, where users discuss a wide range of topics in different subreddits.

E-COMMERCE SITES
These websites are online portals that facilitate online transactions of goods and services through means of the transfer of information and funds over the Internet. For example; Amazon, where users can browse and purchase a wide variety of products.

There are many other types of webpages such as; Educational Websites, News Websites, Social Media Websites, Corporate Websites and Government Websites. Each type of web page serves a unique role in the digital landscape, catering to different needs and interests of internet users.

SECTION 4 | STATIC VS DYNAMIC WEBPAGES

Static and dynamic web pages represent two fundamental approaches to web development, each with its own characteristics and uses. Understanding the differences between them is key to choosing the right approach for a specific web project.

STATIC WEB PAGES
Static web pages are fixed and display the same content for every user, usually written exclusively in HTML. The content of a static page doesn't change unless it is manually updated by the webmaster. They are simple to create and host, as they don't require any web programming or database design. Generally faster to load than dynamic pages since they are just HTML files being served by the server. They are ideal for small websites or pages with content that doesn't need to be updated regularly, like a company's information page.

DYNAMIC WEB PAGES
Dynamic web pages can display different content from the same source code. They are capable of producing different output for different visitors based on interaction, time of day, or other variables. Often written with server-side scripting languages such as PHP, ASP.NET, or Java Servlets. These scripts run on the server and generate HTML, which is then sent to the client's browser. Dynamic pages are often connected to a database, allowing for content to be pulled from a database dynamically. They allow for more interactivity and functionality, like user accounts, forums, e-commerce capabilities, etc. They can be slower than static pages due to the processing required on the server-side, but this can be mitigated with caching and other optimization techniques.

STATIC WEB PAGES	DYNAMIC WEBPAGES
Static HTML pages are simpler to create and manage	Dynamic pages are more complex due to the involvement of server-side scripting and databases.
Updating content on static pages requires manual HTML editing	Dynamic pages can be updated more easily through a backend system or CMS
Static pages offer limited interactivity	Dynamic pages can provide personalized and interactive user experiences.
Takes a lot of work to scale	For large sites with frequently updated content, dynamic pages are more scalable.
Static pages are generally cheaper to host and require fewer resources	dynamic pages might need more robust hosting solutions and resources.

SECTION 5 | THE WEB BROWSER

A web browser is a software application that enables users to access, retrieve, and view information on the World Wide Web. The functions of a web browser are diverse and crucial for navigating the internet.

REQUESTING WEB PAGES

URL Processing | When a user types a URL (Uniform Resource Locator) or clicks a link, the browser sends a request to the server hosting the webpage.
HTTP/HTTPS Communication | The browser uses HTTP (Hypertext Transfer Protocol) or HTTPS (the secure version of HTTP) to communicate with web servers and request web pages.

RENDERING WEB PAGES

HTML, CSS, and JavaScript Interpretation | Browsers interpret and display content written in HTML, styled by CSS, and made interactive with JavaScript.
Layout Engine | The browser's layout engine renders the web page content, organizing it into the correct structure and layout.

MANAGING USER SESSIONS AND DATA

Cookies and Session Storage | Browsers store cookies and session data to remember user information, preferences, and login states for various websites.
History and Bookmarks |They keep track of browsing history and allow users to bookmark web pages for easy access in the future.

EXECUTING WEB APPLIACTIONS

Web Application Support | Modern browsers can run complex web applications, such as email clients, word processors, and games, directly within the browser interface.
JavaScript Engine | Browsers have JavaScript engines to execute scripts efficiently, enabling dynamic content and interactive web applications.

ENSURING PRAVACY AND SECURITY

Secure Connections | Browsers facilitate secure connections (HTTPS) to protect data integrity and confidentiality during transmission.
Privacy Features | They offer various privacy features like private browsing, tracking protection, and options to manage cookies and site data.

MULTIMEDIA GRAPHICS AND DISPLAY

Multimedia Content | Browsers can display multimedia content, including images, videos, and audio, often with the support of plugins or built-in elements like HTML5.
Graphics Rendering | Advanced graphics rendering capabilities allow for the display of complex animations and graphical content.

EXTENSIONS AND PLUGINS

Expand Functionality | Browsers support extensions and plugins that allow users to customize and enhance their browsing experience with additional features and tools.

RESPONSIVE DESIGN AND MOBILE COMPATIBILITY

Adaptive Display | Browsers can adapt web content to fit different screen sizes and resolutions, essential for mobile compatibility.
Touch Interface Support | On mobile devices, browsers are optimized for touch interfaces.

DEVELOPMENT TOOLS

Debugging and Analysis | Browsers provide developer tools for debugging, testing, and analysing web pages, including inspecting elements, testing responsive designs, and monitoring network activity.

Web browsers are sophisticated tools that not only retrieve and display web content but also provide a platform for web applications, ensure secure and private browsing, manage user data, and offer extensive tools and features for both general users and web developers.

SECTION 6 | SERVER SIDE SCRIPTING

Server-side scripting is a web development technique used to create dynamic web pages that can change or customize the web page content on the server before it's sent to the user's web browser. This contrasts with client-side scripting where scripts are executed by the viewer's browser. Server-side scripting languages like PHP, ASP.NET, and Java Servlets are pivotal in this process.

In server-side scripting, the script is executed on the server, and the server sends the generated HTML to the client's browser. This allows for the creation of dynamic web content that can change depending on user interaction, time of day, database contents, and other factors. Server-side scripts often interact with a database to store and retrieve data, making it essential for e-commerce sites, social networks, and other data-driven applications. Since the scripting is done on the server, the source code is not accessible or visible to the client, which adds a layer of security.

PHP (Hypertext Preprocessor)

Open-Source | PHP is an open-source server-side scripting language.
Functionality | It's widely used for web development to create dynamic and interactive web pages. PHP scripts are executed on the server, and the result is returned to the client as plain HTML.
Database Integration | PHP is known for its strong integration with database systems like MySQL, making it a popular choice for web applications that require database interaction.
Platform Independent | PHP can be run on various platforms (Windows, Linux, Unix, etc.) and is compatible with almost all servers used today (Apache, IIS, etc.).

ASP.NET

Developed by Microsoft | ASP.NET is a server-side web application framework designed for web development to produce dynamic web pages.
Language Support | It allows programmers to write ASP.NET code using any supported .NET language (C#, VB.NET).
Framework | It's part of Microsoft's .NET framework, offering tools and libraries for building robust web applications.
Windows Integration | While it's primarily used on Windows servers, recent versions like ASP.NET Core can run on Linux and macOS as well.

Java Servlets

Java Technology | Servlets are Java programming language classes that dynamically process requests and construct responses.
Server-Side | They are used for extending the capabilities of servers that host applications accessed by means of a request-response programming model.
Platform Independence | Being part of the Java ecosystem, servlets are platform-independent and can run on any Java-enabled web server.
Robust and Scalable | Java Servlets are known for their ability to create scalable and efficient web applications. They can handle complex transactions and are integral to Java EE for enterprise solutions.

Server-side scripting languages like PHP, ASP.NET, and Java Servlets are powerful tools in web development, enabling the creation of dynamic, interactive, and data-driven web applications. They process user requests on the server, generate the appropriate content, and send it back to the client, facilitating a dynamic and interactive user experience.

SECTION 7 | CONNECTION TO DATA SOURCES

Web pages can be connected to underlying data sources to dynamically display content, interact with users, and perform various operations based on data. This connection is typically achieved through a combination of server-side scripting, databases, and sometimes APIs (Application Programming Interfaces). Here’s how it works:

DATABASES
Databases store the data that web pages need to display or manipulate. This can include user data, product information, articles, and more. Popular databases include relational databases like MySQL, PostgreSQL, and SQL Server, as well as NoSQL databases like MongoDB and Cassandra. Server-side scripts interact with databases using SQL (Structured Query Language) or other query languages, fetching data and sending it to the web page as needed.

APIs (Application Programming Interfaces)
APIs allow web pages to connect with external data sources and services. For example, a web page might use the Twitter API to display recent tweets or the Google Maps API to show maps. APIs typically exchange data in formats like JSON (JavaScript Object Notation) or XML (eXtensible Markup Language).

AJAX (Asynchronous JavaScript and XML)
AJAX allows web pages to request data from the server asynchronously without reloading the entire page. This is used for dynamic content updates. It provides a smoother, more interactive user experience. For example, loading more content as the user scrolls down a page.

CONTENT MANAGEMENT SYSTEMS (CMS)
CMSs like WordPress, Drupal, or Joomla allow non-technical users to manage website content, which is stored in a database and displayed through templates. The CMS dynamically generates HTML pages based on the content stored in the database.

WEB FRAMEWORKS
Frameworks provide libraries and tools for common tasks, making it easier to develop complex web applications that interact with databases. Many frameworks use the MVC (Model-View-Controller) architecture, separating data (Model), user interface (View), and logic (Controller) to manage data interactions more efficiently.

Connecting web pages to underlying data sources involves server-side processing, database interactions, and possibly the use of APIs and AJAX for dynamic content and external data integration. This setup allows for the creation of rich, interactive, and data-driven web applications.

SECTION 8 | COMMON GATEWAY INTERFACE (CGI)

The Common Gateway Interface (CGI) is a standard protocol used to enable web servers to execute external programs, often referred to as CGI scripts, and pass user-requested data to them. These scripts can be written in various programming languages such as Perl, Python, or even compiled languages like C or C++. The primary function of CGI is to facilitate dynamic content generation on web pages. Its key functions include:

INTERFACE BETWEEN WEB SERVER AND EXTERNAL PROGRAMS
CGI acts as a mediator between the web server and external applications or scripts. When a web server receives a request that requires a CGI program, it passes the request to the appropriate CGI script.

DYNAMIC CONTENT GENERATION
Unlike static HTML pages, CGI scripts can generate dynamic content. They can produce different outputs based on user inputs, database queries, or other factors. CGI allows for real-time interaction with users. For example, a CGI script can process form data submitted by a user and return a specific response based on that data.

PROCESSING USER INPUT
CGI is commonly used to process information submitted through web forms. When a user submits a form, the data is sent to the server, which then invokes a CGI script to process the data. After processing the input, the CGI script can generate a custom HTML page as feedback, which is then sent back to the user's browser.

DATABASE INTERACTION
CGI scripts can connect to databases to retrieve or store data. This capability is essential for applications like online shopping carts, forums, or any site that requires data retrieval and storage.

LANGUAGE AGNOSTIC
One of the advantages of CGI is that it is language-agnostic. It can work with a variety of programming languages, giving developers the flexibility to use the language with which they are most comfortable or that best suits the task.

SERVER-SIDE EXECUTION
Since CGI scripts run on the server, they provide a secure environment for processing data. The client never sees the business logic or database access codes, which helps protect sensitive information.

CGI's primary function is to extend the capabilities of a web server, allowing it to execute external programs or scripts to generate dynamic web content based on user inputs or other data sources. While CGI has been somewhat superseded by more modern technologies like server-side scripting languages and frameworks, it laid the groundwork for dynamic content on the web and is still used in certain scenarios.

SECTION 9 | THE STRUCTURE OF DIFFERENT TYPES OF WEB PAGE

The structure of different types of web pages varies significantly to cater to their distinct purposes and user interactions. Personal pages, focused on individual expression, often employ simple, visually appealing designs, prioritizing personalisation over complexity. Blogs, serving as platforms for content delivery and reader engagement, typically feature a user-friendly, content-oriented layout with dynamic elements to facilitate regular updates and interactions. Search engine pages, designed for efficiency and speed, adopt a minimalist approach, prioritizing functionality and performance. Forums, aimed at community building and discussions, require a more complex structure with clear categorization and user interaction tools. This diversity in structure underscores the adaptability of web design to meet specific functional and aesthetic needs.

PERSONAL PAGES

Structure | Typically straightforward, focusing on showcasing individual profiles, portfolios, or personal projects.
Key Elements | Biographical information, personal achievements, a gallery of work or hobbies, and contact details.
Design Considerations | User-centric, often creative, and reflective of individual personality and style.
Languages Used | Primarily HTML and CSS for structure and style. JavaScript may be used for adding interactivity.
Server-Side Scripting | Less common unless the page includes complex functionalities. Static site generators can be used for easy deployment.

BLOGS

Structure | Regularly updated with new entries, often displayed in reverse chronological order.
Key Elements | Posts or articles, categories/tags for organisation, comment sections, and sometimes author profiles.
Design Considerations | Reader-friendly layouts, emphasis on text readability, and navigational aids to explore topics.
Languages Used | HTML, CSS, and JavaScript.
Server-Side Scripting | Often built on platforms like WordPress, which use PHP. Database integration is common for storing posts and user comments.

SEARCH ENGINE PAGES

Structure | Minimalistic, focusing on the search functionality.
Key Elements | Search bar, settings/preferences, and sometimes trending topics or suggestions.
Design Considerations | User-friendly interface, fast loading, and optimised for efficiency and accuracy of search results.
Languages Used | HTML and CSS for the interface. Heavy use of JavaScript for dynamic search suggestions and results.
Server-Side Scripting | Typically involves sophisticated backend programming, often in languages like Java, Python, or C++, especially for processing and retrieving search results.

FORUMS

Structure | Organised into categories and threads to facilitate discussions.
Key Elements | Topics or threads, user comments, moderation tools, user profiles, and search functionality.
Design Considerations | Clear categorisation, easy navigation, and tools for community management and user interaction.
Languages Used | HTML, CSS, and JavaScript for frontend.
Server-Side Scripting | Commonly use PHP, Python, or Ruby. Relies on database systems like MySQL for storing threads, posts, and user information.