Module 1 -V1- web basics.pptx

Web Design and Development - 24BCAGL107 Module-1 WEB BASICS  The internet is essentially a vast network of interconnected computers that communicate with each other using a standardized set of protocols. It allows for the sha...

Web Design and Development - 24BCAGL107 Module-1 WEB BASICS  The internet is essentially a vast network of interconnected computers that communicate with each other using a standardized set of protocols. It allows for the sharing of information and resources Internet? globally. Here’s a real-time example to illustrate how it works: Video call using platforms like Zoom or Teams. REAL TIME EXAMPLES??  The World Wide Web (WWW) is a system of interlinked hypertext documents and multimedia content that is accessed via the internet. It’s often referred to simply as "the web." WWW Key Components: Web Pages Web Servers Web Browsers Hyperlinks REAL TIME EXAMPLES??  Scenario: You want to check your email. Real-Time Example:  Entering URL: You type www.gmail.com into your browser’s address bar. Request: Your browser sends a request to Gmail’s web server. Server Response: The Gmail server sends back the HTML and other files needed to Steps: display the Gmail login page. Rendering: Your browser processes these files and shows you the Gmail login screen. Interaction: You enter your email address and password, which are sent back to the server for verification. If the details are correct, you’re logged in and can access your emails. The internet versus The web  Aspect Web Internet Definition A system of interconnected A global network of documents and multimedia interconnected content accessible via the computers that Internet. communicate with INTERNET VS each other. Founded The Web was invented by Tim The concept of the Berners-Lee in 1989. Internet emerged in the WEB Architecture Operates on a client-server 1960s. Consists of a vast model where web browsers network infrastructure (clients) request and receive including routers, data (servers). cables, and data centers. First Version NSFNET ARPANET Functionality Primarily focused on delivering Enables a wide range and displaying hypertext of digital documents and multimedia. communications, including the Web, email, FTP, and VoIP. Type A service and application layer The underlying that operates on the Internet. infrastructure and network that connects computers globally. Connectivity & Requires a web browser to Provides the Browsing navigate and access web foundational pages using URLs. connectivity that allows various networked services, including browsing. Protocol Primarily uses Uses a suite of HTTP/HTTPS for accessing protocols, notably and transferring web content. TCP/IP, for general data transmission. Application Websites, web applications, Broad applications online media, and interactive including web services, services. email, online gaming, file sharing, and more. Anatomy of a web page the  Description: Top section of a web page. Components: Logo: Brand or site identity. Navigation Menu: Links to other pages (e.g., Home, About, Contact). Search Bar: Allows users to search content on the site. Header  Description: Central part of the page where primary information is displayed. Components: Headings: Titles and sub-titles (e.g., H1, H2). Main Content Text: Paragraphs and content. Images/Videos: Visual media to enhance content. Area Links: Hyperlinks to other pages or external sites. Forms: For user input (e.g., contact forms).  Description: Side area for supplementary content. Components: Widgets: Small tools or functions (e.g., calendar, weather). Sidebar Recent Posts/Articles: Links to recent content. Advertisements: Promotional content or ads. (Optional)  Description: Bottom section of a web page. Components: Contact Information: Email, phone number, address. Links: Privacy policy, terms of service, site map. Social Media Icons: Links to social profiles. Footer Creating web content  Identify Target Audience: Define who they are (age, interests, needs). Tailor Content: Adjust tone, language, and format to audience preferences. Understanding User Research: Use surveys, analytics, Your Audience and feedback.  Text Content:Articles, blog posts, and product descriptions. Visual Content:Images, infographics, and videos. Types of Web Interactive Content:Quizzes, forms, Content and polls.  Headlines: Craft compelling and clear headlines. Introduction: Hook the reader with an engaging opening. Creating Body: Provide valuable information, Engaging Content use subheadings for structure. Conclusion: Summarize key points and include a call-to-action (CTA).  Visual Hierarchy: Use headings, bullet points, and spacing to improve readability. Design and Layout Consistency: Maintain a consistent style and tone. Mobile-Friendly: Ensure content is responsive and easy to read on all devices.  Readable Fonts: Choose fonts that are easy to read. Contrast: Ensure sufficient contrast Content Accessibility between text and background. Alt Text for Images: Provide descriptions for visually impaired users. Keyboard Navigation: Ensure the site is navigable via keyboard.  CMS (Content Management Systems): Use tools like WordPress, Joomla. Content Content Calendar: Plan and schedule content updates. Management Regular Updates: Keep content current and relevant.  Track Performance: Use tools like Google Analytics to monitor engagement. Analytics and Gather Feedback: Use surveys and Feedback comments to improve content. Adjust Strategies: Refine content based on performance data.  Definition: The process of distributing web content (HTML, images, videos, CSS, JS) from UNDERSTANDING servers to users. WEB CONTENT Purpose: DELIVERY To ensure fast, reliable, and scalable content access. User Request: The browser sends an HTTP request to a server. DNS Resolution: Domain names are translated into IP addresses. Server Processing: The server processes the request and prepares the content. Response: The server sends the content back to the browser.  The fundamental communication model used in web and network interactions, where a client sends a request to a server, and the server processes that request and sends back a response. Request/Response Client: The entity (e.g., web browser, mobile app) that procedure initiates the request. Server: The system (e.g., web server, database server) that processes the client’s request and sends back the appropriate response. Protocol: The communication rules, such as HTTP/HTTPS, that define how the request and response are formatted and transferred.  Client Sends a Request The client initiates the process by sending a request to the server. This request consists of: Request/Response Method: Defines the action to be performed (e.g., GET, POST, PUT, DELETE). Flow URL: The resource the client is requesting (e.g., a web page or an API endpoint). Headers: Additional metadata like authentication tokens, content type, and browser information. Body (optional): Data sent to the server, usually with methods like POST or PUT (e.g., form data, JSON payload).  Client Sends a Request Method: Defines the action to be performed (e.g., GET, POST, PUT, DELETE). Server Processes URL: The resource the client is requesting (e.g., a web page or an API endpoint). the Request Headers: Additional metadata like authentication tokens, content type, and browser information. Body (optional): Data sent to the server, usually with methods like POST or PUT (e.g., form data, JSON payload).  The server receives the request and processes it based on: The method used (e.g., fetching data for GET, updating data for POST). Server Processes The resource requested (e.g., fetching an HTML the Request page, querying a database). The authentication and headers provided (e.g., verifying access permissions, processing cookies).  The server responds with: Status Code: Indicates whether the request was successful or failed (e.g., 200 OK, 404 Not Found, 500 Internal Server Error). Server Sends a Headers: Similar to the request, response headers carry metadata like content type, Response caching information, and cookies. Body (optional): The actual data sent back (e.g., an HTML page, JSON data, an image, or a file).  GET: Requests data from the server (e.g., loading a webpage or retrieving data via an API). POST: Sends data to the server, often to create or update resources (e.g., form submissions). HTTP Methods PUT: Updates existing resources with new data. (Verbs) DELETE: Deletes a specified resource from the server. PATCH: Partially updates an existing resource.  1xx Informational: The request was received and is being processed (e.g., 100 Continue). 2xx Success: The request was successfully processed (e.g., 200 OK, 201 Created). Status Codes 3xx Redirection: The client needs to take additional action (e.g., 301 Moved Permanently, 304 Not Modified). 4xx Client Errors: There’s an issue with the client’s request (e.g., 400 Bad Request, 401 Unauthorized, 404 Not Found). 5xx Server Errors: The server failed to fulfill a valid request (e.g., 500 Internal Server Error, 503 Service Unavailable).  Sessions and Cookies: Cookies can be sent in requests to maintain user sessions, like when staying logged in to a website. Caching: Servers may cache Key Concepts responses to avoid repeated requests for the same data, improving speed and performance. Security: HTTPS ensures the request and response are encrypted to protect data, especially sensitive information like login credentials.  Web Server: Stores and serves the website content (e.g., Apache, Nginx). Content Delivery Network (CDN): Distributes content across multiple Key Components of locations for faster access (e.g., Cloudflare, Akamai). Web Delivery Load Balancer: Distributes traffic across multiple servers to prevent overload. Caching: Temporary storage of content to improve load times.  A CDN (Content Delivery Network) is a system of distributed servers that work together to deliver web content, such as images, videos, and other static files, to users more efficiently. Distributed Servers: CDNs have servers in multiple locations around the world. These are called edge servers. Caching: CDN servers store copies of static content (like CDN images, stylesheets, or scripts) from websites. When a user requests the content, it's delivered from the nearest server rather than the origin server. Load Balancing: It helps balance the traffic between servers to ensure that no single server is overloaded. Improved Speed: By reducing the physical distance between the user and the server, CDNs can significantly speed up web page loading times. Enhanced Security: CDNs often offer built-in protection against threats like Distributed Denial-of-Service (DDoS) attacks and can handle spikes in traffic efficiently.  Imagine you're in India, and the website you’re visiting is hosted on a server in the US. Without a CDN, your request has to travel all the way to the US server, making the process slower. But if the Example: website uses a CDN with an edge server in India, your request is handled locally, making it much faster.  HTTP: Hypertext Transfer Protocol – the foundation of data communication on the web. HTTPS: Secured version of HTTP using encryption (SSL/TLS). HTTP vs Why HTTPS? HTTPS Ensures data integrity Protects against data theft Improves user trust  Minification: Compress HTML, CSS, and JavaScript files. Web Performance Lazy Loading: Load images only when they are needed. Optimization Techniques Browser Caching: Allow browsers to store static assets locally. CDN Use: Employ CDN to reduce latency.  Example: How Amazon uses AWS CloudFront (CDN) to deliver content to millions of users globally. Real-World Example Results: Faster load times, scalability during traffic spikes, and enhanced security.  Definition: A CDN is a network of geographically distributed servers. Purpose: Improves content delivery speed by caching content closer to users. Role of CDNs in Web Benefits: Content Delivery Reduced latency Higher availability Reduced server load What's hosting?  Hosting refers to the service of providing Storage, Resources, infrastructure on the internet, Allowing websites, Hosting Applications, Services to be accessible online. Web hosting is essential because it provides the technology and infrastructure that allow websites to be accessible on the internet.. Why hosting?  When you "host" something, you're essentially renting space and resources (like servers, bandwidth, etc.) from a provider to keep your website or app live WHAT HAPPENS and functional for users to access WHEN YOU "host"  Shared Hosting: Basic, cost-effective, and ideal for small websites. VPS (Virtual Private Server): More control, privacy, and resources for growing websites. Types of Hosting Dedicated Hosting: Full control, best for large businesses or heavy-traffic sites. Services Cloud Hosting: Scalable, reliable, and flexible, ideal for fluctuating traffic. Managed Hosting: Server maintenance by the hosting provider, great for non-technical users. Colocation Hosting: You provide the hardware, the data center provides the infrastructure. Factors to Consider When Choosing a Host  1. Performance (Uptime, speed) 2. Pricing and features 3. Security offerings 4. Scalability and flexibility Factors 5. Support and customer service  Initial Pricing vs Renewal Costs: Many providers offer low introductory rates that increase after the first term. Be aware of renewal pricing. Pricing and Value for Hidden Fees: Ensure there are no extra Money charges for essential features like SSL, backups, or email accounts. Money-Back Guarantee: A host offering a refund period (e.g., 30 days) allows you to test their services risk-free.  Customer Reviews: Look at online reviews and testimonials from current or previous users to assess the reliability and performance Reputation of the provider. Industry Recognition: Awards or and Reviews recognitions in the hosting industry can be an indicator of quality.  Free Trials: Some providers offer free trials or money-back guarantees to test Free Trials & their service before committing. Free Website Migration: If you're Migration switching from another provider, look for hosts that offer free website migration to simplify the process.  Shared/VPS Hosting: Bluehost, SiteGround, HostGator Cloud Hosting: Amazon Web Services Popular Web (AWS), Google Cloud, DigitalOcean Managed WordPress Hosting: WP Hosting Providers Engine, Kinsta Testing web content  It involves verifying that the text, images, videos, links, forms, and interactive elements on a website work properly across different browsers, devices, and user scenarios. Testing Ensures consistent user experience and accessibility for all users.  Consistency: Ensures users see the same content across devices and browsers. SEO: Proper content display can improve SEO rankings. Why is Web Content User Experience (UX): Testing ensures that Testing Important? navigation, forms, and interactions work seamlessly. Legal Compliance: Ensures accessibility and other standards like ADA compliance. Security: Tests content for vulnerabilities such as broken links or outdated plugins. What to Test in Web Content?  Text: Ensure all written content (headers, paragraphs, lists) is readable, free of errors, and styled properly. Images and Videos: Check that media displays correctly across devices, is responsive, and doesn't break the layout. Links: Ensure all hyperlinks and internal/external links What to Test work and redirect properly. Forms: Test form fields, validation messages, and submit actions. Interactive Elements: Verify buttons, sliders, dropdowns, and navigation work correctly. Metadata: Check the page titles, descriptions, and alt text to make sure they're correct for SEO.  Performance Testing Page Load Speed: Ensure content loads quickly, especially images and videos. Cache Testing: Test how cached versions of the content load across different users and devices. Responsiveness: Ensure content adjusts dynamically to different screen sizes without TYPES breaking. Accessibility Testing Use tools like WAVE or Axe to check if your web content is accessible to people with disabilities. Ensure proper use of alt text for images, captioning for videos, and ARIA (Accessible Rich Internet Applications) labels for interactive elements. Test keyboard navigation and screen reader compatibility.  Google Lighthouse: For performance, accessibility, and SEO audits. W3C Validator: To ensure HTML and CSS code follow web standards. Screaming Frog: For crawling your website to Tools for Web check for broken links and missing metadata. Cross-browser Testing Tools: BrowserStack, Content Testing Sauce Labs, or LambdaTest for checking compatibility across different browsers. Why Test with Multiple Web Browsers? When testing websites or applications across multiple web browsers, it ensures compatibility, consistency, and performance across different platforms. Different Rendering Engines: Web browsers use different engines (e.g., Chromium for Chrome, Gecko for Firefox) to render web content. User Experience: Different users prefer different browsers (e.g., Chrome, Firefox, Safari, Edge), and testing ensures that everyone has a smooth experience. Feature Support: Some features, like CSS animations or JavaScript APIs, may be supported differently across browsers. Performance Variations: Some browsers handle web resources like images, scripts, and CSS faster or slower than others. Common Browsers for Testing?  BrowserStack: Allows real-time testing across many browsers and devices. Selenium: An automation tool that allows running tests across different browsers. Tools for Cross- Sauce Labs: Offers cloud-based automated cross- Browser Testing browser testing. Lambdatest: Cloud-based testing platform for desktop and mobile browsers. CrossBrowserTesting: Another cloud-based tool for testing on real devices and browsers.  Manual Testing: You manually interact with the website on each browser and device. Pros: Greater control over visual and functional aspects. Cons: Time-consuming and less scalable. Manual vs. Automated Testing Automated Testing: Using tools like Selenium to run scripts that test functionality across multiple browsers. Pros: Faster, scalable, and repeatable. Cons: Limited to functional testing, and visual bugs may go unnoticed. What is Responsive Web Design?  Responsive Web Design is a design approach that ensures websites adapt to different screen sizes and devices, providing an optimal viewing experience. RWD Key Seamless user experience across devices— desktops, tablets, and smartphones. Why is Responsive Web Design Important? User Experience: Enhances usability and accessibility on all devices. SEO Benefits: Google favors mobile-friendly sites in search rankings. Cost-Efficiency: One website for all devices instead of multiple versions. Increased Mobile Traffic: Over 50% of web traffic comes from mobile devices. Core Principles of Fluid Grid Layouts: Uses relative units like Responsive Web percentages instead of fixed units like pixels for Design defining layout widths. This allows elements to resize relative to the screen size. Flexible Images: Ensures that images adjust their size within their containing element, often using CSS rules like max-width: 100% to prevent them from exceeding the container width. Media Queries: Allows the application of different styles for different screen sizes or device characteristics. For example, @media queries in CSS apply specific styling rules based on screen width, height, orientation, and resolution. Benefits of Improved User Experience: A responsive site provides a consistent, optimized experience Responsive Web across devices, making navigation easier and Design enhancing user satisfaction. Cost-Effective: Reduces the need to create and maintain separate versions of the website for desktop and mobile users. SEO Friendly: Google and other search engines favor responsive websites because they provide a unified experience across devices, helping improve rankings in search results. Adaptability: A responsive site is more adaptable to new devices and screen sizes, future-proofing the design to some extent.  Best Practices for Start with a Mobile-First Approach: Design for smaller screens first and gradually enhance the experience for Responsive Web larger screens. This approach helps prioritize core content and features for mobile users. Design Use CSS Flexbox and Grid Layouts: These CSS tools offer more flexibility in arranging content and make it easier to create responsive layouts without extensive media queries. Breakpoints: Set logical breakpoints (e.g., 480px for small screens, 768px for tablets, 1024px for desktops) instead of targeting specific device dimensions. This ensures smooth scaling across a wide range of devices. Optimize Content for Touch: Ensure that interactive elements are large enough to be tapped easily and that the spacing around them is sufficient on touch devices. Prioritize Performance: Minimize file sizes and optimize media to reduce loading times, particularly on slower mobile networks. Use lazy loading for images and asynchronous loading for scripts. Responsive Typography: Use scalable units like em or rem for font sizes, allowing text to adjust smoothly to different screen sizes.  Popular Tools: Bootstrap: Framework with pre-built responsive components. Media Query Generators: Tools to easily generate CSS media queries. Responsive Design Google Mobile-Friendly Test: Tool to test how Tools responsive your website is.