WebmasterTools

From Site5Wiki

Jump to: navigation, search
Previous (Webmaster)
Next (WebmasterTools/Books)

Subpages:



Contents

Managing your website at Site5

Image:Tag_red.png Website Management Guide

Webbrowser extensions and plugins for web development

Programs for code editing

Linux/Unix

OSX

  • Image:VersionTracker.png VersionTracker: [IT & Network Administration Software, sorted by software license] — direct MySQL coding, etc.


  • Dreamweaver: expensive, but powerful. Now part of Adobe's new Creative Suite of programs.
    • Available in the following languages: Dutch; English; French; German; Italian; Japanese; Korean; Spanish; and Swedish.
    • Image:VersionTracker.png Dreamweaver at VersionTracker


Dreamweaver Tutorials:

Dreamweaver addons:




Windows


  • Dreamweaver: expensive, but powerful. Now part of Adobe's new Creative Suite of programs.
    • Available in the following languages: Dutch; English; French; German; Italian; Japanese; Korean; Spanish; and Swedish.
    • Image:VersionTracker.png Dreamweaver at VersionTracker

Dreamweaver Tutorials:

Dreamweaver addons:


  • HTML-Kit: amazingly expandable and powerful open-source program, with new plugins always being developed

Cross-Platform: All Systems

  1. How to Design and Publish Your Website with Nvu
  2. Adding Images, Changing Fonts, Colours, Creating Links, and Writing Your Content
  3. How to Create Data Tables
  4. How to Create a Multiple Column Layout
  5. How to Add a Feedback Form to Your Website



Online

--to be used after CSS code validation

  • Em calculator:
    Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

  • Mappet: Online image map creator

Programs for content editing

Online Tools

XMLRPC: Entry posting and editing

Linux & Unix

OSX

Symbol Caddy, written by Brian Haslanger:
Dashboard widget keeps all those silly HTML entity codes at your fingertips. Just click the symbol to have the HTML code copied to your clipboard. On the back is an option to have the Dashboard automatically close after copy, making the workflow faster.

Windows

Sources for code snippets & assistance

* Image:Discussions.png Image:Flag_red.png Site5 Forums » Web Design











Sources for content & presentation snippets & assistance

Advice







Color

In choosing a color scheme, you definitely want to avoid the angry fruit salad effect.

Diagnosing code, content, or computer problems

Diagnostics

Viewing the structure of your site as is

Carla's website, December, 14, 2006
Carla's website, December, 14, 2006
Thanks to aharef.info, you can view your website as an interconnected, static graph.


I'm using this as a before-and-after tool, since my blog needs some major tag, entry, and code organization. This thumbnail is the initial before screenshot I took on December 14, 2006.
As you can see, I have some overclustering/untangling to do. :D --Carla 15:13, 24 February 2007 (EST)


Color coding of the above thumbnail:

What do the colors mean?
  • blue: for links (the A tag)
  • red: for tables (TABLE, TR and TD tags)
  • green: for the DIV tag
  • violet: for images (the IMG tag)
  • yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags


To see others' graphs, simply visit the Flickr tag Image:Tag_pink.png websites as graphs.

The code used to generate this graph is available via open source; copy from the code comment to the end on this page, and save it as a Javascript file.

Another view of your website as a graph:

Carla's site as of February 22, 2007
Carla's site as of February 22, 2007
Thanks to WEB2DNA, you can view your website in a different fashion--not as interconnected links, both internal and external, as above, but as a graphic interpretation of its usage of code:
WEB2DNA will take you website, analyze it, crunch it to little bits and spit it out as a graphic representation of a human DNA. The brightness of the lines is determined by the importance of the tags in terms of structure.
  • H1 is brighter than H2, which is brighter than H3.
  • TABLE is brighter than TR, which is brighter than TD tags.
  • Images and flash elements appear as 70% white.
  • New HTML tags like STRONG and EM is brighter than older ones like B and I
  • UL, OL and DL is brighter than their LI, DT, DD
  • DIV layout is brighter than table layout
Basically a semantically rich site will appear brighter than one with messy old-style code.
You can also determine the richness of text on a site. A site the focuses on (text) content is one where the DNA patterns is large (filling many containers), but contains a lot of empty spaces between the lines (empty space is the individual words).


So this second thumbnail is mine as of February 22, 2007. We shall see how it changes. :) --Carla 15:13, 24 February 2007 (EST)

To see others' graphs, simply visit the Flickr tag Image:Tag_pink.png websites as graphs or Image:Tag_pink.png flickr/tags/web2dna.

Image:Tag_red.png To see our wiki's evolution, watch this subpage:

Backup options: Anticipating problems before they occur

Image:Tag_red.png Backing up your Site5 account's files

Image:Tag_red.png Site5 Backup options

Other backup solutions for your online presence and data

Problem-solving before there's a problem at the hardware level

Security: Keeping your Site5 account and your computer safe

Image:Tag_red.png Tips to help you secure your account

Image:Tag_red.png Hardening your Site5 account and your computer

Email safety tools at Site5

Retrieved from "http://wiki.site5.com/WebmasterTools"
Personal tools