* Sunda Cyber Army 2k17 *
Indonesia Defacer ~
IDSN531:
Front-End Web Development
Spring 2025
January 15, 2025
Lecture -- Intro to Web: Intro to the course, web publishing and development, and the internet and web
First day topics:
Downloaded FTP prior to class?
What class are we in? Who is pd
Student 1-10 check ins and attendance
Need computer every class.
Open labs
Quick background hand poll, background/experience in:
html, css
js
database, sql
php
Course core purpose.
What should all students know at the end of class, experienced?
Syllabus walkthrough
Web page requests, what happens.
html "file" transferred to your computer.
web browser interprets html tags, displays content visually based on html+css instructions.
example vanilla html page
server space, directories, uploading file
Idsn531 Introduction
Prior to the first lecture, you should have:
Followed the link that was emailed to you, and logged into piazza for this course
Downloaded the program filezilla (CLIENT not server version) and installed on your computer
Introductions
pd: background at usc, in design+dev. Three things about pd
Interesting thing about yourself (hobby or interest, unique experience or background, etc.)
Do you have any existing background in web production or development?
A couple of things you are hoping to learn from the class
One current skill or ability you could bring to a group web project
Web pages, Web Publishing, and Web Development
What is involved in Web pages?
Text Images Media Colors
jQuery Javascript php
databases servers transactions security
Content such as text, hyperlinks, images, video and audio
Page "code" such as HTML, CSS, and Javascript
Server-Side scripting such as php, Node/Javascript, asp/.net, coldFusion, etc.
Other technologies and platforms such as databases, e-commerce and transations, security, et al.
At times, programming such as java, perl, or python.
Actual server machines, networks, routers and switches, connections, etc.
This course focuses on front-end content and user experiences, with a focus on the Web medium. This means it teaches the basics of Web Publishing, with a thorough coverage of html and css and, and beginner Web Development to enable client-side interactivity through Javascript and related frameworks and libraries. This wil be our trio in Dev1: html, css and javascript.
A closer look at the course -- Syllabus and Course Calendar
Course goals
Initially, each session students will learn more about web page creation, html and css. They will progress from creating basic output to designing layouts and pages,and then start enabling interactivity through scripting.
By the end of the semester each student will be proficient in basic Web publishing using html, css and a little jQuery, and will have built a full website featuring interactive pages, graphics and layouts they created, and hosted on a publicly accesible web server.
What can you "build" with only one semester of instruction?
Some samples of past final projects...
Ok let's back up a step -- what is the Internet?
Background -- the Internet "network" and activities, the Web
Internet=Web?
Brainstorm: What do you do through it? Skype, game, email, chat, etc.
Internet = Web? No. The Internet is the “network” you “use” to send and receive different kinds of data such as Web pages, email messages, real-time chat messages, multiplayer gaming information, files (file transfers), etc.
How the Web works: From the Internet "network" and activities you perform on it, to how web URLs and requests work, to the basics of a Webpage file.
What does your browser do when it requests a web page? It asks a web server for a SINGLE FILE that is in a web page format such as html. Web URLs are requests for SINGLE web pages/files from a specific machine on the Internet (a Web server).
Ok so then what is that domain part of a request? How do domains work?
A Web browser sends an http (Hypertext Transfer Protocol) or https request to a web server by resolving the servers's domain to an IP (Internet Protocol) address (like 128.125.121.22). The Web server responds by sending back the (HTML) document that was requested. The browser then displays the file graphically according to its HTML and CSS instructions.
Whew. Ok for an animated explanation of the mechanics of how a web request and response works, networks, switchers, routers and firewalls... dawn of the net
Following up on tha video, what happens when you request a web page -- file is delivered back to your computer and interpreted by your Web browser. What is the difference between browsers such as Internet Explorer, Safari, Chrome and Firefox? What do they all basically do?
Well, what is a Web page file, what is it made of? Text and “tags”.
Browsers request text files (saved with special “html” file extensions), read the file, and then graphically display the contents.
Why? Can we just put “text” in a web page? .txt versus .html?
What is html? Pages are “text and tags”.
You can view the “source” of any web page to see that text file behind the page. But who would want to view a “web page” in that “code” mode?
So what does it take to create a web page? Well, we can take a whole bunch of text, save it as a file with an html extension (text.html), and view it in a web browser. But it’s just a large wall of text with no formatting or whatnot. See the plaintext lecture1.html of a version of this lecture with no HTML (but saved as a web page).
Next class... you create your first web page! And upload it to the USC server (so you can show it off to family and friends).
But first, how do we copy and "publish" content to web server (from our computer)? Onto the lab...
