Zubrag 3/03/2012
========
Zubrag utility to protect HTML pages
Protects by encoding pages with a password which cannot be
retrieved. Files are:
zubrag_1c.html + zubrag.gif + zu_style2.css
Disk: F:\BackUpDriveH\KES
URL: http://ancasta.net/security/zubrag_1c.html
Protected files with _vb (=Victorian ballad): T1htc,Irao2ys~[VB]:{_^_}
Protected files with _dsp (= simple duck phrase): Be kind to your webfooted friends
----------------------------------------------------------------------------------------
Zubrag Notes on understanding the algorithm:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Located in: F:\BackUpDriveH\KESDON\toolkit\zubrag.doc
F:\BackUpDriveH\KES\zubrag.doc
[ Top of Page ]
[Password Generator] 24/05/2012
====================
Online password generator:
http://kesland.info/mch_pw_gen.html
http://stackoverflow.com/questions/2772014/is-sha-1-secure-for-password-storage
[ Top of Page ]
PHP_Password 28/05/2012
==============
The original password protection file is to be found at http://www.zubrag.com/scripts/password-protect.php
where instructions to use/install are also found
~~~~~~~~~~~
Procedure is as follows
(i) Put original file into webspace and run it with a help paramater e.g. password-protect.php?help.
If you add a password only, make sure setting in line 58 is set to 'false' (to turn it off)
(ii) Take the first line and add to first line of to-be-protected file (which you turn into a .php file)
(iii) Add the user or user+password lines in the Settings section (Lines 47-72)
(iv) MCH additions: Add line 135 to turn password into a hashed version (Whirlpool in error_log6.php)
(v) Rename file to something like error_log.php to help disguise its functions (to resist intrudors)
(vi) Test file is: http://kesland.info/apache_pw.php (NB note .php extension). The original (on disk) is to be found at:
F:\BackUpDriveH\ANCASTA\php_pass\sha1e.php
Various development versions (all in F:\BackUpDriveH\NOTETAB) as follows:
error_log.php Original version renamed from password-protect.php
error_log2.php User:mch_system pw:{Ducks!} added in
error_log3.php Version which uses password only (not user+password)
error_log4.php SHA1 version (Ducks!)
error_log5.php SHA1 version (Ducks! in words)
error_log6.php Whirlpool version (Ducks! in words)
error_log7.php Whirlpool version + salt (Ducks in words!)
USE this method if you suspect that javascript-protected version might not work
Use this password hashmaker: http://ancasta.net/egg/sha1e.php
[ Top of Page ]
Fusemail 3/03/2012
==========
fusemail.com
login: kes@fusemail.com
pw: FM_Bk2ywff,4admbsg!
Use Webmail as follows:
URL: https://webmail.mailanyone.net
[ Top of Page ]
Safe-Mail 4/03/2012
===========
Safe-mail.net
Message is sent to the server internally. The email recipient is sent a password so that they can read the secure email on the safe-mail server
User:kesland@safemail.net pw: Bk2ywff,4admbsg!
URL: http://safe-mail.net
[ Top of Page ]
Lockbin 8/03/2012
=========
Lockbin.com
is a mail encryption (secure email) facility that uses 256-bit encryption if both sender/recipient know the key. Very good but captcha can be a bit problematic and there is no visual cue that your message has actually gone!
URL: http://lockbin.com
[ Top of Page ]
PDFonline 11/3/2012
===========
pdfonline.com/convert-pdf
An excellent source for producing .pdf files from .doc files. This utility produces a file approx 40% smaller than the original e.g. cv_socsc.doc=93k,cv_socsc.pdf=41k
Converted file is available in the Downloads folder
URL: http://pdfonline.com/convert-pdf
[ Top of Page ]
Layout-3 20/3/2012
==========
3 side-by-side divs
The secret is to have a wrapper that contains everything with a width=960;margin 0 auto construction
NB It is crucial to have an overflow:auto to prevent the table divs (left,mid.right) from ‘popping out’ of the container. Adjust the left margin of the middle div to give a good aesthetic appearance
Disk: F:\BackUpDriveH\CSS\gen_fixed_3.html
[ Top of Page ]
Wrapper 28/03/2012
=========
Wrapper
¯¯¯¯¯¯¯
A typical usage is:
body {background-color:white;
font: bold 12px/15px “Verdana”, sans-serif;
}
# wrapper {
width:960px; Typical screen port
margin:0 auto; LHS and RHS margins auto
margin-top:20px; Little bit of top space
background-color: #eeffff; Set to very light cyan
padding: 0 20px; padding 0 top,bottom,
20px each side
border: 1px solid black; thin black border
}
[ Top of Page ]
Berea 2/04/2012
=======
Berea layout models
~~~~~~~~~~~~~~~~~~~
Good general layout models of 2 and 3 column layouts with menus. fixed central columns, equal length columns.
See, in particular. The ’456bereastreet.com’ website contains an excellent commentary as to how the layout is constructed which has been turned into a .doc file and saved below: ?
Disk: F:\BackUpDriveH\WEBSITES\barea.doc
URL (mch):
http://mikehart.org.uk/berea_2
http://mikehart.org.uk/berea_3
URL: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Look in f:\BackUpDriveH\MENU2
berea_a.html (Capbells header, 'Lorem ipsum' text)
berea_b.html (Just the same?)
berea_c.html (Catbells masthead+LH column + 'Lorem ipsum' text)
berea_d.html (with index 'database' included)
berea_e.html (as above but with the table removed to an external file ndex_page.html)
berea_lhs.html (side bar including buttons on left hand side)
berea_rhs.html (side bar including buttons on right hand side. Calls data base file 'ndex_page.html' ?)
menu2_b.html (experiments with 1400px wide screen (for the MAC)
A really simple (but effective) 2 column layout
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
developed from berea is located at: simple2_a
[ Top of Page ]
Paint 3/04/2012
=======
Paint programs
~~~~~~~~~~~~~~
(a) Web-based paint program - sumopaint.com
Username: kesmog pw: halcon_gato_7d7
(b) Box drawing programs + Word Art in TextMaker
(c) Screen capture: Capture 7 (on desktop) or, better
still,use the Snipping Tool (desktop)
(d)pixlr.com is a very useful tool also
URL: http://sumopaint.com
URL: http://pixlr.com
[ Top of Page ]
Colour 5/04/2012
========
Very useful websites:
http://tagindex.net/color/color_name.html
http://tagindex.net/color/background
[ Top of Page ]
HomePage 8/04/2012
==========
New mikehart website is located at:
http://m-hart.com F:\BackUpDriveH\MENUS\menus_mh.html {where all development files are located}
Basic Framework
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
- Bodywidth of 960px with auto margins
- Sidebar (for menus) 200px + 10 RHS padding
- Main (main output) 750px + 0 padding {750 +210 = 960}
Header
¯¯¯¯¯¯
- Header div holds text {"Mike hart's Home Page"} {#header2 with height 45px;top-margin 10px}
- Header photograph (width of 960, height of 200)
- Header caption (italic, 0.8em,floated right)
Inner div
¯¯¯¯¯¯¯¯¯
- width of 960px, over-flow:hidden
To act as a 'container' for sidebar+main (helps to ensure that sidebar stretches to foot of menu column)
Sidebar
¯¯¯¯¯¯¯
Contains a menu with an example from http://www.cssportal.com/vertical-menus
One gif used (menu8.gif) of 200px but another has been constructed (menu8a.gif) of 150px
http://pixlr.com is very useful in resizing this gif correctly
Sidebar has padding-bottom: 32767; margin-bottom:-32767 in order to extend columns
The gif contains 3 coloured bars (arranged vertically so that ''hover' and 'active' select appropriate bar
(-32px,- 64px}
Advantages Only one gif is loaded Can be recoloured using http://sumopaint.com
~~~~~~~~~~
Main div
¯¯¯¯¯¯¯¯
At the top of the main div are a series of 'tabbed' menus. These are provided by Paul O'Briens website at:
http://www.pmob.co.uk/pob/rollovers.htm
These menus make use of a couple of gifs, loaded in the background, one of which is made transparent on hover (rollover2.gif) to reveal the other (rollover.gif) When selected, the rolloff2.gif is selected and then made transparent so that the default (light grey rollover2.gif) shows through...
This is clever! Also, can be resized in browser without breaking.
Boxed in Main div gives outline shape
Colours in Main div
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Background - floralwhite {parchmenty look} Text: darkslategray (pale black?} Subheadings: black
Email address is 'javscripted' to defeat spammers!
¯¯¯¯¯¯¯¯¯¯¯¯¯
Footer
¯¯¯¯¯¯
- made 958px wide so that border of 1px makes it exactly 960px
- margin-top Pushed up by -0.8em so as to avoid the double line
- 8 nbsp + ¦ character makes division between items
- Update for date put in a <span> to keep it all on one line
Layout model
¯¯¯¯¯¯¯¯¯¯¯¯
Can be found here...
css_box_mch
Latest version of a homepage
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
See: http://kesdon.info/mch/equal_mh3.html for the latest trial version of a homepage
[ Top of Page ]
Menus 9/04/2012
=======
[m-hart.com] points to http://kesland.info/mch
2ya.com is accessed with: username: mikehart pw: santiago
http://former.m-hart.com points to http://kesdon.info/mch_old
http://menus-151.m-hart.com points to http://kesdon.info/mch/menus_151.html
http://menus-201.m-hart.com points to http://kesdon.info/mch/menus_201.html
menus_150.html is a generic (i.e. empty) shell of menus_mch.html. 150 refers to 150px sidepanel
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
menus_151.html is the above file but with the CSS removed into the file css_150.css
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
menus_200.html is a generic (i.e. empty) shell of menus_mch.html. 200 refers to 150px sidepanel
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
menus_201.html is the above file but with the CSS removed into the file css_200.css
¯¯¯¯¯¯¯¯¯¯¯¯¯¯
NB1 For some reason, the BODY formatting has to be put into the main body of the file
---
NB2 Some minute adjustment of margin-top is necessary so that the tabbled menus sit nicely on the top of the
--- containing frame
NB3 In 2ya.com names, prefix needs to be hyphen!
---
NB4 Blank.html used as a demo blank file to test menus
---
[ Top of Page ]
Banner_Top 10/04/2012
============
Developing a photograph 'banner top' to enliven a website
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Ideal is 960px wide by 200px high. This means that any existing photos will need to be cropped (eventually)
- Mountains and lakes make a good, natural subject
- Typically, the Lake District mountains can be gloomy so a neutral or blue sky is ideal
Procedure
¯¯¯¯¯¯¯¯¯
1. Find a photograph of a suitable subject (e.g. using 'Photographs of derwentwater' as a search term in Google)
2. Save the whole photo on local computer
(I had actually tried to do a crop and then a resize to 960px/200px. and the other way around.
This does not produce the sharpest picture)
3. Use inbuilt software ('Windows Live Photo Gallery') to crop photos. You can resize later.
Variants
¯¯¯¯¯¯¯¯
This is an a website with all five versions on it (menus_mh.html)+ 2 '150px' and 2 '200px' ones.
Also, display_2.html shows all Derwentwater photos at the appropriate resolution (960px x.200px)
See: http://m-hart.com/variants.html as well as
http://kesdon.info/mch/equal_mh3.html for the latest trial version of a homepage
[ Top of Page ]
Directory_List 11/04/2012
================
Various directory listing programs have been rounded up and put into F:\BackUpDriveH\DIRPHP
They are:
- ft_mch.php
- dir_list.php
- webadmin.php
- webadmin2.php
See, for example: http://dirlist.kesland.info
[ Top of Page ]
Rankings 14/04/2012
==========
Updated 'rankings' webpage
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Use Google with search terms such as 'Guardian Higher Education League tables' to get data published in May each year.
- Use last year's file as a model for this years (e.g. F:\BackUpDriveH\RANKINGS\rankings-2012.doc)
- Put Guardian file into 'Print Preview' mode and then copy over the relevant lines of data into this year's file.
It is a good idea to highlight (in yellow) and then embolden the UoW data. Check headings when stitching in.
- Convert .doc file into .pdf file using PDFonline
File: F:\BackUpDriveH\kac-business\kac_business.html in: http://uwin.org.uk -> http://business-kac.co.uk
Direct link at: http://uwin.org.uk/rankings
[ Top of Page ]
Fluid 15/04/2012
=======
Full fluid version of menu implemented
The final development version
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Final development version: F:\BackUpDriveH\MENU2\menu2_c.html
Final 'fixed' version: F:\BackUpDriveH\MENU2\menu4.html
These require 2 large .jpg files as follows:
(i) For header banner: catbells_2_h.jpg (in #head)
(ii) For vertical LHS: catbells_2_v.jpg (in #left)
Operation: header (banner)+footer+LHS+foot pinned in position by absolute references. Then the central panel can scroll as much as needed
Menus <dt> and <dd> format utilised
[ Top of Page ]
Screen_Resolution 21/04/2012
===================
Screen resolution experiments
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
1024 x 768 does not translate into the browser-width ( or 'free canvas') because of 'browser chrome' (toolbars etc.)
1. 960 seems to be a very common pattern and I have now decided to standardise upon it.
See F:\BackUpDriveH\MENUS\menus_mh_960.html which has become the template for my new home page
(http://m-hart.com)
The basic pattern of the website is described by clicking Layout on the footer. This calls an .html holding
program(css_box_mch.html) which holds a .gif captured by using the snapping tool (bottom toolbar) on the
Print Preview of F:\BackUpDriveH\CSS\css_Box_mch.doc) and then saving it as a gif (css_box_mch.gif)
See below for more details on diagram construction
2. To make menubar space slightly larger, you can up the screenwidth to 980px (works on an iPad!) or even 1000px
(does not work on an iPad without some truncation)
Hence decided to stick with 960px as a 'safe' option
3. Diagram construction
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
all in Object->New Drawing->rectangle part of TextMaker (see bullet points)
* Object - New Drawing - rectangle {inserts a box}
* New Text Frame {place holder for Text}
* Manipulate using red handles... put Text Frame within rectangle
* Colour in by selecting rectangle Object ->Properties ->Filling {select color}
Further thoughts on 960px screen resolution
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
I suspect that its now very popular because
- slightly conservative
- 960px is divisible by 2..64 and professional designers can use a pixel grid
- basic screen model can be seen here /BackUpDriveH/MENUS/css_box_mch
Parameters in /BackUpDriveH/MENUS/menus_mh_960
line 6 body 960px
line 39 #inner 960px
line 41 #main 830px
line 52 #sidebar 127px (padding: 10px 3px 0 0) = 130px
line 111 #footer 958px + 2 from border:1px solid black
Screen resolutions
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Technical information on viewports is stitched into http://kesdon.net
and can be accessed here:
(i) screen widths (http://kesdon.info/toolkit/w_screen.html]
(ii) screen widths2 (http://responsejs.com/labs/dimensions)
[ Top of Page ]
Optiview 25/04/2012
==========
http://optiview.com is an online facility which:
(a) optimises .gifs by stripping out unnecessary colours from the .gif palette
(b) optimises .jpg files in such a way that no discernible difference can be seen between the original and the
optimised image
http://m-hart.com/dw27a.jpg and http://m-hart.com/dw27aa.jpg
(c) A test file has been written and is available at http://m-hart.com/compare_jpg.html
[ Top of Page ]
Compacting 25/04/2012
============
1. Take the file to be compressed (e.g. F:\BackUpDriveH\MENUS\menus_mh_961.html)and then
- copy into Clipboard
- enter into http://smartgb.com/free_encrypthtml.php
- take output (compressed) ans use NoteTab Pro to copy into a file such as mh_e1.html (Test this out)
2. Take entire script (between <SCRIPT> and </SCRIPT> and save it as an external file such as 'external.js'
3. Cut out all javescript and ensure that mh_e1.html now reads in <SCRIPT>
src="external.js" at start, charset="ISO-8859-1" at end. Test that this works
4. Feed 'external.js' into http://scriptingmagic.com/Topics/Compression/JavaScript%20Compressor
and then save resultant file as 'external2.js' into mh_e1.html Test out and then put onto thr web
[ Top of Page ]
GetFoldersize 29/04/2012
===============
This is an installed utility
To use (assume F:\BackUpDriveH is selected)
1. Scan using Scan button on top row (Takes about 40 seconds)
2. Right click on Name in FOLDERS to get a sort
3. Choose NOTETAB (for example)
4. Right click on File Name to sort
(NB Extension does this as well - a bug?)
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Folder Size
¯¯¯¯¯¯¯¯¯¯¯
Installed utility
This seems more intuitive, faster, prettier etc.
use Green SCAN button on top row
[ Top of Page ]
Test_Sites 29/04/2012
============
Test sites to try out e.g. PHP programs are available at:
(i) http://mch-net.info/test
(ii) http://kesland.info/test
(iii) http://kesdon.info/test
[ Top of Page ]
Old-Fogies 30/04/2012
============
http://old-fogies.net (which points to http://kesdon.info/net-old) is a page which chooses between
Old-fogies, Winchester and Old-Fogies, De Montfort University
The name old-fogies.net is a name bought through heartinternet.co.uk
[ Top of Page ]
NoteTab_Guide 9/05/2012
===============
General Information
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
NoteTab Pro v 4.95 has been updated to NotePad Pro v. 6.2. Also the free version of NoteTab has been downloaded, installed on the system and then uninstalled. These three versions are all stored in:
F:\BackUpDriveH\NOTETAB\Sources
Instruction for Use
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Sample skeleton follows:
= V4 Outline MultiLine NoSorting TabWidth=30
Note that putting the heading in square brackets [Documents] creates a clickable link but at the top of a document, it can serve as a heading
NB The NoSorting parameter keeps items in their original (i.e. entered) order.
¯¯¯ Make a new file with this removed to get a sorted list (or just take out the No?)
---------------------------------------------------------------------------------
Ctrl+Shift+A: Adds a heading
Ctrl+Shift+R: Removes a heading
Ctrl+Shift+B: {after highlighted word} Makes a heading
Ctrl+Alt+Down: Move Next
Ctrl+Alt+Up: Move Previous
Ctrl+Alt+Home: Move First
Ctrl+Alt+End: Move End
Summarised under Document->Outline Headings
Right-click on the Headings pane (coloured light green/light yellow) to get the following:
- Add Heading
- Make Heading
- Remove Heading
- Edit Heading
- Sort Heading [NB Save under a new title immediately afterwards!]
- Add from Clipboard
- Copy to Clipboard
- Headings to Clipboard
- Font
- Background Color
- Show headings [copies to output screen]
Add Documents to Favourites: Shift+Ctrl+D
Hints
¯¯¯¯¯
1. Put headings as a clickable link at the top of each output screen e.g. Zubrag to double as a heading
(because links are in blue) and will ALWAYS be found in a Search. Underline with the = character
2. Right click on Headings and then Sort (but this sorts the whole file - be careful NOT to save
unless you immediately save under a different title e.g. webfile_s.otl
[ Top of Page ]