CIM103 | WebLab
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 is not allowed
Intro to the Internet
The thing that lets you upload all your TikToks, share thorugh Snapchat and Instagram, lets your grandma like your posts, lets you order food, watch movies, learn online, talk to your friends, search for anything and basically live your life today.
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.
- 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 about speed?
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?
- Gigabytes are used to Used to measure the size of files, data storage, and memory capacity
- Data Storage can be expressed in many units:
- 1 byte (8 bits)
- 1 kilobyte or K (1024 bytes)
- 1 megabyte or MB (1024 Kilobytes)
- 1 gigabyte or GB (1024 Megabytes), etc
- Gigabits Used to measure data transfer rates, such as internet speed or network bandwidth. It is the speed at wich data can be transfered over the network.
- It is measured in bits per second.
- Sample bandwidth offers.
- 1GB of data takes 8 seconds to transmit over a 1Gigabit connection.
The same 1GB would take approximately 26.67 seconds over a 300Megabit connection.
HTTP
Hypertext Transfer Protocol
- HTTP is the language that web browsers use to communicate with the web servers.
- Hypertext documents include hyperlinks to other resources that the user can easily access.
- 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
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.
Some information about private browsing.
Cookies and the Privacy Policy.
By the end of 2024, there is a plan to replace the existing cookies. Read a more detailed explanation.
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 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
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)
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.
Web development has evolved so much, that the role of a Web developer has split into separate areas. We have 4 distinct areas:
- UX designers
- UI Designers
- The Front-End Developer
- Back-End Developer
The boundaries between the 4 sometimes overlap.
Front End Developer duties and responsibilities
A Front End Developer’s main goal is to combine technology and design to create inviting, easy-to-use websites for consumers. In order to accomplish this goal, they need to be able to handle the following day-to-day duties:
Based on Indeed's Front End Developer Job Description- Working with clients to develop the overall look and design of a website
- Writing website code with programming languages such as HTML, C++ and Java
- Producing, maintaining and modifying websites and user interfaces
- Incorporating applications, graphics, audio and video clips into client websites
- Creating tools that enhance the user’s website experience
- Ensuring websites are accessible across many platforms, including laptops and smartphones
- Routinely testing websites for ease of use, speed and other quality factors
- Fixing any website issues or bugs that arise
Front End Developer skills and qualifications
A Front End Developer should have advanced technical skills and strong interpersonal skills to be effective on the job, including:
- Proficiency in website programming languages such as HTML, CSS, Javascript, C#, Python, C++
- Understanding of key website design principles and SEO optimization
- Ability to test and debug websites
- Analytical and detail-oriented
- Excellent verbal and written communication skills
- Advanced problem-solving skills
- Observant and able to remain focused on tasks for long periods of time
User Experience Design (UX Design)
Oversees the total user experience when interacting with a product, service, or system.
UX design should be invisible to its users.
Key aspects of UX
- Usability: Ensuring that a website is easy to use and navigate
- Accessibility: Making products accessible to as many people as possible, including those with disabilities.
- Information Architecture: Structuring and organizing information in a logical and understandable way.
- User Research: Understanding the needs, behaviors, and preferences of users.
- User Testing: Testing with real users to identify usability issues.
UX Designer Role
- Conduct research to understand user behaviors and goals.
- Organize and structure content and information to create an intuitive and logical user journey.
- Define how users interact with a product, including the layout of elements, navigation, and user flows.
- Ensure that the product is accessible to users with disabilities and complies with accessibility standards.
- Work closely with other team members, including developers, product managers, and clients, to align design decisions with project goals.
- Continuously iterate on designs based on feedback and data to improve the user experience.
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
- Lack of Clear Call to Action
- Dark UX
- Discoverability (hard to find features)
- Ignoring Accesibility
Some web UX facts
- 48% users will leave a non-mobile website.
- 88% of consumers will not return to a site with bad UX.
- 48% of users based credibility on the overall design and experience of the website.
- 95% of user first impresions are desgin related.
- 79% of people scan read.
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.
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
