As far as i know, there are many wysiwyg (what you see is what you get) editors but none of them successful when it comes to crossbrowser issues.
There are few frameworks such as twitter bootstrap, 960.gs, blueprint etc...
Is that so hard to building a crossbrowser wysiwyg editor ?
What are the main barriers behind that ?
I know this is not a trivial but if there is a program or tool like that it will definitively make things much more easier.
The main issue with this are the different rendering engines in the browsers. They of course all try to implement the same HTML/CSS standards, however there is sometimes much room to interpret these standards leading to different results.
Currently the only way to ensure cross-browser compatibility is to use a component which is not rendered by the browser directly, such as a Java applet.
There are some commercial Java based WYSIWYG editors, e.g.:
edit-on NG
Sferyx
or edit Live
Related
I'm looking for a way to practice CSS and HTML without worrying about whether the backend works or not, or whether or not I have to make the content. I've played around with javascript and node.js a bit, and although I feel like I have a (very) rudimentary understanding of it, I feel as if I should be learning HTML and CSS correctly before messing more with the backend.
Is there a good place to just write CSS and HTML? How did you learn them?
Is there a code editor I should be using (specifically for HTML layouts and CSS layouts) besides Sublime Text?
Well, first of all, you do not worry about how backend works if what you want is to practice CSS and HTML.
Easy steps to play around with HTML and CSS:
create a new file, say index.html. Then, just double click on that file or open with.. your favorite browsers (Chrome, Safari, Opera, Mozilla, or IE).
If you want CSS, you can attach it to the index.html by using <link rel="stylesheet" href="file.css">.
Note : You would only need Node.js when you are dealing with AJAX method like using XMLHttpRequest or $.ajax() method due to CORS (Cross Domain Policy. Other than that, just play around with HTML and CSS with the browser.
My Personal Journey to the Front End Web Development
About me
I am currently working as a full time Front End Web Developer and I self-studied coding for 2 years now (I started this in June 2012) from almost zero knowledge about coding. When I started this, HTML5 and CSS3 were briefly introduced to the public so I learned HTML4 beforehand.
Web is fairly a big topic if we talk about the full stack integration (from the browser to the server to the database). If you are into the front end (HTML/CSS/Javascript), start off with some online tutorials (link below), then try to create your own web product (it could be a website or a web app). Try to improve a bit by a bit, and if you ever get stuck, you can always google search your problem and try to find the solution online (usually StackOverflow).
About Text Editor
I think the best way to learn is to get your hands dirty with minimal code help as possible. This will force you to remember most of the syntax and in turn increase your productivity. I was using Notepad++ but then switched to Sublime Text (Currently Sublime Text 3), and is my favorite text editor up until now. I know my co-worker is using emacs or vim that has a lot of keyboard shortcuts. Personally, Sublime Text is good enough to write HTML and CSS. Link: http://www.sublimetext.com/3
I started learning HTML and CSS from these links:
Paid
http://www.codeschool.com
Free
http://www.codeacademy.com
http://code.org
Hope it helps,
Yanuar Wibisono
Have you looked at w3schools html and CSS tutorials ?
They have a very handy "Try it yourself" button which allows you to try out your own code and see the results very quickly. The tutorials themselves are also well written with plenty of example code.
For HTML and CSS, I would recommend the text editor Microsoft WebMatrix, which is a standard program for Windows. For learning HTML and CSS, check out http://codeacademy.com. It's one of the best places to learn HTML, CSS and a bunch of other coding languages.
A prospective client has a site with pages done in Dreamweaver(tm). I don't have Dreamweaver(tm), never use it, and have in the past have seen some spaghetti (html) code on pages created with it. As a result, I'm wondering: if I create clean sections of semantic html, will Dreamweaver continue to be able to edit it when the client wishes to modify the code that I have created by hand (assuming that I create clean and validating code). This is more of an experience based question than a research based question. I'm sure that Dreamweaver(tm)'s documentation would tell me that it's compatible with clean, semantic html, but it's hard to take that advice from the horse's mouth.
So, based on your experience, is Dreamweaver happy with clean semantic html created externally, or does the visual mode display badly when it's dealing with manually, externally-created semantic html?
Short answer: it is compatible.
It depends on how your clients want to modify the code. Dreamweaver is a good editing tool, and it supports and "understands" semantic (x)html/css. However, if your clients still use html for styling (such as table-based layouts etc.), then proper clean css-styling can be frustrating for them to deal with later. But it is another problem and it has nothing to do with the editor.
Editing HTML in the “code” mode of Dreamweaver leaves it alone. Not sure about the visual mode though.
Well, I know a little HTML, and I'm just interested in playing around with it. I was wondering, though, do people usually write websites from scratch, or do they use templates, or do they use WYSIWYG editors?
To me, it seems like writing from scratch is unnecessary, nowadays, with the editors and templates we have, but maybe I'd be better off to try write something from scratch from learning purposes?
So, if I want to learn HTML better than I do, what is the best way to go about it (I have access to a free server) and how do professional website creators do it? Maybe this is an obvious answer but I'm quite new to it. Thanks!
If from scratch means hand-writing the markup, yes, that's the correct way to do it.
WYSIWYG, fully-bloated editors, are not good alternatives if you are serious about writing a web-site -- as most drag-and-drop-and-run systems out there. They might serve their purposes, but they are not general professional solution.
Hand-written markup (HTML, XHTML) and CSS will always provide better cross-browser compatibility, will be much more optimized and easier to maintain.
I really like Aptana Studio. It is an IDE that enables you to easily write the markup (HTML, XHTML), the formatting (CSS), the client-side code (ie, animations, etc, through JavaScript, and it is really well integrated with common JavaScript frameworks) as well as server-side code in a very professional way (PHP, Ruby, and many others). Oh, and it's free.
Aptana is better than, say, Notepad clones, because it is adapted to Web Development: all the time you have context menus popping up containing hints about compatibility, it displays errors on the markup, etc. It understands your code better than most notepad clones do.
I definitely recommend writing from scratch when you are learning. Using a wysiwyg editor can create a lot of extra code that you have no idea how to deal with when something strange happens and you have to edit the HTML itself. Using something like Notepad++ that supports code highlighting can help a lot.
the secret of html is: not writing it. means: keep it as tiny and semantically as possible and thats where all WYSIWYG editors fail. they let you create 403 nested dom elements whit 2 mouseclicks and if you are a beginner you don't even realize how wrong that is.
I agree with others that learning HTML makes sense. But at the same time, you can use WYSIWYG as a learning tool if necessary. I know that when I first started creating websites, margins and padding always seemed hard to properly format (due in part to inconsistencies across various browsers), and using a visual editor did help me figure out how changing certain values affected the view.
My favorite WYSIWYG editor is probably Nvu just because it is free and less bloated than software like Frontpage. But as others have noted, just practice with HTML. Check out w3schools for a nice intro and reference pieces.
Depends on the budget and software adquisition posibilities (yes, the budget).
Assuming you are talking about research, design, development, scripts, flash and everything you need the best option is Adobe Creative Suite for Web Designers.
There´s no powerfull editor in the world than Dreamweaver and that´s a fact.
You should use Notepad, Notepad++, jEdit and whatever you want but if you want to be productive a serious IDE is the best choice and Adobe win by far.
My opinion!
I am building advanced HTML tables with lots of CSS in them, what are the best tools out there for building advanced HTML CSS tables that could include dynamic elements like AJAX driven features (jQuery). I use Dreamweaver and Eclipse but they just touch the surface of having a really great tool set to build with. If you use a great tool let me know about it:-)
Seriously, the closer to the metal you get, the better off you'll be. On the Mac, I use TextMate for doing the HTML and Javascript, and CSSEdit for editing the CSS.
Best tool ever, either Textpad or Notepad++.
Both support syntax highlighting for a variety of languages, tabbed interface, etc.
Stay away from frontpage / dreamweaver.
Also if I may ask, why as you making HTML tables, I am hoping not for a layout?
I'll second Notepad++. How about an Express edition of Visual Studio 200x? You get some great design tools, great syntax highlighting, and it's free.
If you want a good free Mac editor, I go with WordWrangler. But if you want something that will cover EVERYTHING for web design, go with Coda.
For PC, I use notepad++. Not as slick as the ones for Mac, but it does allow for editing straight from the server.
But as far as CSS for tables specifically, you are going to want to do as much of it on your own, as tables are the worst when it comes to accessibility and semantic mark up, and that can only be dealt with by hand. Things like scope, colgroups, etc are never going to be WYSIWYG, you have to fine tune it.
Here's a good starting point:
http://www.noupe.com/css/21-fresh-ajax-css-tables.html
What are the pros and cons of using a WYSIWYG editor for web page development vs hand coding?
With the exception of just not knowing how to create something by hand coding is there any reasons to use WYSIWYG?
I handcode, but I prefer to work with a wysiwyg editor in tow, and for that reason I'm still using Dreamweaver as an editor. What I'm doing 95% of the time is handcoding inside the Source editor and viewing the results in the preview. Occasionally I'll drop into the wysiwyg editor to move blocks around directly though and when I do I find it invaluable. I never use any of Dreamweavers wizards or generated code and I clean up the html manually too.
I see nothing wrong with this approach, it strikes me as the HTML design equivalent of an IDE prompting to complete functions etc. (intellisense or whatever your IDE may call it)
I also always use a templating system of one form or another so my scripting code is totally separate from html.
The combination with Dreamweaver of the occasional wysiwyg edit (invaluable I find when laying things out or making 'macro' layout changes) and the one click preview has kept me with it despite looking at better tools - Aptana, NetBeans etc. Indeed I would dearly like to move to another system - see this question - preferably something that runs on Ubuntu and strips out the crud in Dreamweaver leaving just the wysiwyg features and possibly an intelligent Javascript editor, but I'm yet to find anything. KompoZer is starting to look promising though.
There are a variety of reasons to use a WYSIWYG editor when creating HTML.
Allows for quick prototyping
Allows designer-y people to be actively involved in front end development
Some WYSIWYG tools will set you up with a clean base to be modified (Dreamweaver's CSS layouts are actually pretty good)
I think the important thing to remember is that after you get it into approximate shape, you should dig into the code and make sure there's nothing weird going on. Nested spans, odd absolute positioning, and (lord almighty) table based layouts count as weird things. Even if you use a WYSIWYG to start with, you should always check that the code is valid and looks the way you would expect it to.
WYSIWYG can be handy if you don't know HTML or just want to whip something together extremely fast. You're not going to get clean code, though. Most WSYIWIG editors still throw out a bunch of unneeded dirty HTML instead of clean solid markup.
Anyone familiar with HTML can usually whip up something just as fast by hand in an HTML editor. And it will be clean, xhtml compliant semantic markup instead of thrown together templates with extraneous crud.
If you set up the template and css properly, you can probably be faster with hand coding than a WSYIWYG editor, as those work against you when you're trying to create properly abstracted css with degradable semantic markup.
If the design isn't terribly important and you're just throwing a website together there's nothing wrong with using a WYSIWYG. Or if you're trying to create a marginally functional mock up for a client it's a good way to get something built quickly.
I develop in ASP.net most of the time, so I'm in VS2008 most of the time; however whenever possible (which is most of the time) I still-hand code....but I do it in VS2008's source mode. When working with ASP.net, theres always somewhat bloated code which you just sort of have to accept (to a point).
However, in my free time, I also do php development, and like hell will I ever not hand-code with php. Plus, its not like VS with the drag and drop stuff.
If you want to be really good at what you do, as in Guru like good, drop the WYSIWYG stuff and start hand coding. The learning curve is steeper, but it makes you better at what you do in a meaningful way.
It comes down to maintainability and changeability. It is usually much easier to change a GUI layout in a GUI editor than by hand.
"Oh you want to move that JTable from this position to this other completely unrelated position". If you have handcoded it, it basically turns out to be a programming job (which for non-trivial layouts might actually be HARD), but if it is in a good GUI editor, it is probably just a matter of point-click-move-release.
People who handcode probably never have had to do that kind of changes :)
The advantages of using a WYSIWYG editor for web development are pretty obvious. Development is much simpler and faster even if you know how to code web since web development requires to know many different languages and can get messy when trying to get them to work together as planned. Real WYSIWYG designers should be able to solve those complexities by allowing you to visually develop on one form in one layer.
The disadvantages of this kind of development paradigms can be that it sometimes limits you, meaning that you are usually constrained within a predefined framework.
Therefore it is important to find a framework that on top of its WYSIWYG development experience is open to extension and customization. Take a look at http://www.visualwebgui.com/.
This is the same type of thing as Glade versus hand coding your Gtk code. I think that you add a level of obfuscation and things that might break when you hand edit your code. However, as Spencer said, if you need to do it and it needs to work; usualy WYSI wil work pretty well and reliably. If you're doing something that you're going to be keeping up to date and be managing for years to come; you should know every piece of code that is in that application/web page.
Really it comes down to your job function. If you're primarily a designer, WYSIWYG editors can be very handy for creating mock-ups for clients, or prototypes that can be handed to developers to code against.
If you're a developer, you'll probably prefer to hand-code.
Most WYSIWYG editors offer a code view and design view which enables you to switch back and forth pretty easily.
My suggestion is to try and learn how to hand-code your site. After years of web development, I find that hand-coding is faster for me than attempting to use a designer. Moreover, as you gain a better understanding of how HTML and CSS work together you'll find that there's very little that can't be done gracefully.
It can be frustrating to learn, but you'll find that you're better for it in the long run.