Thursday, September 29, 2016
Using External Templates
In this video I will show you how to use an external template for your project. Remember that you should author it, meaning use your own text, some of your art (some can be theirs) and some changes in the CSS. W3Sschools and your textbook are always there to refresh your memory on how to use html and css.
How to use the OSWD site if there is no clear zip download
In this video, I am showing the way of using simple templates from OSWD site (not Wix) that are similar to those that I recommended in Q&A. If there is no option of downloading the whole zipped directory/folder where the HTML and CSS are located for the chosen template then use a few simple steps from the video.
Simple start with JavaScript
This lecture supplements reading the appropriate sections of JavaScript on w3schools. Our approach is not in exhaustive learning of each command and feature which can take a couple of semesters but get initially a simple introduction to the main features of the language allowing to start programming your web pages. Later you will be getting more confidence in the use of these features, will periodically reread various web tutorials or google specific problems. But this will be much easier when working on some live code and having in mind some web project.
Working with SFTP (WinSCP)
This video lecture shows how to set your secure file transfer client and how to move files and folders between your local station and remote server (pages.ramapo.edu in our case).
JavaScript on one page
The best way of combining JS examples from the tutorial on one page is creating special placeholders (like paragraphs with id) that can be referred in the script by these ids. You can use functions to structure examples or just JS operations for a specific id, or mixing both. In the example below I am showing how to use a function with some calculation and just an expression assigned to the part of the document specified by an id (f.e using:
document.getElementById("demo").innerHTML )
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<p>This example shows string concatenation:</p>
<p id="concat"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
document.getElementById("concat").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
You can copy the whole text and paste it in one of the w3schools examples (f.e
http://www.w3schools.com/js/tryit.asp?filename=tryjs_strings) substituting ALL their text with the one above.
You can do such trials by copying code into w3schools example, rearranging it and running.
After it works you can copy the whole page to your Ramapo server.
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<p>This example shows string concatenation:</p>
<p id="concat"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
document.getElementById("concat").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
You can copy the whole text and paste it in one of the w3schools examples (f.e
http://www.w3schools.com/js/tryit.asp?filename=tryjs_strings) substituting ALL their text with the one above.
You can do such trials by copying code into w3schools example, rearranging it and running.
After it works you can copy the whole page to your Ramapo server.
Wednesday, September 21, 2016
Simple introduction to CSS
Before watching this video you have to view the previous one about screen organization!
A simple gentle introduction to some important concepts of CSS working together with HTML can be found in this video.
Here you will also see the continuation of the previous video lecture on best screen organization for work with html, css, and the chosen browser on one screen.
For best viewing, you might want to download the video and then view it locally.
Additional explanation on internal and external ways of using CSS can be found here
Wednesday, September 14, 2016
Working with text editors in Mac OS
Make sure that you save the file with .html extension (like index.html). TextEdit might automatically save files by adding a .txt extension. Then browsers will not open it as an html file, but as a text file. To see what your extension really is CTRL + click on the file then select get info - under the general section it should say Kind: HTML document.
If despite your attempts to save as html it adds a .txt extension (as .html.txt)
then go in finder and change the extension to html.
then go in finder and change the extension to html.
For more info on working with HTML files in textedit you can see http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
Another possible source of problems is described in http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/
Some people say that TextWrangle works better for them...
Thursday, September 8, 2016
How to Organize Your Screen for Work with HTML and Notepad
The following video shows how to start working on your HTML, how to save it, how to view it in the browser, and how to modify it using a comfortable screen organization with several windows side-by-side.
Purpose of this blog
Since the course is hands-on, dynamic, and in an online format - I will be running a blog that will substitute professor's commentary that you might get in face-to-face classes. It will allow making such comments more timely (whenever they have to be done and not only during class sessions) and more tailored to the current class performance and activities. Here you will find my current comments on the tasks, grades, additional help materials, etc.
The additional and help material will be published separately and linked to from this blog. Check this blog often since I assume that you've read it and consider it in my evaluation of your course work, task creation, and quiz questions. Additional advice, requirements, or modifications in the weekly tasks will also be posted here.
Watch for the new titles of posts arriving in the blog section (right-bottom corner of the page) on Moodle.
The additional and help material will be published separately and linked to from this blog. Check this blog often since I assume that you've read it and consider it in my evaluation of your course work, task creation, and quiz questions. Additional advice, requirements, or modifications in the weekly tasks will also be posted here.
Watch for the new titles of posts arriving in the blog section (right-bottom corner of the page) on Moodle.
Subscribe to:
Comments (Atom)