Web Development I (ICT 1st Year) Lecture 2

NWED51320 Web Development I (ICT 1st Year) Lecture 2

By Melvin Kisten, Department of Computer Science and Information Technology, Sol Plaatje University, South Africa
EMAIL(S): melvin.kisten@spu.ac.za, iamMelvinKisten@gmail.com
© Melvin Kisten. All rights reserved.

Outline

  • 01 Foundation Concepts
    • Internet architecture
    • World Wide Web fundamentals
    • Connectivity methods
  • 02 Website Categories
    • Personal
    • Organisational
    • Commercial platforms
    • E-commerce models
  • 03 Design Technologies
    • Markup languages
    • Development tools
    • Content management systems
  • 04 Professional Roles
    • Creative responsibilities
    • Technical responsibilities
    • Oversight responsibilities within web development teams
  • 05 Next Steps

Chapter 1: Environment & Tools

  • Modern web developers utilize evolving technologies to create professional websites featuring:
    • Multimedia integration
    • Social media integration
    • Dynamic content adaptable across various devices and screen sizes
  • Successful websites necessitate more than just technical application; thoughtful web design is required to:
    • Communicate effectively
    • Educate audiences
    • Entertain visitors
    • Facilitate business transactions

Learning Objectives

  1. Internet & Web Fundamentals
    • Grasp network architecture and the structure of the World Wide Web.
    • Understand the relationship between Internet infrastructure and web services.
  2. Connectivity Methods
    • Explore broadband, mobile wireless, and fixed wireless access technologies.
    • Analyze their impact on user experience.
  3. Website Classification
    • Categorize personal, organisational, and commercial platforms including e-commerce models and search tools.
  4. Development Tools
    • Identify various markup languages, CSS, scripting languages, editors, templates, and content management systems.
  5. Design Principles & Roles
    • Explain key web design principles and professional responsibilities, along with the required skills for creative, technical, and oversight positions.

Internet vs World Wide Web

  • Internet Infrastructure
    • A worldwide public network connecting millions of private networks:
      • Includes campus labs, faculty systems, business networks, home offices.
      • Provides access to diverse resources such as communication tools, research databases, file sharing, and commerce platforms.
  • World Wide Web
    • A subset of the Internet consisting of web servers that store electronic documents called webpages.
    • Webpages feature:
      • Images
      • Text
      • Interactive elements
      • Hyperlinks that connect related content across different websites.
  • Key Distinction:
    • The Internet provides infrastructure while the web delivers content through interconnected webpages accessed via browsers.

Webpage Anatomy

  • Home Pages: Serve as primary entry points, typically featuring:
    • Brand Identity: Company logo establishing visual recognition.
    • Navigation Elements: Menu structures guiding users through content.
    • Search Functionality Tools: Enabling content discovery.
    • Hyperlinks: Connections to additional content and resources.
  • Landing Pages: Specific entry points from advertisements, search results, or social media promotions; often serve marketing purposes with targeted messaging.

Hyperlinks & Navigation

  • Hyperlinks connect webpages within sites or across different websites:
    • Text links typically appear bold, underlined, or colored differently.
    • Mouse pointers transform from arrows to hand icons when hovering over links.
  • Clicking links may:
    • Display pictures, videos, audio files
    • Navigate to a different webpage within the same site
    • Jump to a webpage on a different site
    • Open documents or download files.
  • Previously visited text links often change color, providing visual navigation history.
  • Design Consistency: Maintain uniform hyperlink styling (color, bold, or underline) throughout your website for optimal user experience.

Societal Impact

  • Communication Revolution:
    • Email, texting, collaborative workspaces, and chat programs facilitate instant global exchange of messages, documents, and information.
  • Educational Transformation:
    • Students access podcasts, lecture transcripts, and research materials online.
  • Entertainment Access:
    • Gaming, music, and video apps provide on-demand entertainment across computers and mobile devices.
  • Business Efficiency:
    • E-commerce, videoconferencing, and telecommuting improve productivity while reducing travel costs.
    • Consideration: Constant connectivity blurs work-life boundaries, potentially affecting employees' relationships and well-being.

Communication Technologies

  • Email: Fast, inexpensive electronic messaging with file attachments. Common email clients include:
    • Thunderbird
    • Outlook
    • Gmail
  • Chat & Messaging: Real-time text, video, and file exchange via IRC, IM chat, group messaging apps (e.g., Facebook Messenger).
  • Collaborative Workspaces: Virtual meeting platforms facilitating text, audio, video, and file sharing, examples include:
    • Skype
    • WebEx
    • GoToMeeting
  • Cloud Computing: Files and software shared online through platforms like Google Drive, allowing editing, saving, and sharing without local downloads.

Social Media & Content Sharing

  • Blogs & Video Sharing: Online journals for users to share ideas and information (examples: YouTube, Vimeo).
  • Social Networking: Platforms like Twitter, Instagram, Facebook, and LinkedIn enable users to share text, photos, articles, videos, and contacts.
  • Social Bookmarking: Tools such as Delicious, Pinterest, and Digg enable users to share favorite web pages, articles, bookmarks, and tags.
  • Viral Content: Articles, blogs, and videos that are widely shared online, reaching large audiences quickly, generating commentary and imitation.
  • Hashtags: Words or phrases preceded by # symbol that create searchable message groups, serving as commentary or solidarity statements.

