As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I think most template engines are hard to use for designers and front end developers leaving you, the programmer with the burden of maintaining them.
And frequently updating the templates after the designer updates the html mockup is a nightmare because your templates are no longer compatible with the original htmls.
I had this problem for very long time, recently I had an idea, but I don't know if I'm not reinventing something or if something better exists.
So, I'm asking if you found better solutions for this problem and if so which one?
Since I've switched to full separation of content from presentation, I've never looked back, and here's why:
Your business logic becomes very clear. Without HTML tags and presentation logic mixed in, the code takes ½ the space and less than ½ the time to maintain. The burden of maintaining the link between code and presentation can be mitigated by specifying a formal interface between the two, even as a text file or a Wiki note, listing all the variables and values presented to/required by the presentation layer.
Frequently updating the templates from designer's changes means that your presentation layer should be sub-divided to various "blocks", such as menu block, page layout block, and content block. On most pages, only the content block is different. When properly divided and implemented using CSS and other modern web techniques, reasonable changes in design will have minimal impact on your presentation code.
CMSes automate this process even further, and are now at the point where even 5-10 page sites can benefit from using a CMS vs. hand-coded HTML from both consistency and ease of support perspectives.
Code security - Smarty is not PHP, so your designers can have a lower level of trust on the site (they can't mess with the underpinnings too much, although they can mangle the presentation to the same effect as a DoS would have, so don't mess with them anyway); if you don't care about security that much, PHPTal and others run almost at "native" speed.
As for my working solutions, I have two recommendations:
Develop a projectwide folder structure and naming convention, and stick to it. Given a name of your business logic file, I should be able to tell you what the presentation files are, and vice versa.
Have an explicit interface spec (again, a text file or a Wiki entry is all you really need) between business logic and presentation. Knowing which vars are available, and how they should be (programmer) / are (designer) formatted, makes both of them very happy when they have to maintain the page a year later.
Yes, but only if they are as close to Native HTML as possible.
Dreamweaver templates (ignoring the editor) basically accomplish this pretty well since they basically markup a plain old HTML (POH™) page with some HTML Comments.
I personally like how some CMS solutions enable me to break my templates into very small pieces. SiteCore does this well through placeholders and renderings which map to usercontrols.
I've also used UserControls heavily in the past to break out common functionality like login, menu, footer links, etc to make it easier to modify or replace functionality in the future. (ASP.NET)
What template-engines are you using? Something like Smarty for PHP?
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have been reading a lot of stuff about HTML 5 recently. Something still looks very fuzzy to me and I hope somebody can help me understand it better.
Is HTML 5 for the "technology" to create the UI only? If I need to create an application to access bank accounts, how is it possible that HTML 5 will replace all other technologies? I mean there must be some kind of web service that the application has to use to access the data on the server and I can't see how that piece can be done with HTML 5.
As with any new technology there is always a lot of speculation from commentators who don't really understand it... It always made me chuckle when I heard people talking about sites being 'Web 2.0' or 'Ajaxy'
Put simply:
HTML5 is just the same old html which we've been using since the nineties but with some improvements from HTML4&XHTML1. There are a few new tags, some of which aren't even new they've just been standardised.
HTML5 provides native support for many features that used to be possible only with plugins or complex hacks (a native drawing API, native sockets, and so on). Plugins, of course, present problems:
Plugins cannot always be installed.
Plugins can be disabled or blocked (for example, the Apple iPad does not ship with a Flash plugin).
Plugins are a separate attack vector.
Plugins are difficult to integrate with the rest of an HTML document (because of plugin boundaries, clipping, and transparency issues).
Although some plugins have high install rates, they are often blocked in controlled corporate environments. In addition, some users choose to disable these plugins due to the unwelcome advertising displays that they empower. However, if users disable your plugin, they also disable the very program you’re relying on to display your content.
This is where HTML5 comes on the scene, smiles, and waves its magic wand of native functionality. You can style elements with CSS and script with JavaScript. In fact, this is where HTML5 flexes its biggest muscle, showing us a power that just didn’t exist in previous versions of HTML. It’s not just that the new elements provide new functionality. It’s also the added native interaction with scripting and styling that enables us to do much more than we could ever do before.
Take the new canvas element, for example. It enables us to do some pretty fundamental things that were not possible before (try drawing a diagonal line in a web page in HTML4). However, what’s most interesting is the power that we can unlock with the APIs and the styling we can apply with just a few lines of CSS code. Like well-behaved children, the HTML5 elements also play nicely together. For example, you can grab a frame from a video element and display it on a canvas, and the user can just click the canvas to play back the video from the frame you just grabbed. This is just one example of what a native code has to offer over a plugin. In fact, virtually everything becomes easier when you’re not working with a black box. What this all adds up to is a truly powerful new medium.
HTML 5 is indeed markup and JavaScript APIs for the browser. It isn't intended to access data on servers.
But it's rarely used on its own.
CSS adds style to content.
JavaScript makes client side code dynamic.
AJAX allows you to make asynchronous calls to services to get data, keeping your UI responsive.
Yes, you still need services.
HTML 5 replaces earlier versions of HTML, nothing more.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm a developer, and I find that I have a hard time dealing with graphic and visual design. It's as though the part of my brain devoted to abstract reasoning swallowed up the visual part.
There are a pile of awesome introductions to various programming languages that assume a certain level of sophistication with programming. Are there any such tutorials for HTML and CSS? As in tutorials that approach HTML and CSS in a similar way?
Failing that, what good web design tutorials might you guys recommend?
HTML and CSS are just means to an end. 20 years from now we may have something different, but design fundamentals stay the same. From your question, I think you want to develop a sense of what is visually pleasing and usable and have the understanding to implement such designs.
Along those lines, look at magazine layouts; look at professional advertising; look at logo design and try to pick out the things which make them distinctive. Look at websites which are popular, easy to browse, easy to read.
Take the things you see and like and try to incorporate a little of that into each design you build. Some of the tools (like Photoshop) can be daunting at first, so don't try to conquer the world. Just make each design better than the last.
Here's a real, doable example that starts with only minimal knowledge:
Read some tabular data from a database; as a programmer, I'm sure you know how to do that.
Read a tutorial anywhere on HTML tables. Their structure involves only 3 major tags and a handful of supporting ones. [See footnote #1]
Put the data in the table with no styling. Looks terrible, right? Now identify why it looks terrible. What is not pleasing to the eye? Compare it to a clean layout on another site that you like.
Examine small details like padding and margins and learn the basic CSS rules to implement those things. In doing so, you will begin to develop a sense of fundamental usability and aesthetic guidelines (such as the importance of well-placed whitespace).
Now take one of those "daunting" tools like Photoshop and accomplish a really simple task. Maybe it will be something as simple as cropping an icon or creating a simple gradient for your table heading. Pick a task, and find a tutorial if you need to.
This all sounds extremely simple, but you would be surprised how many developers never bother to even try.
Another Example
Fonts make a huge difference in the aesthetics and usability of a visual design. Start by perusing a few major sites and looking at commonly used fonts. Do a little reading on what fonts are commonly used in print, and why.
Now take a technical approach. What fonts can we safely use on the web? What tools are available to us as developers to embed custom fonts?
Armed with this knowledge, create a plain page and try styling a small news article (cut and paste the raw text from somewhere; it doesn't matter).
Choosing a good font will improve the design. But what about headings? Special styles like drop-caps? It's all there in HTML and CSS; start reading best practices on semantically structuring documents and how to implement different styles.
At the end of this exercise, will you be an expert? Of course not. But you will have discovered a whole set of new technical avenues that you should pursue further like semantic structures, the HTML document model, and CSS text-styling directives.
You may even come across multi-device/accessibility topics, such as how to accommodate screen readers.
As a designer, you will begin to understand the level of effort which goes into something as "simple" as styling text and you will start to develop that intangible sense of what "feels" right. The better you get, the more your audience will share that feeling.
My Opinion
It's a common misconception that developers can't/shouldn't be visual designers. I disagree; engineers should understand end user experience, heuristics, and aesthetics. Not everyone can be a great visual designer, but I have taught many people the basics and their designs are always a cut above the rest (even if they aren't perfect). I have also built my career upon being comfortable with the most technical and the most user-facing aspects and frankly, it's a lot of fun. Nothing is off-limits.
Links
A List Apart - Code Articles - Great articles on specific technologies, but make sure to not miss out on other general design articles.
Color Theory
Color Palettes
Printed Text Guidelines - Extremely applicable for certain types of websites.
CSS Basics - straight from the W3.
[Footnote #1] - to any HTML/CSS developers: I am not suggesting that the OP build table-based layouts; just suggesting that they take a familiar data structure and get a sense for the tasks involved in styling it.
Graphic design and HTML/CSS are almost completely different domains. What is it that you're looking to get better at? Graphic design using programs such as Photoshop or Gimp? Are you looking to get a better technical understanding of how CSS and HTML work? Or are you looking to understand good UX (User eXperience) design and how to incorporate that into HTML/CSS layouts?
I think you need a better understanding of what it is that you're looking for first. Maybe take a look at W3C specs as a starting point. Having a technical background, reading these specs should be relatively trivial (for the most part) and will help you understand what it is that you want to understand.
I think the best way to become a good web designer and developer at the same time is to learn web development tutorials at thenewboston.com, they make learning easy and fun at the same time.
After learning CSS, HTML, Javascript, etc, you can download source code of various website templates and learn how from them.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
In various forums and blogs, I see some people promoting HAML and some promoting HTML. What are the advantages and disadvantages of using HAML vs HTML?
I just want to understand what I'm missing out on if I use HAML in favor of HTML (if any).
You are trying to compare Apples to Oranges. Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it. However IMHO - abstracting away what actual elements you are generating just makes applying CSS and doing JavaScript navigation that much more difficult.
Personally if I wanted to "trim" my HTML, I would put content into tags (depends on your serverside technology)
<!doctype html>
<html>
<head>...</head>
<body>
<x:awesomeListThing data="$foo"/>
<x:foreach data="$bar">
<x:renderBazWidget/>
</x:foreach>
<div>random content that hasn't been "tagified" yet.</div>
</body>
</html>
Then inside any tag's template you'll be able to see the actual HTML structure that is being generated.
On Stackoverflow - HTML has 65k followers. You WILL get an answer, most likely many answers, in a very short amount of time. HAML has 157 followers. Simple math.
The main disadvantage of using HAML over HTML is simply that HTML is just about universal among web developers, where as the HAML community is still a relatively small community. This would undoubtly make finding developers to work on your project in the future a more daunting task.
But if you have the resources, you could argue that to be an advantage. Ensuring you only hired developers that were capable and experience in HAML.
The other major down side I can see is that if you have graphics/web designers working on your templates, separate from your development team, they would also have to be familiar with HAML. As you can imagine there are very few graphics/web designers who capable of it, and few tools to help them.
Google HAML. I am sure, you will get relevant stuff to understand it.
Haml is:
Easy to read and visually expresses your DOM hierarchy
Easy to learn
Ported to other languages
Well-maintained and has a huge community
Popular with designers because it borrows CSS syntax
Almost as fast as plain ERB
Makes many types of error impossible (or very difficult)
See here :
Your attitude to Haml?
When major IDEs (such as Aptana) learn to parse HAML, we can return to the question. Right now I see HTML's superiority in that it's widely supported and understood by common parsers. You get proper syntax colouring and any errors or validation problems get marked instantly. This is not true of HAML.
Additionally, consider web templates. They're usually (X)HTML + CSS, be them ready templates for hire or the designs your designer cuts for you. What are your odds of getting a, say, HAML+SASS template instead of the usual XHTML+CSS?
HAML needs to gain more field and its community needs to grow much more before it's a viable alternative to HTML. Currently most web coders don't even know what HAML is, not to mention writing anything in HAML.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Is there a free open source software for protecting HTML from "select all", "copy" and "save as".
No. Neither is there non-free nor non-open source software to do it in a reasonable way.
There are a couple of tricks you could try (generating all the content via obfuscated JS, checking the URI with JS, and so on), but they are easily bypassed and have unpleasant side effects (not least of which is making it impossible for search engines to index the content).
As David Dorward said, you effectively cannot do this, but there are a few approaches you can take as long as you're willing to abandon pure HTML. All are ugly and I do not advocate their use for a multitude of reasons. Most of those reasons should be pretty obvious.
I mention them only because I have been in situations where I have been required to do this by the business requirements of a customer. I could either lose the customer or figure out a way. Since most business folks aren't software purists, they simply didn't care how it was done. If you're in this situation, I sympathize.
You could generate an image on the server side and display the information as an image. This approach was once used by the local sheriff's office, but they eventually went back to HTML since images are costly in terms of server resources and bandwidth. There are many open source ways to generate images.
You could use a technology like Flash or Silverlight to display the information. You would then have much greater programmatic control over disabling the copying of the information. I strongly prefer the HTML/CSS/JS approach to web programming due to its far reach and simplicity, so I don't recommend this approach either. Also, since it isn't open source, it's probably not an option for you.
Good luck.
To put it bluntly there is nothing that will piss me off faster about a web site than the developer trying to take control of what I can do with my browser. I'm not alone in this regard so do realize that many people will eventually just say to he'll with the web site and whatever business it is trying to support.
The simple way to deal with this is to simply avoid showing the nonsubscriber the data in question. Rather feed the nonsubscriber dummy info or good info that gas critical parts obscured. What you don't want to do is to screw around with code that hamstings somebodies browser or worst makes that browser unstable.
Basically it comes down to this do not cause harm and do not impact normal operation of a browser. There are perfectly sane ways to show a nonsubscriber what he might get if he where a subscriber with out risking vast amounts of content.
Dave
This is absolutely no way to achieve your underlying aim, which is (apparently) to stop a non-subscriber copying or saving data. If a user can see the data, then they can copy it. End of story.
They can take a screenshot and use OCR. They can always get out a pad of paper and a pencil and copy it down. This might seem like a lot of effort, but you have to ask yourself: is it worth the effort to evade what you're charging for subscription?
The best advice is to find another way to do business.
If you allow something to be readable by users on the web, it will be possible to copy.
One can always take screenshots or simply write the text again while looking at the original.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Can anyone out there recommend a good online resource for CSS 'design patterns'?
I know design patterns in a software context usually refer to OO based design patterns, but I mean design patterns in the broader sense of the term: i.e. common, clean solutions to common problems / tasks.
An example of such a resource would be this list of table designs, this gives you all you really need to know about how to make tables look nice using a set of CSS techniques.
Other examples of common problems which could have nice set solutions would be things like rounded corners on divs, highly usable form layouts etc.
Some websites that address web design patterns are listed below. They do not specifically provide the HTML and/or CSS in order to achieve the desired results, but they do provide examples of live sites that you can view source on (or, even better, use Firebug).
UI-patterns
This is probably the best of the bunch. It breaks things down into categories that cover the breadth of web page design tasks. You'll find categories such as tag-clouds, live preview and user registration among many others. This is a really comprehensive resource that is well organized. It explains each pattern and provides plenty of examples.
Pattern Tap
Similar to UI-Patterns although currently not as comprehensive. It takes a more social approach to collating design patterns by allowing users to create their own categories ("user sets") and populate them with their own selection of sites.
Yahoo Design Pattern Library
Unlike the other two, this one doesn't provide many examples of real sites. It is well organized and quite comprehensive.
Elements of Design
This is a blog showcasing various elements of web design. It doesn't discuss the patterns, but is good as a quick source of inspiration, or as a means to start your own analysis.
I refer to A List Apart articles all the time for those sorts of
things.
They do a lot of trial-and-error research to come up with really creative ways to handle those common CSS problems in the cleanest most portable way possible.
The Floatutorial is a great starting point for learning the important CSS attribute "float" and how to use it to layout content using some common patterns including two-column and three-column liquid layouts.
Floatutorial takes you through the
basics of floating elements such as
images, drop caps, next and back
buttons, image galleries, inline lists
and multi-column layouts.
The already mentioned A List Apart is really good. Another site I've used since I started web development is SitePoint.com. Here is their CSS Reference. If you want a good CSS book their's is one of my favorites.
The nearest thing to a "design pattern" in CSS are common layouts. The best tool for taking advantage of common layouts, column widths, etc. is 960 grid system, at 960.gs
Watch this screencast for a brief intro. It saves a ton of time, and helps you apply all the common layout patterns with minimal code:
http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
All you have to do is to apply the proper classes and do a little arithmetic to make sure all the column widths add up.
The one book that I recommend the most for CSS is CSS Mastery by Andy Budd (cssmastery.com). It is somewhat small, but it has helped me more than any other CSS book.