Basic HTML Program

[Dragon_Cannon]

I have been working on a basic HTML conversion application for a school project. I have read that some people are interested in learning web development and that is the type of person that I have designed this program for.

 

People on this forum are very friendly and helpful so I thought that I would share it here with you guys to get some feedback and suggestions on it.

 

Currently I have only done some features for it:

• Paragraphs - at the moment I have done colour and a specific set of fonts.
• Headings - I have done the six most common headings H1 - H6. I have done colour and font for that as well.
• Links - To other pages on the internet and I have done font for that. I am going to do colour later but there are multiple colours which makes it harder to do.
• The final thing that I have done is create a reader so that you can open and display code.

The program has been written in Visual C# 2010 for those that are interested.

 

At this time I am only attaching a copy release of the code if people want to see the code for the program because they are interested in how I have done things then I will release it, but I haven't added comments or anything like that yet and some of the parts of it are hard to follow if you don't know much about C#.

 

This is the link to the file:

https://www.dropbox.com/s/v93fxabrcy0vfci/HTML%20Converter.exe

 

Features that I plan to add in the future are

• Lists
• Pictures

I at this time do not intend to add things like tables and divs as they can very dynamic and I cannot think of a way to code them.

[Cheesebaron]

As a person interested in web development, I don't find this program interesting. What would have been more interesting, if you had implemented a simple editor instead.

 

Something similar to what this forum runs, where you could create simple HTML pages. So while you are using the tool, you see what the output would be in the editor then pressing save you would receive a HTML page with either inline CSS to format the code or CSS in the head somewhere.

 

But I do think this is a good learning experience, but after having implemented a few HTML tags you must have noticed that most of them are very similar. They simply wrap stuff. So this quickly becomes a matter of writing monkey code. Now I know this is a school project, so keep doing what you are doing right now. But if you are to write a report or some paper about this application, you could mention the possibilities of expanding the application to something like the editor I mentioned, as it is a lot more interesting than just generating snippets of code.

 

Another note is that you decided to use Windows Forms for some reason. I am not sure why you chose to do that, but to follow modern patterns it would have been a great learning experience for you to use something such ash WPF along with the MVVM pattern, which would make your code a lot simpler and a lot more testable. Not only that but ready for reuse in other frameworks.

[Dragon_Cannon]

As a person interested in web development, I don't find this program interesting. What would have been more interesting, if you had implemented a simple editor instead.

 

Something similar to what this forum runs, where you could create simple HTML pages. So while you are using the tool, you see what the output would be in the editor then pressing save you would receive a HTML page with either inline CSS to format the code or CSS in the head somewhere.

 

But I do think this is a good learning experience, but after having implemented a few HTML tags you must have noticed that most of them are very similar. They simply wrap stuff. So this quickly becomes a matter of writing monkey code. Now I know this is a school project, so keep doing what you are doing right now. But if you are to write a report or some paper about this application, you could mention the possibilities of expanding the application to something like the editor I mentioned, as it is a lot more interesting than just generating snippets of code.

 

Another note is that you decided to use Windows Forms for some reason. I am not sure why you chose to do that, but to follow modern patterns it would have been a great learning experience for you to use something such ash WPF along with the MVVM pattern, which would make your code a lot simpler and a lot more testable. Not only that but ready for reuse in other frameworks.

 

Thank you for the feedback. A text editor is the next thing that I was going to add to the program. I have just been swamped doing other work as well so I haven't had time to add it yet. What I have designed is repetitive and money code due to the fact that the initial purpose of this was something for one of my teachers so that he could teach his younger classes HTML.

[GoodBytes]

Nice program, but,

If that is the goal of the program, then you need to do a lot more work.

 

If you allow me to be crtical.

NOTE: This is NOT to ditch your software, I find it cool. I am saying the following, which I know some of the items won't be easy to implement, for educational purposes.

- You should follow very closely Microsoft GUI guideline of Windows Vista/7/8 documentation: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx

- Font color should use Hex code. Never names. If you really want names, it should put the name, and the Hex code if it doesn't know the name

- Font list should have 2 categorizes in your list: Safe, and All. Safe have the list you have, and All, shows all the fonts of the system.

