Training PPT - My Interactive Website

advertisement
Be a Webmaster in
90 Minutes
Empower teacher webmasters
for today's e-learning and
tomorrow's e-services.
By Raffy Mananghaya
rsmananghaya@uplb.edu.ph
Why Use Internet Server
in Schools
 PH Office of the President has promoted
IT in schools/ offices since 2002
 Universal internet access has been a
global goal since WSIS 2005
 Students are now IT-ready (smartphones
are actually personal computers)
 Need authoritative educational resource
created by authoritative educators
Examples of Educational Servers
 Wikipedia (a nonprofit)
 Khan Academy (nonprofit, by Salman
Khan, an ethnic Indian-Asian in the US)
 Open Course Ware (MIT, US)
 Gutenberg Project
 All are not for profit
 Salman Khan
started on his own
Are we ready for IT in
Schools?
 Do we find ourselves in the Internet,
particularly in educational websites?
 Do we broadcast/ keep ownership of
original educational material?
 Are we able to create Internet-like
experience in the classroom?
 We want the answers to be “Yes”.
Our Course Objectives
 Enable teachers to become webmasters
 they shall be able to use interactive
webpages and tests in class (e-learning)
 they shall be able to train students to get
started as webmasters (of future e-services)
 To do (using own server)
 start the server on his/her own
 create a personalized webpage
 create a quiz and link to it
1a - Start the Server
 Get/ Extract a-server.zip to hard disk C
 Start the server: Double-click go.bat
1b - Allow through Firewall
 Allow access by checking on networks
2a – Prepare Connection
 Get IP Address
of Server
 cmd
 ipconfig
Wired connection to server is preferred
2b - Connect to Server
 Enter IP Address in browser
192.168.X.X (or name of PC)
Mobile View
PC View
3 - Administer Content
 Edit (htm,txt); Upload files; Test template
myweb.php (can be renamed)
3a - Editing htm File
 Wysiwyg editing in a window with buttons
3a - Editing htm File
 Inserting a picture (uploaded previously)
First, place cursor where picture should appear
3a - Editing htm File
 Inserting a link (previously copied)
First, select
image
or text
3a - Editing htm File
 Formatting text (No paste from Word pls!)
 Paragraph; heading 2 or 4; pre (as typed)
Format before typing or
apply on selected text
3b - Editing txt File
 nav.txt for menu; Home-side.txt for sidebar
title.txt for page title; banner.txt for banner
 When
not
to be
used,
delete or
change
filename
3c - Uploading File
 htm, txt, pdf, gif, jpg, png, q (test questions)
 To see list of uploaded files, click Files
3d - Test Template
3d - Test Entries
 Enter
question (0),
answer
choices (1-5),
clue (9)
Avoid
using
quote “
in entries,
use `
instead
3d - Test Announcement
 Get test URL after uploading test q
First, right-click on question file
 Insert test URL
in webpage
3d - Test Record + Analysis
 Click on test tally t
 Note: Difficult questions will result to low %
Tips and Tricks – Use Tabs
 You can work on editing, viewing, testing or uploading
at the same time by using multiple browser tabs.
Tips – Common Problems
 When looking in the folder c:/a-server/www, the
filenames have no extension (htm, txt, q, t)
Solution: Make Windows un-hide filename extension*
 When double-clicking on the test template q, nothing
happens (Notepad does not open it)
Solution: Make Windows open it with Notepad*
 When I open Home.htm with Notepad, I see a jumble
of letters, no spacing or paragraphs!
Solution: Use only your browser (myweb.php) to edit htm files
 files.php in Notepad also shows a jumble of letters!
Open files.php in Notepad only to change username & password
* A tutorial for this is provided at aralinserver.org
Tips – Pictures and Videos
 Crop the right view/ content (MS Paint can do this)
 Or scale/ resize to the right width
734px width maximum
510px maximum (if using side column)
MS Picture Manager or free software like Irfanview
can do this
 Save to png type of file when changing the picture
so that its quality does not degrade
 Remember: For file names, use small letters,
no blanks
 Place link to a video over a picture (more pretty)
Tips – Banner and Navigation
 Upload banner.png to use a banner picture
(limit it to 740 pixels width)
 If you upload banner.txt, it will be shown as banner
text (but banner.png prevails if banner.png exists)
 Navigation - line of links under the banner to point
the reader to page/ file locations
- Put primary links in nav.txt
- Put secondary links in Home-side.txt
 You can insert navigation in pages: links are
separated with | and the line is centered, example:
SciLesson-01 | SciLesson-02 | SciLesson-03
Tips – Font Choice
 Default font is
Georgia,
a serif font that
looks attractive
in newer PCs
like Win7
and mobiles
 Change font in
style.css
see /codes/css
 Minimize font
edits in pages!
Tips – Linking
 Use short name (no blanks) for page names
link to the page Home.htm: ?page=Home.htm
<a href="?page=Home.htm">Home</a>
link to the test MathQuiz-01: test.php?test=MathQuiz-01
<a href="test.php?test=MathQuiz-01">our first Math quiz</a>
link (external) to a Youtube video:
http://youtube.com/watch?v=W5ySOqtxhbw
<a href="http://youtube.com/watch?v=W5ySOqtxhbw">Negroponte</a>
link (local) to a video: http://localhost/files/negroponte-ted-talk-2006.flv
<a href="/files/negroponte-ted-talk-2006.flv">Negroponte</a>
 Notice the url pattern: <a href="location">description</a>
Server is http://localhost - all file URLs are based on this location
(http://localhost can therefore be removed from the local url)
Tips – File Management
 The user’s files are in the folder
c:\a-server\www (in Windows style of writing folders)
c:/a-server/www (in the server style of writing folders)
 Because these files are in your computer, you can rename or
delete them through Windows Explorer. Important cautions:
- only rename txt files (when hiding or un-hiding webpage
elements, such as nav.txt, Home-side.txt, banner.txt, title.txt)
- only delete template-test.q files (test templates)
Other changes should be done through your browser
 To delete files through the browser, run files.php and login
with username myweb and password .php
You can change this username and password by changing
$_CONFIG['users'] = array(array("myweb",".php","admin"));
in files.php (use Notepad to edit the file)
Thank you!
 raffym@gmail.com
 0916 772 8558
Download