Educational Resources

  1. Formal Education: Universities offer online courses, degrees, and certificates, e.g., MIT publishes educational materials (homework, video lectures) accessible to everyone.
  2. MOOCs: Massive Open Online Courses delivered via the web, often for free; can be self-guided or feature interactive forums, virtual assistance, and resources.
  3. Learning Management Systems: Platforms like Blackboard, Moodle, SkillSoft, offer scheduling, communication, document sharing alongside further learning and testing resources.
    • Synchronous vs Asynchronous Learning:
      • Synchronous: Real-time classes requiring specific attendance.
      • Asynchronous: Courses allowing students to download lectures as podcasts and participate at their convenience.

Entertainment & News

  • Interactive multimedia experiences and continually updated content attract users seeking entertainment and news online:
    • Features include:
      • Music streaming
      • Video on demand
      • Sports coverage and fantasy leagues
      • Gaming
      • Interactive experiences
      • News articles and live broadcasts
      • Immersive 360° videos
  • Design Tip: Incorporate sharing methods (email, Facebook, RSS feeds, Pinterest, Twitter) and links to related content users may find interesting and relevant.

E-commerce Fundamentals

  • Electronic Commerce: Encompasses business transactions via the Internet including:
    • Product sales
    • Service delivery
    • Data exchange
  • Business Models:
    • Business-to-Consumer (B2C): Direct sales from online businesses to individual consumers, allowing endless product assortment.
    • Business-to-Business (B2B): Sales and data exchange between businesses, accounting for the majority of corporate e-commerce transactions.
    • Consumer-to-Consumer (C2C): Transactions between consumers via online auctions and person-to-person classified advertisements.
  • Key components for e-commerce sites:
    • Database integration
    • Search features
    • Electronic payment services (e.g., PayPal)

Internet Access Methods

  • Broadband Connections: High-speed transmissions via:
    • DSL
    • CATV lines
    • FTTP
    • Satellite
  • Wi-Fi: Wireless connectivity allowing devices within a specific range, which may be password protected or publicly accessible.
  • Mobile Wireless: 3G, 4G, and 5G systems providing mobile broadband access.
  • Fixed Wireless: Uses satellite technology to connect stationary objects; employs radio signals between transmitting towers and antennas for high-speed connections.
  • Transfer Rates: Measured in bits per second (bps), kilobits (kbps), and megabits (Mbps). Higher transfer rates support streaming media, gaming, and conferencing.

Internet Service Providers

  • ISPs: Maintain permanent Internet connections and offer temporary access.
    • Regional ISPs serve specific geographic areas.
    • National ISPs provide access across major cities and towns nationwide, often offering extensive services and technical support.
    • Example: Cable companies (e.g., Vodacom, MTN) bundle Internet with television and telephone services, potentially saving costs but limiting provider options.
    • Safety Considerations: Internet use involves risks, such as:
      • Viruses
      • Personal information exposure
      • Anything posted online may remain permanently accessible, even after deletion attempts.

Web Browsers

  • Functionality: Browsers request, download, and display webpages from servers.
  • Common Features:
    • Address bars
    • Favorites lists
    • History
    • Tabs
    • Back/Forward buttons
  • Market Share:
    • 65% Google Chrome
    • 20% Microsoft Edge, succeeds Internet Explorer
    • 10% Mozilla Firefox
    • 5% Others (Opera, Safari, mobile-specific browsers)
  • Mobile Browsers: Adapt web content for smaller screens and touch interfaces, supporting responsive web design (RWD) adjustments.