- Live preview of the code, and what you are suppose to get (look into implementing IE ActiveX in your program, while not perfect, as the page will flicker at every key stroke as it refreshes, it's sure is easier than coding your own preview system.. but if you want, you can)

- Placement of elements switches between tabs. For example, "Input" goes down on "Heading" tab.

- Input box doesn't convert "<" and ">" so you can break the expected output

- The interface needs works. Your eyes, by nature, follow the Z pattern. I should not have to go up and down.

- If you plan to do a text editor like HTML editors, you need to manage: undo, redo, and color coding, find, replace, for starters.

- Not possible to minimize the program

The GUI needs some work... You should do something like this:

(It's missing putting the text bold, italic, etc...), and well it doesn't have your tabs.. but it's provide an idea of layout.

If at school, they don't have wide screen monitors, then you collapsed it all in 1 or 2 tool bars instead of the side column.

Properties, should be a list like in Visual Studio when you define properties of Windows Form element.. but HTML for the selected options. So, in your case, almost all CSS attributes.

Hope this helps making your software kick-ass.

[Dragon_Cannon]

There are quite some good ideas there that I will add. The editor and things like bold and italics are being added to the next revision of the program. But a design like shown in the image above is going to have to be in a much later version as I want to get the main things done seeing as the project is due in 3 weeks time.

Thank you for the feedback about the < and > because I had not thought about those and will need to make sure that they are replaced with their HTML equivalents. I had also forgotten about undo and redo and things like that, so thanks for the reminder on that.

Live preview will not be for several versions either due to both time constrains and the fact that I will have to write that section from scratch again, but if I can get it added before the due date then I will try.

Some of the features that you have suggested will be very educational because I have no idea how to do some of them.

[GoodBytes]

If time is of essence, then do a tool bar approach.

So you have your tool bar under your tab, and you have a like the old WordPad: font, font size, font-color, background color, align set of buttons (left, center, right, justify), and a drop down menu/list for the font. That should be MUCH simpler to do actually, and will get you a nice GUI.

 

Like so (look at the second tool bar, that's the one I am talking about, ignore the ruler (of course) , and the new/open/save one):

You can also add another text box for the web site title.

[Dragon_Cannon]

That is an idea that I shall have to look into. It should work quite nicely.

[Dragon_Cannon]

For all those that are still interested I have some changes to the program. I have lined up the controls better than in the previous version and changed the colours to use hexadecimal values.

 

I have begun on the editor and added some features to that. Things that I have yet to implement are:

• Printing and Finding

Features that I have however are:

• Changing the text - font and colour for the editor these features do not effect the code in any way
• New, Open, Save and Save as are all in there
• Cut, Copy, Paste and Select all are there as well. 
• Undo is there. There is no redo as the way that I have done undo requires a fair bit of code to redo.

I have yet to include things like auto update or replacement of such characters as < and >.

 

https://www.dropbox.com/s/5aurtczibqsth2k/HTML%20Converter%20Prototype%202.exe

[arkon]

Took a quick look at v2, and I noticed that you should be doing "color: #000000;" for the color styling, or else it'll all just stay black.

 

You should also try filling the color box with the actual color, since it'd be more convenient, along with styling the text as the actual fonts if you can.

[Dragon_Cannon]

Thank you for pointing that out.

 

That second idea is quite a good one. It'll take me two seconds to do both and then re upload it.

[Dragon_Cannon]

I have fixed the colour issue in this version.

 

As well as displaying the font that the user has selected and they can also go through the other fonts in the same row. One thing that I noticed when testing is that some of the fonts were not on my computer and this the text box reverts to its default font and size.

 

https://www.dropbox.com/s/zflbrl8ft4wwxbw/HTML%20Converter%20Prototype%202%20V2.exe

[GoodBytes]

 -> Colour is miss place between Paragraph and Headings, same for Font

 

 -> Position of text with the elements isn't proper. Colour is too much to right, for example. Check all of them to the exact pixel. The boxes can be more to the right of the text if you want, but not a requirement.

 

 -> Space between Input box and the text Output under Paragraphs tab, is not following Windows guidelines, or even the same between elements. Check your vertical spacing between elements, everywhere, you don't have consistency

 

 -> Font size is not point 9. Make all text be the Windows define size.

 

 -> Under paragraphs tab, Next font, doesn't work properly. It doesn't select the element in the box that is currently displaying, and doesn't change the output text. The Output should be generated as you type, and select options, it should not require me to click on Convert.  Then rename 'Convert' to 'Preview'.

 

 -> Changing the input, and hitting Convert a second time, adds to the Outputs, and doesn't override the previous content

 

 -> "Input" should use a more descriptive text in 'Paragraphs' and 'Headings' tab, 'Links' is fine.

 

 -> Menu bar should not inside a tab.

 

 -> Menu bar does not use Windows default style, rather it uses Office XP/2003 style.

 

 -> Why does the program window shifts when clicking on 'HTML editor'?

 

 -> Tab background should be white to fix the actual color of the selected tab itself (which is white). This will also make it follow Windows guideline.

 

 -> 'Links' tab, has a space or two in it's name.

 

 -> HTML editor should use a code font. Like the one in Visual Studio.

 

 -> Icon in message boxes are missing.

 

 -> Finally, you you have a typo in your program name: "HTML Editer"  should be "HTML Editor"

 

 -> Bonus: Ctrl+C/Ctrl+V does not work anywhere.

 

-> Bonus 2: No right-click menu in the text box of the HTML editor