I need to make an web interface for employees of a company to use. I don't have a person designated to doing design or markup, and they don't really need to be anything spectacular. Nonetheless, I would rather not focus too much time on markup and styles.
I'm wondering if there are any tools or techniques which can make this easier. It could be a WYSIWYG, or some kind of intermediary markup, but the end result should be clean simple HTML/CSS. I'm open to anything right now. Thanks.
Write it by hand - it's the only way to get clean, simple, valid and semantic HTML and CSS.
If you're willing to forgo the semantics, you may want to look into a CSS framework, to take care of some of the layout busywork. I am not a fan of them, but I've heard others find them quite useful. Blueprint and 960.gs are the two I hear about most frequently.
There is a bunch of sites, offering you clean html templates for free, like:
http://www.free-css.com/
http://www.freecsstemplates.org/
http://www.opendesigns.org/
You can edit those templates, and make everything you want.
Check out zen coding
TinyMCE gives you very clean HTML output, even when you paste word to it
http://tinymce.moxiecode.com/tryit/full.php
Its easy to implement, but if you want some kind of CMS try Wordpress it is very good for simple sites
http://wordpress.org/
I have to agree with #Karpie, but if you want to make your life with CSS easier you can try some CSS framework, there are many of them out there. I recommend you 960.gs or something like that for layout. Check it out.
Related
I'm working on a simple one-page calculator, heavy with JavaScript and form elements. Here is a static snapshot of the page as an example: http://pastehtml.com/view/1ce4ppo.html
Obviously it's very plain and I haven't put much emphasis on the layout of it yet. But this prototype is about to be shown to the client in a few hours. There is the understanding that it is a mockup prototype, so the client is not expecting anything design-wise, but I wouldn't mind if it looked a bit nicer.
What are some quick and easy tweaks I can make so that the page looks a little better? I'm terrible with colors and design but I know CSS quite well (like an English major who knows correct spelling and grammar but is terrible at writing a story).
Also, I am using jQuery in the form, so anything involving jQuery is great.
I would suggest the Blueprint CSS template You can use just the form CSS, seen here. All you have to do is add some classes to the HTML and you've got some decent forms.
give this a quick read: http://www.emblematiq.com/lab/niceforms/
i dont know if the javascript load is worth it for what you are looking for
I really like narrative style forms, where form elements are integrated in sentences which guide the user through the form-filling. Might not be for everybody(every form) but I think it's a really nice way of making your forms user friendly and stand out from the rest. Here you can find an example: http://www.lukew.com/ff/entry.asp?1007
When it comes to styling select, radio or checkbox inputs I prefer http://pixelmatrixdesign.com/uniform/.
I'd use one of the free template sites out there. I use them all the time, especially for a mock-up since I'm also not a design person. And in a lot of cases the customer enjoys the look or doesn't care. Just check what the requirements are for using the template, if there are any.
So, as recommended, I did the W3Schools HTML and XML tutorials this weekend. I understand the basics.
Now should I look to get more depth in HTML, or go straight into learning CSS (and try to keep learning html at the same time)? If the first, where should I go for more advanced HTML tutorials?
Go for HTML (XHTML) and CSS togehter as the CSS is the proper way to stylize view of your XHTML data.
I do recommend reading the excellent book: Head First HTML with CSS & XHTML
IMHO, i would say depends on your role, are you a designer or you're the coder guy who have to put functionality into the site?
if you're into the design, then i would say css and good website designs are necessary.
in that case i would recommend don't make me think and erik meyers css book.
but if you're into the functional part of web site, i would say learn javascript then jquery. i can't tell you how many times jquery save my bacon.
and finally nothing beats putting theory into practice, so you can either search around and view source and learn from good sites, or start creating your own :)
Check out these resources, they are great.
http://www.amazon.com/gp/search/ref=sr_nr_i_0?rh=i:stripbooks,k:zeldman&keywords=zeldman&ie=UTF8&qid=1269221229
You can also visit your favorite sites and View Source and see what they are doing. Try to recreate it in your own example.
Learn as much HTML as you can, because it will make you better at complicated layouts which will require a bit more advanced CSS.
for a begginer good start at learning HTML would be to study existing web pages around the net, by either using web dev tools inside browsers or some web-app like http://webdeconstructor.com/ that let's you analyse layout of any given web-page and all HTML tags on it
if "WEB front-end development" like a person
the "HTML" makes he's "skeleton"
the "CSS" makes he's "surface"
the "JAVASCRIPT" makes he's "action"and"thought"
so you should learn them together
Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.
Question asked a couple minutes ago gave me this idea... If you were to teach someone HTML today, it would be significantly more difficult than a couple years ago.
For example, the <font> tag is simple, straightforward, and easy to understand. But it's now slated for the chopping block in future versions of HTML. I couldn't imagine trying to learn HTML today the "right" way with CSS and style:-type markup.
So where's the line? Should someone learn tags that are easy to understand but deprecated? Or should you insist on "getting" CSS and validation-passing styling from day one?
Learn the correct and valid way. It will reduce the bad habits and in the long run you will have to learn less.
I disagree. I think HTML is simpler today. You look at modern, clean HTML and that's what you see: clean, HTML, with minimal markup.
Presentation wise, it's nothing to shout at. But CSS fixes that.
CSS makes it even better. Simple changes have dramatic effect. Those dramatic effects lead to quick satisfaction and feedback. It also lets folks make sweeping changes, that affect "everything" rather than having to run through and propagate those changes.
That makes "mistakes" cheap to fix, which, again, leads to quicker success, and faster confidence.
Are there a lot of tricks of the trade in CSS and HTML? You bet. But most folks don't need that right level of expertise right away.
So, IMHO, HTML is a much better animal today than in the "old days".
It would depend on the situation. I can see possible cases where I may want to teach someone as little as possible. Say they have to learn a litle htnl in order to to edit some content on a page every so often, and I know this person to be someone who won't bother to learn more than he or she needs to.
However if I were teaching someone who was serious about learning definitely I would definitely try to have them learn the right way. I learned too many bad habits of my own and am still having to learn the "proper" way of doing things. I feel responsible for anyone I teach, and would like to spare them that hassle.
And learning to do things properly is really not that hard and it's a heck of a lot harder than unlearning the wrong way and bad habits.
HTML has been trending away from style-markup and toward semantic markup for many years now. There are lots of good reasons for this; I don't think you asked this question to get a separation-of-style-and-content lecture :)
In terms of learning HTML, I think people learning HTML can understand the simple lessons about how tags turn into webpages using elements like <p> and <ul>. When they inevitably get the "ew its ugly! how do I fix it!" itch, introducing CSS via the style attribute is not the worst thing in the world, as long as people eventually learn to style elements from an external stylesheet.
I certainly learned HTML in the days of table-based layouts and font tags, so maybe I am underestimating their usefulness as teaching tools. But I think driving home the point that HTML isn't layout early will pay dividends later.
Actually, I think the OLD way is harder for a new person. Perhaps you don't see it that way because you're used to thinking in old patterns. It's like this almost-retired DOS/QuickBasic programmer I work with sometimes might say: "Programming is so much easier to understand when all you have is one file and you just read down the file from top to bottom." Most people would agree it's not best to learn programming by starting with QuickBasic.
So why is the NEW way easier?
Because it separates concerns. Content and presentation are neatly broken into separate places.
You can start by teaching basic markup with <h1>, <p>, <b>, <div> and all of the basic tags. Give them a chance to understand the basics by creating HTML that Mosaic can display just as easily as IE8 (OK... bad example probably... you probably have to enable some sort of compatibility mode in IE8 for that ;-)
Once content has been mastered, move on to presentation. Show them how they can edit a separate file (the CSS file) and change the presentation of the entire document (or website) without ever touching the original file.
Now THAT'S simplicity.
Definitely do not teach outdated methods. You used to teach in just one step, HTML with styling tags.
Now, just teach in 2 steps. First teach a few basic semantic tags such as headers, paragraphs, and lists, then teach them how to make a stylesheet to style those. Then move on to more tags and more advanced styling from there.
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!