* Sunda Cyber Army 2k17 *
Indonesia Defacer ~
<!DOCTYPE html>
<html>
<head>
<title>
ACAD275: Dev 1a
</title>
<meta charset="utf-8">
<link href="lectures.css" rel="stylesheet" type="text/css">
<script src="/jquery.js"></script>
<script>
var toggle = function(objID)
{
obj1 = document.getElementById(objID);
if(obj1.style.display == 'none')
{ obj1.style.display = 'block'; }
else
{ obj1.style.display='none'; }
}
</script>
</head>
<body bgcolor="#eeae76" link="#333366" vlink="#666666" alink="yellow">
<script>
jQuery(document).ready(function(){
// jQuery(".lectui dd").hide();
$("#togglebg").on("click", function(){
if($(".pres").css("background-color")=="rgb(255, 255, 255)") {
$(".pres").css("background-color", "inherit");
} else {
$(".pres").css("background-color", "white");
}
});
jQuery(".lectui dt").on("click", function(){
jQuery(this).toggleClass("lectui2");
jQuery(this).next("dd").slideToggle();
});
jQuery(document).on("keypress", function(event){
if(event.keyCode==112) {
jQuery(".lectui dd").show();
}
if(event.keyCode==80) {
jQuery(".lectui dd").hide();
}
});
jQuery(".sample").on("click", function(){
jQuery(this).next("dd").slideToggle();
});
// reveal hidden lis
$("#reveal").on("click", function(){
$("li").css("display", "block");
});
// sound effect rollover on .effect anchor tags
$(".effect").on("mouseover", function(){
$("#sound").prop("currentTime", 0).trigger("play");
})
});
</script>
<center>
<table border=0 cellpadding=9 width=100% cellspacing=9>
<tr>
<td align=center>
<font size="2" color="#3c573d" face="Verdana, Arial, Helvetica, sans-serif"><b>
ACAD275:
<br>
Dev 1a
<br>
<i>Spring 2024</i>
</b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<br> <br>
<b><font color="white">
<i>January 09, 2024</i>
</font></b>
</font>
<hr>
</td>
</tr>
<tr>
<td valign=top bgcolor="ec862b">
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<b><i>Lecture</i> -- Intro to Web:</b>
Intro to the course, web publishing and development, and the internet and web
</font>
</td>
</tr>
<tr>
<td valign=top>
<h2>Acad275 Introduction</h2>
<div class="redbox">
Prior to the first lecture, you should have:
<ol>
<li> Followed the link that was emailed to you, and logged into piazza for this course</li>
<li> Downloaded the program <a href="https://filezilla-project.org/download.php" target="_new">filezilla</a> (CLIENT not server version) and installed on your computer</li>
</ol>
</div>
<dd>
BEFORE start, ask student volunteers to draw on the board -- or use mural?:
<ul>
<li> Internet/Cloud</li>
<li> Web Server</li>
<li> Consumer computer/laptop</li>
</li>
</ul>
</dd>
<h3>Introductions</h3>
<dd> pd: background at usc, in design+dev. Three things about pd </dd>
<ul>
<li>Interesting thing about yourself (hobby or interest, unique experience or background, etc.)</li>
<li>Do you have any existing background in web production or development?</li>
<li>A couple of things you are hoping to learn from the class</li>
<li>One current skill or ability you could bring to a group web project</li>
</ul>
<br>
<h3>Possible breakout activities/topics, examples from the web are a plus:</h3>
<ul>
<li> Research, discussion and conclusions about academic plagiarisms within the context of web design</li>
<li> Research, discussion and conclusions about academic plagiarisms within the context of web programming/development</li>
<li> Research and meaning of the following terms, and their interrelationships within the context of the focus of our class: IP address, DNS, http request, web server</li>
<li> What are and how do the following three "languages" work together: html, css, javascript</li>
<li> What is bootstrap?</li>
<li> Research and discuss findings of what the terms dynamic html and interactive web user experience mean</li>
</ul>
<br>
<h3>Web pages, Web Publishing, and Web Development</h3>
What is involved in Web pages?
<dd>
<pre>
Text Images Media Colors
jQuery Javascript php
databases servers transactions security
</dd>
</pre>
<ul style="margin-top: 0px">
<li> Content such as text, hyperlinks, images, video and audio</li>
<li> Page "code" such as HTML, CSS, and Javascript</li>
<li> Server-Side scripting such as php, Node/Javascript, asp/.net, coldFusion, etc.</li>
<li> Other technologies and platforms such as databases, e-commerce and transations, security, et al.</li>
<li> At times, programming such as java, perl, or python.</li>
<li> Actual server machines, networks, routers and switches, connections, etc.</li>
</ul>
<p>Dev 1 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.</p>
<br>
<p>A closer look at Dev 1 -- <strong>Syllabus and Course Calendar</strong> </p>
<br>
<h3>Course goals</h3>
<p>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.</p>
<p>By the end of the semester each student will be proficient in basic Web publishing using html, css and javascript, and wil have built a full website featuring interactive pages, graphics and layouts they created, and hosted on a publicly accesible web server.</p>
<p>What can you "build" with only one semester of instruction?</p>
<dd><pre>Some samples of past Acad275 final projects...</pre></dd>
<p><em>Ok let's back up a step -- what is the Internet? </em></p>
<br />
<h3>Background -- the Internet "network" and activities, the Web</h3>
<div class="lectui">
<dd>
<pre>
Internet=Web?
Brainstorm: What do you do through it? Skype, game, email, chat, etc.
</pre>
</dd>
</div>
<p>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.</p>
<p>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.</p>
<p>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).</p>
<p>Ok so then what is that domain part of a request? How do domains work?</p>
<p>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.</p>
<p>Whew. Ok for an animated explanation of the mechanics of how a web request and response works, networks, switchers, routers and firewalls... <a href="/resources/dawnofthenet.mpg" target="_new">dawn of the net</a></p>
<p>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? </p>
<p>Well, what is a Web page file, what is it made of? Text and “tags”.</p>
<p>Browsers request text files (saved with special “html” file extensions), read the file, and then graphically display the contents.</p>
<p>Why? Can we just put “text” in a web page? .txt versus .html?</p>
<p>What is html? Pages are “text and tags”.</p>
<p>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? </p>
<p>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 <a href="/acad275/lecture1.html" target="_new">lecture1.html</a> version of this lecture with no HTML (but saved as a web page). </p>
<br />
<p>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).</p>
<br />
<em>But first, how do we copy and "publish" content to web server (from our computer)?</em> Onto the lab...
</td>
</tr>
</table>
</center>
</body>
</html>
