Unit_1_2024.pptx

WEB DESIGN BRANCH:- BCA SEMESTER:- 1 PREPARED BY:-  INTRODUCTION TO HTML Name of the faculty, designation ASOIT Outline about the topics Learning Objectives Actual Content to be delivered Summary of the what has been delivered in the lectures...

WEB DESIGN BRANCH:- BCA SEMESTER:- 1 PREPARED BY:-  INTRODUCTION TO HTML Name of the faculty, designation ASOIT Outline about the topics Learning Objectives Actual Content to be delivered Summary of the what has been delivered in the lectures 2 BASIC PRINCIPLES INVOLVED IN DEVELOPING A WEB SITE 1. Purpose and Goals Clarity: Define the purpose of your website clearly. Know what goals you want to achieve (e.g., inform, sell products, entertain). 2. User-Centered Design Usability: Ensure the website is easy to navigate, with intuitive information architecture and clear calls to action. 3. Responsive Design Adaptability: Design your website to be responsive, meaning it should work well on different devices and screen sizes (desktops, tablets, smartphones). 4. Performance Optimization Speed: Optimize your website for fast loading times. This includes minimizing file sizes (HTML, CSS, JavaScript, images), leveraging caching techniques, and using content delivery networks (CDNs) 3 BASIC PRINCIPLES INVOLVED IN DEVELOPING A WEB SITE 5. Navigation and Information Architecture Structure: Design a clear and logical navigation structure that helps users find information easily and quickly. 6. Visual Design Aesthetics: Create a visually appealing design that reflects your brand identity and resonates with your audience. 7. Security Protection: Implement security measures to protect user data and secure transactions (e.g., SSL certificates, encryption, secure authentication). 8. Testing and Iteration Quality Assurance: Conduct thorough testing across different browsers, devices, and user scenarios to identify and fix bugs, usability issues, and performance bottlenecks. 4 PLANNING PROCESS 1. Understand Requirements and Design Examine design mockups or wireframes to understand the visual requirements and styling preferences. 2. Setup Project Structure Organize your CSS files into a clear folder structure (e.g., base, components, layouts) for better manageability. 3. Choose CSS Methodology Select a CSS methodology such as BEM (Block Element Modifier), SMACSS (Scalable and Modular Architecture for CSS), or others that suits your project’s complexity and team structure. 4. Define Global Styles Include a CSS reset or normalize stylesheet to establish consistent default styles across different browsers. 5. Component Styling Style each component (e.g., buttons, forms, cards) individually, focusing on encapsulation and reusability. 5 FIVE GOLDEN RULES OF WEB DESIGNING 1.User-Centric Design:- Ensure that the website's structure and navigation are straightforward, allowing users to find information quickly and easily. Use clear labels, logical menus, and a consistent layout. 2. Accessibility:- Design the website to be accessible to all users, including those with disabilities. This involves using proper HTML tags, ensuring color contrast, and providing alternative text for images. 3.Visual Hierarchy and Clarity:- Use a grid-based layout to keep content organized. Prioritize content visually using size, color, and placement to guide users' attention to the most important elements first. 4. Mobile Responsiveness:- Ensure that the website looks and functions well on a variety of devices and screen sizes, from desktops to smartphones. Use responsive design techniques like flexible grids and media queries. 5.Touch-Friendly:- Optimize the site for touch interactions, considering the size and spacing of clickable elements to accommodate finger taps. 6.Optimized Media:- Compress images and other media to reduce file sizes without sacrificing quality. Use appropriate formats and lazy loading to improve performance. 6 DESIGNING NAVIGATION BAR Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the and elements makes perfect sense: Example:- Home News Contact About 7 PAGE DESIGN Home About Blog Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at convallis purus, sed laoreet eros. Integer vel libero eget magna ultricies vehicula. Sidebar This is the sidebar content. It could include links, ads, or other relevant information. © 2024 My Publishing Website 8 PAGE DESIGN header { background: #333; color: #fff; padding: 1rem 0; text-align: center; } nav { background: #444; color: #fff; padding: 0.5rem 0; } footer { background: #333; color: #fff; text-align: center; padding: 1rem 0; position: fixed; width: 100%; bottom: 0; 9 } HOME PAGE LAYOUT 10  DESIGN CONCEPT. 1. Define the Purpose and Goals Identify the Purpose: Determine why the website is being created. Is it for business, personal use, e-commerce, information sharing, portfolio showcasing, or community building? Set Clear Goals: Establish what you aim to achieve with the website, such as increasing sales, building brand awareness, generating leads, or providing valuable information. 2. Understand the Target Audience Audience Research: Identify the demographics, preferences, and needs of your target audience. Understanding your audience helps tailor the design and content to their expectations. User Personas: Create detailed personas representing different segments of your audience to guide design decisions. 3. Create a Content Strategy Content Inventory: List all the types of content you plan to include, such as text, images, videos, blogs, and products. Content Hierarchy: Organize content in a logical and hierarchical manner to ensure easy navigation and accessibility. SEO Considerations: Optimize content for search engines to improve visibility and attract organic traffic. 11 BRIEF HISTORY OF INTERNET 1960s: The Concept and Early Research. 1970s: Development and Expansion. 1980s: Standardization and Growth. 1990s: The World Wide Web and Commercialization. 2000s: Broadband and Social Media. 2010s to Present: Mobile Internet and the Internet of Things (IoT). 12 WHAT IS WORLD WIDE WEB The World Wide Web is about communication between web clients and web servers. Clients are often browsers (Chrome, Edge, Safari), but they can be any type of program or device. Servers are most often computers in the cloud. 13 WHY CREATE A WEB SITE 1. Online Presence and Visibility 2. Credibility and Professionalism 3. Marketing and Promotion 4. Information and Resources 5. Customer Interaction and Engagement 6. Sales and Revenue Generation 7. Cost-Effective Marketing 14 WEB STANDARDS HTML (HyperText Markup Language) The standard markup language for creating web pages and web applications. HTML5 is the latest version, introducing new elements and APIs for more powerful web applications. CSS (Cascading Style Sheets) A style sheet language used for describing the presentation of a document written in HTML or XML. CSS3 is the latest version, adding new features such as flexbox, grid layout, and animations. JavaScript A programming language that enables interactive web pages. ECMAScript is the standardized version of JavaScript, with ES6 (ECMAScript 2015) being a major update that introduced many new features. HTTP/HTTPS (Hypertext Transfer Protocol/Secure) Protocols used for transmitting data over the web. HTTPS is the secure version of HTTP, adding encryption for data protection. DOM (Document Object Model) A programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. XML (Extensible Markup Language) A markup language that defines rules for encoding documents in a format that is both human- readable and machine-readable 15  AUDIENCE REQUIREMENT. 1. Identify the Target Audience Demographics: Determine the age, gender, location, income level, education, and occupation of your audience. 2. Conduct Audience Research Surveys and Questionnaires: Collect data directly from potential users to understand their preferences and requirements. 3. Develop User Personas Create detailed user personas to represent different segments of your target audience. Each persona should include: Name and Photo: A fictional name and photo to humanize the persona. Behavior: Online habits, preferred devices, and social media usage. 4. Define User Scenarios and Journeys User Scenarios: Describe specific situations in which a user might interact with your website. For example, “John wants to buy an eco-friendly product for his home.” 16 AUDIENCE REQUIREMENT. 5. Design with the User in Mind Content: Create relevant and valuable content that addresses the needs and interests of your audience. This includes blogs, videos, product descriptions, and FAQs. 6. Ensure Accessibility and Usability Accessibility: Design the website to be accessible to all users, including those with disabilities. Follow the Web Content Accessibility Guidelines (WCAG). 7. Optimize for Performance Loading Speed: Ensure the website loads quickly to keep users engaged. Mobile Responsiveness: Design a responsive website that works well on all devices, especially mobile phones and tablets. SEO Optimization: Implement SEO best practices to improve visibility in search engine results and attract more visitors. 8. Continuous Improvement Analytics and Feedback: Continuously monitor website analytics and user feedback to identify areas for improvement. 17 Thank You…… 18