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 [heartinternet.co.uk]
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 ]
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.doc93k,cv_socsc.pdf41k
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 width960;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
[ 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 TabWidth30
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 ]
Weblinks 27/10/2012
Here are some interesting and relevant webpages
1. Taking Note
2. NoteTab Text Editor for Windows
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
: