gHacks technology news » html

XML Escape Tool

Martin — Sun, 30 Aug 2009 19:15:31 +0000

Webmasters have to make sure that the code of their website is excaping several characters correctly. Failure to do so can lead to all kinds of problems from display errors to functions that are not working correctly because of this (check out The XML Page Cannot Be Displayed article for an example of things that can happen if characters are not escaped properly).

The relevant characters that need to be escaped are ', ", &, < and >. (I had to escape them while writing this article to avoid xml errors on the page. Webmasters have several options to escape these characters. They can escape them manually, use an online tool to convert them (see How To Display Valid Markup Code In Websites) or a software program like the XML Escape Tool.

Source code has to be pasted into the first form field in the application window. The tool can then escape the source code if the user clicks on the Escape button or unescape the source if the Unescape button is pressed.

The resulting code can be copied automatically to the Windows clipboard. The benefit of using a desktop software program to escape the characters is that it works if no Internet connection is available. Users who want to try the software can download it from the developer’s website.

Tags: html, webmaster, windows software, xhtml, xml, xml escape tool

Log in to websites with your site’s URL as your OpenID

Joe — Fri, 17 Jul 2009 11:12:56 +0000

A few years ago, Martin covered OpenID, an open authentication system. Since then, it has become increasingly popular and a wide range of sites, from AOL to LiveJournal provide OpenIDs, and OpenID login is also quite common. OpenID is particularly popular for blog comments, with Blogger now integrating support for it.

An OpenID is an URL. However, using an URL like http://computerjoe.myopenid.com/ to log-in and post comments with just doesn’t look sophisticated. I much prefer to use my own blog’s URL to post comments and log-in; it pumps traffic to my blog and frankly just looks better.

Whilst you could run your own OpenID identity server to do this, this takes quite a bit of expertise to set-up and whilst it is probably more secure, it isn’t needed in my opinion.

It is possible to use a any identity server with your website’s URL. I personally use MyOpenID, but I log in to sites with joeanderson.co.uk/blog; not with computerjoe.myopenid.com.

This can be done by simply adding a few lines of HTML to your website’s .

For example, I put

Naturally, these have to be modified depending on your username and server, but the provider should provider the information.

There are several benefits using this type of OpenID identificatin. The main one is that it just looks better but the most practical one is probably that it allows you to change provider whilst keeping the same log on. So, if I suddenly decide not to use MyOpenID, I can change to any other provider but my URL remains the same.

Tags: authentication, authorisation, html, id, my open id, myopenid, openid, passwords, Security, username, web

A standard compliant web browser and editor: Amaya

Joe — Sat, 11 Jul 2009 18:18:57 +0000

Some web browsers don’t fully respect web standards and many WYSIWYG HTML editors produce absolutely revolting code. W3C set out standards as to how HTML (and XHTML etc) should appear and whilst some choose to ignore these, some are devoted to the following of these standards.

Sticking to standards can therefore lead to issues with certain web browsers, which lack support for the latest tags or render pages wrong.

The W3C therefore has its own web browser and editor which adheres to standards more than many browsers and supports certain new technologies others don’t, such as RDF annotation. This browser is Amaya, an open-source and cross-platform browser.

Amaya can handle a wide-range of open file formats, including HTML, CSS, XHTML, SVG and MathML.

The software integrates the browser and web editor: when you go to a web page, it can be edited inside the browser. It also instantly displays syntactic errors.

It also integrates the mark-up languages. For example, in a web page, one can write formulae utilising MathML or add SVG shapes inside the software.

Amaya is a reasonable WYSIWYG editor and a good web browser for developmental purposes. It is also good to produce rich web-pages, which include other pieces of mark-up than HTML.

Tags: Amaya, html, html editor, Linux, mac, Open Source, w3c, web design, web designer, web development, Windows, wysiwyg, wysiwyg editor, xhtml, xml

Check HTML With CSE HTML Validator Lite

Martin — Thu, 09 Jul 2009 16:39:03 +0000

It is very important that webmasters validate their websites by checking the html code that is produced on the front end of the site. This can be done with online tools like the markup validation tool of the W3C website or offline tools such as the CSE HTML Validator Lite. The HTML validator can be installed on a computer system running the Windows operating system to check html pages for errors and other problems.

Webmasters need a local html file so that it can be loaded into the software program. The easiest way to achieve this is to go to the website that should be validated, view the source code of it and save it as html on the computer system.

This html file can then be loaded and analyzed in the software. The html code will then be validated by the software. It will immediately jump to the first error in the code and link it to the errors and comments in the footer area. This makes it very easy to understand (in most cases) why something is not right with the code. It is possible to edit the html code right in the HTML Validator to correct the errors that have been discovered. It is still necessary to correct the error on the web as well obviously if the html code has been downloaded from the web.

The program comes with a few additional functions that help in certain cases. It is for example possible to convert all tags of the html document to lowercase, find and replace code in the html file or to use a spell checker.

CSE HTML Validator Lite can be downloaded from the developer’s website. It is available for all Windows operating systems including Windows XP, Windows Vista and Windows 7.

Tags: check html, htm, html, html validator, markup validation, webmasters, websites, windows software

Fix Outlook 2010

Martin — Wed, 24 Jun 2009 16:35:35 +0000

Microsoft’s plans to use the Word HTML rendering engine to display HTML emails in the upcoming email software program Microsoft Outlook 2010 has created quite a few protest websites that try to convince Microsoft to change their plans. Outlook 2010 is still in the beta stage and Microsoft is encouraging users to submit feedback to improve the email client before the release candidate and final release are released.

The main problem that arises when using the Word HTML rendering engine is that Microsoft Outlook 2010 will not support web standards like CSS or background images. This could very well mean that Outlook 2010 users will be stuck with broken HTML emails for the next years after the release. Below is an image that is showing a HTML email in both Microsoft Outlook 2000 and Outlook 2010:

Microsoft Outlook 2000 was using the Internet Explorer rendering engine to display HTML emails. Microsoft mentions benefits that Outlook users gain by using Microsoft Word as their email authoring tool which include automatic styles and templates and SmartArt among other benefits. It would also not be in the best interest performance wise to use a different rendering engine for the display of HTML emails. (via Email Standards)

The initiators of the Fix Outlook protest website are making use of Twitter to rally protesters from all over the world. Every Twitter user that mentions fixoutlook.org in their tweets will automatically partake in the protest. The avatar icons of users will be displayed on the Fix Outlook website. Currently more than 15500 users have already joined the protest.

Tags: Email, email client, html, html emails, microsoft outlook, outlook 2000, outlook 2010

How To Display Valid Markup Code In Websites

Martin — Thu, 07 May 2009 13:19:48 +0000

There are two difficulties or problems that Internet users encounter when they want to paste code into forms to display these on the Internet. The first problem that can be encountered is that the website will interpret part or all of the code instead of displaying it. A basic example would be to display the html code needed to make text linkable on a website. These codes are interpreted by most forms automatically if the user just pastes the code into the form. The second problem that can arise is that the website will not validate because of the way it has been pasted into the form. Displaying the & char will for example return an error when validating the code. This can lead to all kinds of troubles including broken RSS feeds (read: The XML Feed Cannot Be Displayed).

Displaying valid markup code in websites, forums, blogs and any other page is not difficulty. The only thing that needs to be done to achieve this is to convert all entities before pasting the code. This can be done manually or by using a script like that offered at Spacefem.

All that needs to be done is to paste the code into the form and click on the Make Code button at the bottom. To display the following code on a website

Ghacks

one would have to paste the following code into the form on the website where the code should be displayed

<a href="http://www.ghacks.net/">Ghacks</a>

This is actually the easiest way to ensure that the website will not interpret the code and that the code will be valid markup code.

Tags: code, html, html entities, html entities converter, markup code, php, valid code, w3c

How to style your page using CSS

Daniel Pataki — Mon, 23 Mar 2009 16:44:08 +0000

Beginner article coming up, it’s time to get to know the wonderful world of CSS! Cascading Style Sheets, or css, is the standard method of styling a webpage. In fact, you should have no styling in HTML whatsoever. HTML was not designed to be a presentation language, it’s more of a structural-semantic language. In other words, HTML should give your content structurem while CSS should control the actual presentation.

It’s a bit difficult to describe this all in one article, but CSS is actually not that hard to get into. Basically, your HTML code has three types of “hooks”. You probably already know one of them, this is your common, everyday tag. You can also give a unique ID to any element, or a class, which can be applied to any amount of elements. CSS can grab on to these “hooks” (this is not a technical term), and style the element you are refering to.

Let’s take a side-step and look at how to implement CSS first. Right now let’s just use the following syntax inside the file, in the header section (there are many other ways, you can also call CSS from an external file) ““. You can write your CSS code in between the start and end tag. CSS code is also very simple syntax wise. You have to specify a selector, and then some properties and values. The selector will be one of those “hooks” we looked at, it will let you specify what you want to change the style of. The property will let you specify what property of that element you want to change (text size, color, etc), and the value will specify what you want to change it to. The correct syntax is “selector {property:value; property:value}”

With that knowledge safely in our head, let’s take a more detailed look at our “hooks”, which will become our selectors. As I said, a tag can be a hook. Say you want the color of the font in all paragraphs to be orange. You can do this by applying the following CSS code: “p {color:#ff9900;}“. The selector is “p” the actual tag in html, the property is “color”, which controls text color, and the value is “#ff9900″ which is a color code. You could also write “orange”, but color codes give you more control (more on this in another article).

That’s not too hard is it? Ok, so now all our paragraph’s have orange text color, but what if we want one to be different? You could put them in a div instead of a paragraph, since we only specified that paragraphs should have orange text. This is a very bad approach, but it does display how CSS works. You should not do this for many reasons, first of all because you loose some semantics, that piece of text is a paragraph, so should be in a paragraph tag.� Second of all, with this approach you will very quickly run out of tags to use. So in this case we apply the other “hooks”, we can specify a unique id, or a class. Let’s apply an id, since we just want a change for this one paragraph.

In your HTML the id is applied as an attribute to the tag like so: “

“. What the actual id is, is not important, but try not to start it with a number, and don’t have special characters in it a lot (underscore is fine). We can use the id in our CSS code by applying the following in addition to the rule we already have: “p#example {color:black;}“. The selector now points specifically to that one paragraph, where we have specified the id “example”.

If we would have applied a class we would have “

” in our HTML and “p.example {color:black;}“. If you try it out, you can see that there is no difference. The difference is in the fact that id should only be applied to one element only, while class can be applied to as many as you like. You can apply it to a paragraph and a div for example. In this case you could write the following: “p.example {color:black;} div.example {color:black;}“. This would tell each paragraph and each div with the class of “example” to have a text color of black. There is a simpler way to do this though, you can just specify the class, like so: “.example {color:black;}“. This shows how you should “read” the code. Whenever you see just a class you should read it as “change the text color of all elements with this class to black”. If you see a tag or even another id or class in front you should read it as (in case of a paragraph) “change the text color of all paragraphs with this class to black”.

Those are the very basics of CSS, you might find a list of properties helpful, but there are many resources on the web to learn more about CSS, but I will be back with more info, and you can start reading Scriptastique for more info on CSS.

If you’d like to read some similar articles, take a look at Scriptastique, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javasctipt and tutorials and screencasts coming soon! You can follow us on our RSS feed, or Twitter and Facebook!

Tags: css, html

Scriptastique web development roundup

Daniel Pataki — Mon, 09 Mar 2009 12:55:01 +0000

As you all know, we started a web development section here on gHacks. After asking for your opinion and talking about it with Martin, we decided to keep writing 1-2 posts a week here, but move most of the material into a new site called Scriptastique.

Right now we only have the blog, but tutorial sections and screencasts are on their way! To keep gHacks readers in the know, I will be doing a weekly short roundup of posts, if you like some of them, head on over to the site, take a look and participate in all the fun! So let’s jump to it, here’s what we covered on week 1.

Checking MySQL queries for errors
Creating your first function in PHP
How the internet works – domains and hosting
Create cool icons in a flash for your website
Creating rounded corners using only CSS

We have a few more up there, and you can follow us on Twitter and our RSS feed or join us on Facebook. If you have any questions or comments feel free to let me know!

Tags: coding, html, php, scriptastique, web design, web development

How echo works in PHP

Daniel Pataki — Wed, 04 Mar 2009 09:22:52 +0000

The most basic command, and probably the first you’ll learn when taking a look at PHP is “echo”. The first example in many books and online tutorials is the following. Create a file, give it an extension of “.php”, upload it to your server, and edit it like so:

echo ‘Hello World’;
?>

I hate Hello World examples, but this shows what we are doing pretty well. Basically the echo command will write out that phrase “Hello World” (the quotes will not be shown, the single quotes above are part of the code), so if you open that file using Firefox for example you should simply see the phrase.

This seems straightforward, but to really understand what’s happening, and to be able to work with PHP efficiently we need to dig a bit deeper to see what really happens when we echo something.

The most important thing you need to understand is that PHP is a server side language. This means that whatever code you write is never sent directly to the client (the viewer of your site for example). When someone opens a PHP file form the next the file is first processed by the server, and only the result is shown to the user. This is why you will never see PHP code if you view the source of a page.

You also need to know that once the server has processed the file it retruns pure browser readable code. I would say pure HTML, but obviously your PHP file can contain inline javascript, just like your HTML files. Now echoing something tells the server that whatever is echoed should be placed as is into the HTML file. This means that whenever you want to put HTML tags when you are echoing you can do so by writing them as you would in an HTML file itself, like this:

echo ‘Hello World’;
?>

Once the server has returned its result, this is downloaded by the browser and processed like usual, so your “strong” tags wil be taken into account and will indeed bold text.

So what’s the point of sending the server that bit of code if all it does is just put it in like it was HTML? Well, the answer lies further down the road, but basically this is helpful because you can prevent/enable specific of section of code reaching the client, so the viewer only downloads what he/she needs, not the whole file. A simple example:

$random = rand(0, 99);

if ($random > 50)
echo ‘Number is above fifty’;
else
echo ‘Number is equal to or less than fifty’;
?>

Without really understanding what’d going on I can still explain. We create a variable, the value of it will be a randomly generated number between 0 and 99. If this number which we just generated is above 50 then we should echo that it is above fifty, in all other cases (it is below or equal to fifty), we should echo the other statement.

This is processed whenever someone loads (or reloads) a page, so the variable “$random” will always be different, generated “on the fly”. The script then checks the number, and only the relevant piece of code is returned, so if the number generated is 55 the only piece of code that you will see in the source will be:

The number is above fifty

Obviously this is a bit over-simplified, but in real life this is basically what happens. You can also use this to generate different pieces of code for different days of the week, and the change will be automatic, you only need to program once. You can also use it to create one file to display all your posts (like in Wordpress), so you don1t have to code a page for each post you write. PHP is awesome, start lovin’ it!

If you would like to read more articles like this, take a look at Scriptastique, a new blog by the writer, Daniel Pataki. The site will contain different articles from the ones published here, and will eventually have complete tutorials for numerous programming languages.

Tags: coding, echo, html, php, web development

PHP – what it does and what it doesn’t

Jeremiah — Mon, 16 Feb 2009 19:28:22 +0000

PHP is a Server side scripting language. Its primary competitors are ASP (Microsoft), JSP (Sun), CFM (Adobe), and Perl (often called cgi by hosting companies, although it is not the only cgi language).
PHP was originally created in 1995, so as a technology it is fairly mature. Version 5.x is the latest stable version and 6 is under development. It is currently running almost 20 million websites including big names like Facebook.

The most common server architecture on which PHP is found is called LAMP (for Linux + Apache + MySQL + PHP). All of the elements of LAMP are open source, meaning that the source code of the application is freely available. This means that the cost of setting up a server running LAMP is reduced (No License Fees), so LAMP based web hosting tends to be the least expensive solution available.

The Internet is built on a client-server architecture. On the client side we have the user and the browser. One the server side we have the server and its script interpreter (In our case, Apache and PHP).
Because PHP runs on the server side, we cannot use it for flashy client side effects, things like animations and auto-complete cannot be performed by php because php is only running on the server. For client side programming we could use javascript, Flash/Flex, Silverlight, or JavaFX.

What we can do with PHP is access a database, connect to other websites/services for information, and build a page out of smaller pieces, which we then deliver to the client for rendering.

I think it is important to indicate at this time that there are four levels at which you can work with PHP.

Scripting – this is where you take a small script and add it (integrate) into an existing page.
Coding – this is where you write scripts as needed to add basic functionality to your site.
Development – this is where you write an full application in PHP.
Architect – this is where you properly design an application that develop it into an application. Like development but puts a lot more thought into a good foundation.

Depending on your actual needs, several of these layers could be overkill for your task. The following articles will mainly be focused on the first two levels – scripting, and coding. In Scripting and coding we have two primary tasks we accomplish. One makes your job as webmaster easier. The second adds new functionality to your site.

Jeremiah Stover is a Software Engineer and a Business IT Consultant at Pragmatic Development. He has hands on experience and regularly provides practical advice in Business, Marketing, IT equipment and software. His Specialties include interpersonal communications, design skills, teaching and instruction. Right now he spends most of his time developing web applications in PHP and MySQL.

Tags: css, html, LAMP, mysql, php, web dev, web development, website development

Ghacks Web Development PDF Article Compilation January 09

Martin — Mon, 02 Feb 2009 09:26:56 +0000

The following article contains all web development articles that have been published in January 09. The articles are provided in PDF format to make them readable on most operating systems and devices. We are providing article compilations to give you the chance to read the articles offline and keep them as reference without having to hop back at our site whenever you want to look something up.

The following web development articles have been published in January 2009 at Ghacks:

How does PHP work?
HTML Playground
PHP – what role does it fill
Standardizing variables to code faster
Web Development: A brief history of time()

You can download the pdf document by clicking on the link below.

ghacks web development january 09

Tags: article compilation, coding, ghacks, html, php, web development, webmaster, website development

Web Development: PHP – what role does it fill

Jeremiah — Sun, 01 Feb 2009 09:03:18 +0000

Before we try to work with PHP we need understand the role it fills – what problem does it address. The World Wide Web is built on a client-server model. A client computer requests a page which is supplied by a Web Server. The browser then renders the page for the user to view. The simplest type of pages contain static (unchanging) content. The server could serve plain text files, and the browser wouldn’t have any trouble rendering them.

HTML is a markup language that lets us describe attributes of the text and blocks on our pages. This works great for simple requests, making pages much more interesting than plain text. However it leaves us with a very simple structure. One page from One url (address) results in one rendered content (every time this url is requested, the output is the same).

To give us more options we have programming languages. Some like PHP run on the server side. They modify the content that will be displayed before it is sent to the client and on to the browser. Others like JavaScript run on the client side and allow changes to be made in the browser after the page has been rendered – usually for interactivity or for adding a feature not normally available in that browser.

The very first thing you _must_ do before getting started with PHP is get a good grasp of HTML (and CSS). Many webmasters use a tool like Dreamweaver, Expression Web or KompoZer. To
work with PHP it is important that you understand the underlying HTML code. You will be modifying this code so you need to be able to understand the HTML well enough to understand what you see.

If you like video training try Lynda.com or VTC.com. If you prefer reading a book try “Head First html with CSS & Xhtml” or if you prefer free web instruction try w3schools.com and tizag.com.

Now that you understand the markup language which is what is sent to the browser (HTML) you are ready to tackle the server side use of PHP.

Jeremiah Stover is a Software Developer at Pragmatic Development. He specializes in client communications. While PD does offer a full range of IT services and consulting, they are currently specializing in website development in PHP/MySQL.

Tags: css, html, mysql, php, web dev, web development, website development

Web Development: HTML Playground

Martin — Sat, 31 Jan 2009 08:28:44 +0000

The first language that you need to learn if you want to start with web development is HTML. HTML stands for HyperText Markup Language, a set of tags and attributes that can be used to create websites. HTML comes with a limited amount of tags and a basic form that is always the same. It basically comes down to learning the general layout of a HTML document and the tags that can be used to create the website.

HTML Playground provides the means to play around with all HTML tags (and a bit of CSS). It does not require any prior knowledge although that could be of an advantage. The website makes use of an interface that is divided into four columns. One holding all HTML tags, another that is displaying “live” examples of a selected tag and a third that is displaying valid HTML code used to create the example. Valid HTML code meaning a full html page making use of that code. Each HTML and CSS tag is clickable in the example code leading directly to an example page of that tag.

It would not really be a HTML Playground if the website would not offer the means to edit the example code. This is excellent to test changes to the code to see how the tags work.

Beginners might find it a lit difficulty to start and it is recommended to have read at least one article about learning HTML before playing around with the various elements. It is best for users who know the basic of HTML and want to start playing around with code.

Tags: html, html playground, hypertext markup language, learn html, web development, website development

Web Development: How does PHP work?

Daniel Pataki — Thu, 08 Jan 2009 19:56:42 +0000

When someone starts learning web development they usually start with HTML and CSS, and many people get stuck there without ever experiencing the wonderful workd of server side scripting like PHP or ASP. I’ll be talking about PHP here, but the basic rules for ASP and others are the same though.

The most important thing to understand is the difference between HTML and PHP. In HTML you write your code, upload it, and the user’s will subsequently download that page along with all the code. The user’s browser interprets this code and shows the user the page as you intended it (hopefully). In other words HTML is sort of what you see is what you get, in the sense that all the code goes to the user and is interpreted by the browser.

With PHP it works a bit differently because you don’t actually download the code the author wrote. What happens is that if you want to download a php page the code in that file is first processed by the server, and you download the output of the code, as opposed to the whole code as is. This in turn will be HTML just as before, this is why you never see PHP code in the source of a webpage. So what happens in processing? Turn the page to find out!

With PHP the goal is to use the processing powers of the server to build (usually) dynamic webpages. A very basic example is showing the correct greeting for the time of day on a webpage. In human terms you write a script with the directions to show “Good Morning” if it is before 10am but after 5am, “Good Afternoon” if it is after 10am but before 6pm and “Good Night” after 6pm, before 5am. Instead of receiving all the code for this and processing it in your browser, this all gets processed before you download it, and you only get the result of the process, the text “Good Night” for example if it is 9pm.

This is much quicker, since if you think of bigger sites, instead of having to download 300kb (or much more) of code, it is quickly processed on the server and you might get as little as 10kb or less. Obviously your PC could process the code quickly, but downloading and handling can take a while. In addition, the code may also have database queries which can not execute if processed on your PC, they have to be processed on the server which has the database.

If you would like a more real-life example, take a look at gHacks, which has almost 5,000 posts now. In HTML world we would have to have 5,000 posts which all have the whole site code, from header to footer with the article in between. PHP makes it possible to “compress” those 5,000 files into only 1!

When you view any gHacks post on a single post page you are actually viewing a file called single.php. This file also has some additional info in the url which will tell the script which post to show, so the file you are viewing would be single.php?p=234. This tells the script that the post with the ID of 234 needs to be shown. The script queries the database for the relevant post and pulls its details (like title and post body) from the database. So in the end all you are shown is one post. Wordpress has some other stuff built in to make nicer URL’s and so on, but under the hood this is what is happening.

Likewise for the front page we don’t always go and modify the code when posting something. Martin would be coding all day, removing the last post on the page and pasting the code of the new one. Instead, in the php file you are viewing the code gets the latest 10 posts and puts their data on the page.

There is a lot more to learn in PHP, but those are the basic mechanics, the ability to create pages based on certain criteria, as opposed to static content on each page.

Tags: html, php, wordpress

KompoZer, a free, open-source and half-decent WYSIWYG web editor

Joe — Tue, 30 Dec 2008 23:22:25 +0000

Dreamweaver and Frontpage are no doubt the most popular WYSIWYG (what-you-see-is-what-you-get) HTML editors but carry a pretty large pricetag, with Dreamweaver costing about £500! Naturally, neither work under Linux either! KompoZer is a free, open-source and cross-platform WYSIWYG editor which should fill the needs of any home user.

Whilst KompoZer has not been updated since 2007, the major mark-up languages haven’t changed since then so it should still work. KompoZer is based on Gecko, the rendering engine which Mozilla amongst others utilise, and is a fork of Nvu (another WYSIWYG editor which is now not developed), itself a fork of Mozilla Composer!

KompoZer has all the obvious features of a WYSIWYG web editor: HTML and CSS can be edited; FTP support; tables; and tabs to navigate between pages and views. Some nicer features include an integrated W3 validator and support for XFN.

Binaries are available for Win32, PPC Macs (which will run on Intel-based ones) and Linux. Source is also available so it can be compiled for other operating systems.

Like Nvu, the application can be used from a USB pen.

I personally use KompoZer if I quickly need to whip up a webpage and I don’t have the patience to code it in Textmate. It’s certainly usable, produces relatively clean code and it’s £500 cheaper than Dreamweaver!

Tags: freeware, html, html editor, kompozer, Linux, nvu, Open Source, os x, web design, web designer, web editor, Windows, wysiwyg, wysiwyg editor

Create WordPress Themes

joshua — Thu, 11 Sep 2008 03:15:16 +0000

WordPress is fantastic for the extend to which is can be customised, however if mucking around with CSS isn’t something you really want to get into personally then here are a few tools to help you out:

Artisteer

Artisteer is a new application fresh out of beta which helps you design either normal websites or a WordPress theme. It’s also one of the few programs I’ve seen which uses the Office Ribbon UI, it works pretty effectively for this application and looks great as well.

The problem is that this isn’t freeware and costs $99.95 for a developer license. Considering the lack of advanced features in the software, however nice it looks, I can’t see many people jumping at the chance to purchase this.

Perhaps if it included an actual code editor as well or had a great deal more options for customisation then it would be a more attractive offer but till then I think not. If you use the free version all images are watermarked when you export your theme, however this could still be useful as you can simply replace the images in the files.

I can only assume the activation of Artisteer provides a lot more functionality such as more templates, support for more platforms and more options.

WordPress Theme Generator

Feels kind of dated compared to Artisteer but will do the basics of theme design for you, handy if you want something to work off but not much more than that.

Starkers WordPress Theme

I particularly like this. If you’ve ever started a new theme based off the default WordPress themes then you’ll have realised how much stuff is in there which you really don’t need. Naked WordPress theme is a completely stripped down theme for you to work off, really helpful =)

There’s an update saying it isn’t working too well with WP 2.6, but that the author is updating it soon =)

Tags: css, generator, html, wordpress

Write Colorful Texts With Web Gradient

Martin — Wed, 27 Aug 2008 16:20:37 +0000

Web Gradient is a simple tool that makes it possible to create great looking colorful texts easily. The last sentence has been created with a tool called Web Gradient which takes any text input and turns it into a multi-colored experience. This is done by creating the text and selecting the colors in the software program and exporting them either into html or bbcode which can then be pasted into forums, blogs or websites that support them.

It is more of a fun tool than a serious tool that the user would use on a daily basis. It is however well thought out and creates multi-colored texts speedily and perfectly. The tool is fully portable and can be executed from any location on the computer or external media.

The interface might look confusing at first glance because of the options and their placement but as I said earlier it is well thought out. The text can be entered or pasted in the top pane of the program. It does appear in the preview area as well immediately. The preview area reflects any changes made to the text in real time.

Colors are added in the lower half of the program interface. The interesting aspect is that a gradient is added to the text which can be altered by changing the colors of existing pegs or creating new pegs to add even more diversity.

Each color can be picked from a set of default colors or by using the whole color wheel which is just one click away. Each addition or change will have a direct impact on the text in the preview area. The user has a few choices like changing interpolation from the default cosine to flat or linear and to enable quantization. A color scheme can be saved to the computer so that the user can reuse it at a later time.

The two buttons Copy HTML and Copy BBCode copy the code to the clipboard from where it can be pasted into websites. The numbers behind both buttons are the chars that are used to create the effect.

Tags: bbcode, colorful text, forum, html, text, text editing, web gradient

Image 2 HTML

Martin — Thu, 19 Jun 2008 21:26:45 +0000

Something that is more fun than anything else is a function to convert images to html. I cannot think of any other reason but to post it on some forums or websites as entertainment. It is definitely looking nicely and the program that I’m going to introduce right now has a lot of additional options that affect the html output.

Image 2 HTML is a software that can process any number of images and convert them directly into HTML files that can be posted on websites. The quality of the output is excellent, you can take a look at a small sample gallery here. The image is converted into a fully colored HTML file using chars defined by the user. This would probably make an excellent surprise for the misses if you convert an image showing the both of you with the chars Iloveyou or something similar.

Back to the tool. The background color, width, char size and char-set can be defined as well as some additional effects like mirroring the image or inverting it.

The settings invite to play with them to create different looking images. If you can come up with another use of an image 2 html converter let me know please. Maybe to prevent images from being blocked by a firewall or network restrictions.

Tags: convert images, html, image 2 html, images, software, Windows

An easy way to learn web design

Daniel Pataki — Fri, 13 Jun 2008 23:05:46 +0000

I spent a little time today on a Wordpress theme for one of my clients. He asked me to copy his webpage design and turn it into a Wordpress blog. This took me about a fifth of the time it takes to design a blog on my own, and the coding was much smoother and easier. I realized that this is a great exercise to start learning html and css.

In fact, I’m teaching my girlfriend css design and we went through the same process, taking an existing page and recreating it. First of all, you see the design right in front of you and you don’t need to keep in mind where you want to get to. Second of all, you can use some awesome tools to help you on the way if you’re a beginner.

My favorite tool is of course Web developer toolbar, which is a Firefox extension that can aid you in web design. A great trick to know is to press ctr+shift+y to view style sheet info on a page. This will draw a rectangle around elements you hover over, and when you click, it will display the styling behind those elements.

This is awesome if you’re starting out because it’s a cheat sheet you can use to check how the designers did this or that, but you can also use it to take a look at what colors where used, how a float is accomplished and so on. There are also some other tools in there like changing the stylsheet on the fly, resizing the viewport and so on.

In short, copying a website is much easier than creating your own design. If you take the burden of trying to create something cool and new on your own off your back, you will be free to actually learn the methods behind coding a good site. My girlfriend also finds it very helpful, and she’s a complete css newbie, so I guess many people could find this method appealing, mosty because it puts you in the action right away, no need to go through all the boring theory.

Tags: coding, css, html

Grab Text from all Files in a Directory

Martin — Fri, 12 Oct 2007 15:20:13 +0000

The title of this article might be a little confusing at first glance. Why would someone want to scan files in a directory for certain strings and output them in a new file ? Few ideas come to my mind why this could be useful. Imagine that you were surfing a website with lots of images that you liked very much. You could download those images manually or use the software Win Text File Patch to scan all files in your browsers cache for a certain string and output them in a new file.

Afterwards you would import that new list in a download manager and download all images from there. Sounds easier ? It is, indeed. This is of course not only useful for file downloads but also for any other type of information found in files. Password lists come to my mind, proxy lists, any kind of list actually.

Win Text File Patch has a size of only 84K which is amazing if you consider what this application is doing. To work with the software you need to edit a few entries. You specify the source directory, the file types that you want scanned, a destination directory and file and of course the software should scan the files for.

The text part requires some knowledge of how the information are presented in the files. If you were looking for images for instance you would have to know that they begin with the html tag and end with ">. It begins to get problematic if the website in question did use relative links and not absolute ones because of the missing url.


Win Text File Patch offers a way to replace the information that has been found which is exactly what we would need here. This can be a very useful software for several users.
Read More:
Win Text File Patch

	Tags: directory, download, htm, html, internet, win text file patch


	Related posts
	
	Torrent2exe makes Bittorrent a tad easier (4)
	Check HTML With CSE HTML Validator Lite (3)
	YubNub a social internet command line (2)
	XML Escape Tool (0)
	Write Colorful Texts With Web Gradient (5)