CIM103 | WebLab
Class Recordings
As a courtesy, all class sessions will be recorded and made available to students. They will be uploaded to the corresponding week on Canvas.
Note: The recordings are for educational purposes only and should not be shared or distributed outside the class.
Final Project
This is the opportunity to create your own portfolio or business website.
You can use some of the tools available, but the use of full templates or AI generated templates is not allowed
Intro to the Internet
The internet is a giant, always-on network that connects people, apps, and devices around the world.
It runs your socials, your streaming, your delivery apps, your online classes, your maps, and your never-ending group chats. It’s not one thing—it’s a whole ecosystem. And once you get the basics, a lot of “internet mysteries” suddenly start making more sense.
How does the internet work?
How do Networks communicate?
Each packet is assigned source and destination addresses, to allow identifying where the information goes and where it's coming from. Once the packets arrive at their destination, they are reassembled in the correct order to reconstruct the original data.
- Instead of sending it as one big chunk, a message is divided into smaller pieces called packets
- Each packet contains a piece of the data plus information about its destination and how to reassemble the message
- Packets are sent separately across the network and may take different paths to get to the same destination.
- At the destination, packets are reassembled into the original message.
- Benefits:
- Efficient use of network resources since packets can take the fastest available route.
- Reliable, as lost packets can be re-sent without resending the entire message.
- Allows multiple users to share the same network without needing a dedicated line for each connection.
Internet vs. Web
The internet is is a global system of interconnected computer networks.
The Web (www - World Wide Web) is collection of websites and online content that runs on the internet.
Accessing the Internet
To access the internet, consumer will contract an ISP, Internet Service Provider.
https://www.webfx.com/blog/internet/who-controls-the-internet-a-state-by-state-look/
Accessing the WWW
To view multimedia web pages on the the World Wide Web, you need need a web browser and need to be connected to the internet.
What is ISP?
An ISP is the company providing your connection to the internet (Comcast/Verizon/AT&T etc.).
Type of Internet Connections:
Phone: When the internet started, most connections were through the phone line.
DSL: (or Digital Subscriber Line) still over the phone but sets an unused telephone wires and does not interphere with your telephone service.
Cable: Provided by your local cable provider.
Fiber-Optic: The fastest connection so far.
Satellite: It is slow but it reaches places wher the other methods might not have access. Now with Starlink speed is improving but still does not compare to fiber-optic.
What about speed?
Bandwidth = how much data can move per second (bigger pipe = more flow)
Bandwidth
- Bandwidth is the amount of data that can be transmitted over your internet connection.
- The amount of transmitted data affects the connection speed.
- Higher Bandwidth = Faster Speed
- A higher bandwidth connection can handle more simultaneous activities without a significant drop in speed.
Gigabytes or Gigabits?
Data Storage Units
- 1 byte (8 bits)
- 1 kilobyte or K (1024 bytes)
- 1 megabyte or MB (1024 Kilobytes)
- 1 gigabyte or GB (1024 Megabytes), etc
- Gigabytes (GB) are used to measure the size of files, data storage, and memory capacity.
- A photo might be 3–8 MB
- A 1-hour HD movie might be 1–3 GB
- A big game download might be 50–150 GB
- Your phone plan might include 10 GB of hotspot
- Gigabits (Gbps) are used to measure the speed at which those files can be transfered over the network.
- Sample bandwidth offers.
- Used to measure internet speed (download/upload). Uploading is usually slower than downloading because faster upload is often sold as a premium feature (especially for creators/business plans)
- Downloading a 2 GB movie
- On 300 Mbps: time ≈ (2 × 8,000) / 300 = ~53 seconds
- On 1 Gbps (1000 Mbps): time ≈ (2 × 8,000) / 1000 = ~16 seconds
- Uploading a 1 GB video
- On 20 Mbps upload: time ≈ 8,000 / 20 = ~400 seconds = 6–7 minutes
- On 100 Mbps upload: time ≈ 8,000 / 100 = ~80 seconds
- Hotspot
- If your hotspot cap is 10 GB, that’s how much you’re allowed to use—not how fast it is. Streaming a few hours of video can burn through that cap fast, even if your speed is decent.
HTTP
Hypertext Transfer Protocol
- HTTP is the language that web browsers use to communicate with the web servers.
- HTTP is a text-based protocol, meaning that the data sent between the client and server is in human-readable text format.
- HTTPS is a secure encrypted version of HTTP.
- The difference between http and https is that the HTTP uses plain text to send information and HTPPS uses SSL (Secure Sockets Layer) and the text is encrypted, making it far more secure.
FTP
File Transfer Protocol
- FTP is used to transfer files from a client to a server
- SFTP is a secure encrypted version of FTP
- Every time you download or upload files you are using FTP
TCP/IP
Transmission Control Protocol/Internet Protocol
- TCP/IP Transmission Control Protocol / Internet Protocol is basically a set of rules that allow computers to communicate and send information back and forth.
- IP is the addressing + routing part: it helps data find the right destination (like an address on an envelope).
- TCP is the reliability part: it breaks data into small pieces (packets), keeps them in order, and re-sends anything that gets lost.
Cookies
Web cookies are small blocks of data created by a web server while a user is browsing a website and placed on the user's computer or other device by the user’s web browser. Cookies are placed on the device used to access a website, and more than one cookie may be placed on a user’s device during a session.
Browser Cache ("cash")
In addition to the cookies, your browser temporarily stores website data to make them load faster when you re-visit the page for a second time.
This saves the browser from downloading all the information again and reduces the bandwidth used.
How long are the files stored? The answer depends on many factors. How much you browse, the internal caching policies of the page, and the cache storage space.
What do I need to have a website?
- A Domain name.
(mywebsite.com) - Website files and content.
(html, css, images, js, etc) - A hosting service.
(A place to put your website)
What is a Domain?
A domain is a human-readable address name for a website.
DNS - Domain Name System is a technology that translates human-friendly domain names into numerical IP (Internet Protocol) addresses.
When you type a web address into your browser, the browser first checks its own list (called a DNS cache) to see if it knows where to find the website. If it doesn't find it there, it asks your internet provider to look it up. If they don’t know, they ask special servers around the world that keep track of all the website addresses.
IP address or Internet Protocol address, is a unique number for every device or website on the internet. It's a set of numbers that computers use to talk to each other.
48.217.217.76 = miami.edu What is my IP address?
What is a URL?
Universal Resource Locator
- URL is your how you find your website in the internet.
Its a reference to its location, just like a home address for websites. - A. Protocol (Tells the browser how to communicate with the server).
- B. Default subdomain - in this case its www.
- C. Domain Name.
- D. Top Level Domain (.com,.org, etc).
- E. Folder.
- F. File Name.
- G. File Extension (.html, jpg, js)
Who decides who gets a Domain?
ICANN - (Internet Corporation for Assigned Names and Numbers)
- American multi stakeholder group and nonprofit organization responsible for coordinating the maintenance and procedures of several databases related to the namespaces and numerical spaces of the Internet, ensuring the network's stable and secure operation. en.wikipedia.org/wiki/ICANN
- Beginner's Guide to ICANN
- Amazon 7-year ICANN Dispute
Where can I register a Domain?
Web Hosting
Web hosting is a service that store your website and makes it available on the internet.
- Traditional Hosting. Files are stored on a server managed by a hosting company.
- Shared Hosting
- VPS (Virtual Private Server)
- Dedicated Hosting
- Files are uploaded using FTP.
- Cloud Hosting.
- No-code or Template Based Website Builders. One-stop services that offer hosting, domain registration, and template-based websites with or without e-commerce.
The Cloud
Cloud computing is the on-demand availability of computer system resources, especially data storage (cloud storage) and computing power, without direct active management by the user.
https://en.wikipedia.org/wiki/Cloud_computingCloud Hosting
Cloud Hosting is a Hosting service that takes advantage of the Cloud to run your website.
Instead of being hosted in one server, it is stored in multiple servers.
It is highly scalable and has better performance. Resources can be quickly allocated as needed.
Offers better security and since it's managed by multiple servers in multiple locations, if one fails, another takes over.
It is more cost effective that a Dedicated Hosting.
What is Web Development?
Web development refers to the building, creating, and maintaining of websites and web apps.
In real projects, the work is often split across these 4 roles:
- UX designer (How it works)
- UI Designer (How it looks)
- The Front-End Development (builds what users interact with in the browser)
- Back-End Developer (builds the server/data side)
On small teams, one person may do multiple roles (and the boundaries overlap).
UX and UI are design roles; front-end and back-end are coding roles.
User Experience Design (UX Design)
User Experience (UX) Design is making a website easy to use.
UX design should feel effortless to its users.
Key aspects of UX
- Usability: Can people figure it out without struggling?
- Accessibility: Can more people use it, including people with disabilities (screen readers, keyboard-only, low vision, etc.)?.
- Information Architecture: Is the content organized in a way that makes sense (like aisles in a store)?.
- User Research: What do real users actually need and do (not what we think they do)?.
- User Testing: Watch real people use it so you can spot what’s confusing. Some usability testing videos.
UX Designer Role
- A UX designer’s job is to reduce confusion and remove obstacles.
- learn what users are trying to do (research).
- plan the structure and flow (journeys, navigation).
- sketch layouts (wireframes).
- test with real people.
- improve it based on feedback.
What is bad UX?
- Poor Navigation
- Slow loading time (more than 3 seconds)
- Non Responsive Web layout
- Autoplay videos
- Unreadable Fonts
- Cluttered or disorganized page layout
- Broken Links
- No clear next step
- Dark UX (trick-y design that pressures or hides choices)
- Hard to find features
- Ignoring Accesibility
Some web UX facts
- People don’t come back after bad UX: 88% of online consumers report being less likely to return after a bad experience.
- Speed matters on mobile: Google reports 53% of mobile visits are abandoned if a page takes longer than ~3 seconds to load.
- People scan instead of read: Nielsen Norman Group found 79% of users scanned pages in their study.
- Design affects credibility: A Stanford/Consumer Reports WebWatch study found “design look” came up in 46.1% of credibility-related comment.
User Interface Design (UI Design)
App Design | Web Design
Interface is a device or system that lets you interact with a machine or object or application.
UI designers are responsible for the visual elements of a product, such as colors, fonts, buttons, and overall layout. They design the interface that users interact with, making sure it's visually appealing and easy to use.
Front End Development
Is the term used to describe the combination of HTML, CSS, and javascript to create multimedia experiences, apps and websites.
UX - UI - Development process
What makes a Webpage?
There are 3 main components to current web pages:
HTML
HyperText Markup Language is the standard markup language used to create web pages.
We use to create the structure of the page.
CSS
Cascade Style Sheets Is a markup for styling HTML pages
We use it to style the HTML elements.
Javascript
Is a programming language that was developed to create dynamic websites.
We use it to add dynamic functionality and interactivity.
Why do I have to learn about HTML/CSS
if AI can do it for me faster?
- HTML and CSS remain the core of how websites are built and styled.
- When you understand the basics, everything else, whether you’re tweaking code or using a visual editor, becomes easier.
- Good prompts come from knowing what’s possible. Knowing the basics will make you craft better prompts.
- You can't judge what's wrong if you don't know what's right.
Separation of content and presentation
- Separation of content and presentation (or separation of content and style) is a design principle under which visual and design aspects (presentation and style) are separated from the core material and structure (content) of a document.
- This allows content to be easily updated, organized, and reused without changing the look of the website.
- It also allows you to change how the website looks (its design and layout) without altering the underlying information.
Same Content, Multiple Devices