URL Structure

  • A Uniform Resource Locator (URL) identifies web pages and resources on the Internet:
    • Minimum components:
      • Domain name
      • Top-level domain designation (e.g., .com)
    • Protocol: Specifies the data transmission method (e.g., http://).
    • Domain Name: Text version of a numeric IP address registered through accredited registrars (e.g., GoDaddy).
    • Top-Level Domain: Indicates the type of organization (e.g., .com for commercial, .edu for educational, .gov for government, .org for nonprofit).
    • Path: Specifies resource location on the site (e.g., /news).
    • Design Tip: Select short, memorable domain names related to the website’s purpose or the publisher’s name (e.g., business.com, ask.com).

Website Categories

  • Personal Websites:
    • Created by individuals to promote employment credentials, share news, or discuss hobbies and interests.
    • Generally less complex; designers assume all roles.
  • Organisational/Topical Websites:
    • Owned by groups, associations, and organisations to promote member accomplishments and encourage participation.
    • May focus on specific subjects and could face funding limitations.
  • Commercial Websites:
    • Promote and sell business products and services, ranging from home-based enterprises to corporations.
    • Variation in design and content sophistication based on organization size.

Personal Website Considerations

  • Content Options:
    • Employment credentials and résumé
    • Photo galleries and biography
    • Blog posts and personal interests
    • Contact information
    • Hobby descriptions and resources
  • Content Management Systems (CMS):
    • Enable focus on content rather than structure.
    • Free alternatives: Blogging platforms and social networking tools.
  • Important Warnings:
    • Be cautious of online content; it is easily accessible and may be scrutinized by employers and recruiters.
    • Online content remains permanent, enabling potential identity theft.
    • Domain Reservation Advice: It is recommended to reserve personal domain names even without immediate website needs.

Organisational Websites

  • Groups, Associations & Organisations:
    • Create sites to promote activities and encourage support.
    • Examples of International organisations include the WHO and UN, providing global health resources.
    • Professional associations offer resources for members, networking, and professional development.
    • Volunteer groups coordinate community activities and share impact stories.

Content Evaluation for Organisational Websites

  • Ensure webpages contain accurate, current, objective, and authoritative content. Evaluate sites for these four elements carefully.

Commercial Website Examples

  • Large Enterprise (B2B):
    • SAP sells and supports software with a complex website tailored for business clients.
  • Small Business (B2C):
    • Constructure, a construction design firm, maintains a simpler site targeting individual consumers.

Search Engines

  • Definition: Web-based tools that locate webpages using keywords and phrases found within pages.
  • Process: Users enter keywords in search boxes, then click Search buttons.
  • Web Crawlers: Programs that browse the web for new pages, adding URLs and information to indexes.
  • Meta Tags: Special codes containing keywords and descriptive data about webpages.
  • Search Results: Matches between keywords and indexed content; displayed as a list of relevant pages.
  • Metasearch Engines: (e.g., Yippy, Info.com, Dogpile) that perform searches using multiple search engine indexes simultaneously.
  • SEO Tools: Meta tags, descriptive page titles, relevant inbound links, and quality text improve the likelihood of appearing high in search results.

Search Directories & Portals

  • Search Directories: Reviewed and categorized by human editors into hierarchical categories (e.g., arts, health).
    • Example: DMOZ organizes categories like Recreation → Food → Spicy → Cooking.
  • Portal Websites: Offer starting points for accessing information, categorized as:
    • General consumer portals (e.g., AOL, MSN)
    • Personal portals (MyYahoo!
    • Vertical portals (e.g., usa.gov)
    • Corporate portals (intranets)
  • Hybrid Tools: Many popular tools combine search engines with directories for comprehensive search capabilities.

Specialized Website Types

  • Travel & Mapping:
    • Services like Travelocity and Expedia for booking flights and hotels; MapQuest and MapMyRun for directions.
  • Financial Services:
    • Platforms like Citizens Bank and E*Trade allow for online bill payments, fund transfers, and investments.
  • Career Platforms:
    • Job search and networking services such as Monster, LinkedIn, and CareerBuilder.
  • Web Publishing:
    • Tools like WordPress and Joomla! enable content publishing without technical expertise, covering diverse topics.

Evaluating New Technologies

  • Standards Compliance: Does the technology adhere to web development/design standards?
  • Purpose Alignment: How does the technology further website objectives?
  • Impact Assessment: How will implementation affect aspects like visual appeal and accessibility?
  • Security Implications: What are the implications for security and other site elements?
  • Cost Analysis: Evaluate direct and indirect costs of technology implementation.
  • Return on Investment: When will investment yield returns?
  • Design Principle: Ensure new technologies are integrated thoughtfully into existing features and improve the visitor experience.

Markup Languages

  • HTML: Hypertext Markup Language uses predefined tags to define formats and organization of webpage elements (tags are in lowercase, bracketed, pair-inserted).
  • HTML5: Current standard incorporating sections, video, audio, and RWD protocols for mobile browser adaptations.
  • XML: Extensible Markup Language that uses predefined tags to structure data.

Cascading Style Sheets (CSS)

  • CSS documents establish uniform appearance for webpage content:
    • Key Benefits:
      • Style specifications stored in style sheets
      • Style sheets can be linked to multiple web pages
      • Automatic changes across pages
      • Ensures consistent look and feel
    • Cascading: Refers to the order styles are applied to elements.
    • Design Principle: Apply CSS uniformly across all pages for professional consistency.

Scripting Languages & Active Content

  • Definition: Programming languages used to create scripts for real-time execution on servers or browsers during webpage downloads.
  • JavaScript: A popular language for adding interactivity and dynamic features to webpages.
  • PHP (Hypertext Preprocessor): Enables server-side scripting and database connections.
  • CoffeeScript: A cleaner syntax version of JavaScript used by developers.
  • Active Content: Includes polls, streaming video, maps, and animations created through scripting languages to enhance user engagement.
  • Security Warning: Active content can be exploited to transmit malware; some browsers may block it by default requiring user permissions.

Text & HTML Editors

  • Text Editors:
    • Software for creating plain text files; Notepad (Windows) allows typing HTML tags and related text.
    • Some designers prefer text editors for better control over code.
  • HTML Editors: Enhanced text editors with features for inserting HTML tags and attributes easily:
    • Examples: HTML-Kit, CoffeeCup HTML Editor, BBEdit, NoteTab.
    • Provide syntax highlighting, code completion, and validation tools for improved coding efficiency.

Web Development Tools

  • **WYSIWYG Editors (