Expressing IT http://developer.expressionz.in/blogs User Interface : just another, but a serious developers weblog Tue, 09 Mar 2010 17:04:38 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Its about the “Web designers who can’t code” http://developer.expressionz.in/blogs/2010/03/09/its-about-the-web-designers-who-can%e2%80%99t-code/ http://developer.expressionz.in/blogs/2010/03/09/its-about-the-web-designers-who-can%e2%80%99t-code/#comments Tue, 09 Mar 2010 16:47:06 +0000 Nikhil http://developer.expressionz.in/blogs/?p=189 With my limited skill-set with tools like Photoshop and Illustrator, I can honestly confess that I’m a better developer than I am a designer. But my background with core (server side) development with Java/PHP/COBOL , has been a very positive influence on my UI development skills. What I mean is, while creating my designs,i.e. whenever I do design, I think about how the design can be best converted into HTML-CSS and while doing the HTML-CSS, I give a thought about the backend technology and make reasonably sure that the HTML can be easily implemented into XSL loops or PHP snippets etc.

Over years, I have been thrown head on to designs by UI designers who probably donot have a clue what HTML or CSS is. All these years I have been thinking that I would asking for too much, If I just expect the designer, who is trying to shov his “impossible to code” design down my throat, to understand just a little bit what his design would be converted into. THAT would help right?

Then, I came across this post today … Web designers who can’t code …Thanks Lord! I’m just one of many who feel the same … The above artitle is a bit a long winded .. but worth the read, every word of it.

Thanks Elliot Jay Stocks … I feel relieved!

Here is some excerpts from Elliots article.

Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. It appears there are some very strong opinions held on the subject of whether web designers should be able to code.
…
So, before we get into this, allow me to quickly recap what I said on this morning on Twitter:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

… I should’ve been a little more specific in my tweet. I was talking about designers who don’t have even the most basic HTML and CSS skills to turn a flat design into an actual site. Not people who intentionally choose not to code; those who can’t. And I’m also referring only to front-end code here; of course it’s ridiculous to think that designers should also be amazing back-end programmers …

We get ‘web’ designs sent in Illustrator, 300dpi, impossible to code, no consistency / usability.
~ Amy Mahon

It’s getting late, and I’ve got to wrap this up somehow. I know there will be many who disagree with me, and my intention is not to offend or upset anyone who can’t code, but I hope that some of what I’ve said reflects some of the points that always come up when delving into this debate.

At the end of the day, I don’t lose any sleep over who can code and who can’t. I’m just genuinely surprised to find so many designers that lack front-end skills, as I thought this was a thing of the past.

Also read the comments , there were around 320 comments, as i write … they are worth a read.
Please read Elliots full post here .. Web designers who can’t code

]]> http://developer.expressionz.in/blogs/2010/03/09/its-about-the-web-designers-who-can%e2%80%99t-code/feed/ 0 Aligning radio button with text http://developer.expressionz.in/blogs/2010/03/04/aligning-radio-button-with-text/ http://developer.expressionz.in/blogs/2010/03/04/aligning-radio-button-with-text/#comments Thu, 04 Mar 2010 09:02:20 +0000 Nikhil http://developer.expressionz.in/blogs/?p=170 Since the radio button and the text are inline, so the text will align itself to the bottom of the radio button, The the text will appear to be slightly under the radio button.
If you want these to align to the top, you’ll have to place the radio and the text into separate containers like divs or spans ( as appropriate) and they will take care of the alignment. It would be easier to use table cells too, of your design brief permits it.

This won’t look the same in every browser, as every browser displays radios slightly differently, so there’s always going to be size issues no matter what you do.

]]> http://developer.expressionz.in/blogs/2010/03/04/aligning-radio-button-with-text/feed/ 0 What will HTML5 bring? http://developer.expressionz.in/blogs/2010/01/08/what-will-html5-bring/ http://developer.expressionz.in/blogs/2010/01/08/what-will-html5-bring/#comments Fri, 08 Jan 2010 16:56:41 +0000 Nikhil http://developer.expressionz.in/blogs/?p=176 HTML5 is still a draft. As I write, Work on HTML 5, which commenced in 2004, is still being given shape by a joint effort between the W3C HTML WG and the WHATWG.   The word is that the next gen HTML will have  enhancements and  features, which would new structure and semantics , form controls, APIs, multimedia tags etc..

In simple English … what would it mean to  us UI developers …

  • There will addition of some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav>, which would replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read.
    Hey! Just imagine the effort saved in finding that one missing close DIV tag.
    e.g.
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Instead of

<body>
  <div id="header">...</div>
  <div id="nav">...</div>
  <div class="article">
    <div class="section">
      ...
    </div>
  </div>
  <div id="aside">...</div>
  <div id="footer">...</div>
</body>
  • With the advent of  audio and video content like YouTube, the use of embedded multimedia on the webpage has increaded by fold. Taking this into account , Now the plan is to add native support for embedding video and audio into the browser itself,  hence allow users to play, pause, stop, seek, and adjust volume using the builtin DOM APIs for scripts to control the playback.

e.g.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
        <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>
  • Better-defined semantic roles for existing elements  for eg. <strong> and <em> might now actually have different  meanings i.e.  they will behave differently.

There are many more changes/upgrades to the newer version … Will keep updating this post as I come accross any interesting useful ones …. Watch this space

This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification here.

]]> http://developer.expressionz.in/blogs/2010/01/08/what-will-html5-bring/feed/ 0 CSS ZOOM – Yet Another IE quirk; The 3 pixel shift http://developer.expressionz.in/blogs/2009/11/07/css-zoom-yet-another-ie-quirk-the-3-pixel-shift/ http://developer.expressionz.in/blogs/2009/11/07/css-zoom-yet-another-ie-quirk-the-3-pixel-shift/#comments Sat, 07 Nov 2009 11:56:27 +0000 Nikhil http://developer.expressionz.in/blogs/?p=158 Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum,  that doesn’t seem to have a fix . Just such a one is this issue in IE7.

Problem Statement:
I  and  so might many of the other  serious web developers have  noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right.   I have tried to google solutions for this issue , but have  hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening)  , hence  I  have never found a clear solution to the problem either…

Possible Solution :
Out of experience , I have notice 90% percent of the times  i.e. ,  that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container … 

#somediv {
      zoom: 1 ;
}

again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…

The zoom property is also seems to supported by Chrome , but  its use  dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t,  bookmark this page under “CSS craps”

]]> http://developer.expressionz.in/blogs/2009/11/07/css-zoom-yet-another-ie-quirk-the-3-pixel-shift/feed/ 1 HTML & XHTML http://developer.expressionz.in/blogs/2009/10/18/html-xhtml/ http://developer.expressionz.in/blogs/2009/10/18/html-xhtml/#comments Sun, 18 Oct 2009 17:22:29 +0000 Nikhil http://developer.expressionz.in/blogs/?p=182
  • The Document Type Declaration needs to be present at the beginning of a document that uses the HTML syntax. It may optionally be used within the XHTML syntax, but it is not required. The XHTML document does not need to include the DOCTYPE because XHTML documents that are delivered correctly using an XML MIME type and are processed as XML by browsers, are always rendered in no quirks mode.
    • In XHTML, tag names are case sensitive and are usually defined to be written in lowercase. In HTML, however, tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. The case of the start and end tags do not have to be the same, but being consistent does make the code look cleaner.

    BENEFITS OF USING HTML

    • Backwards compatible with existing browsers
    • Authors are already familiar with the syntax
    • The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
    • Convenient shorthand syntax, e.g. authors can omit some tags and attribute values

    BENEFITS OF USING XHTML

    • Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
    • Integrates directly with other XML vocabularies, such as SVG and MathML
    • Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes
    ]]>     http://developer.expressionz.in/blogs/2009/10/18/html-xhtml/feed/ 0     CSS2.1 User Agent Style Sheet Defaults http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/ http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/#comments Tue, 28 Jul 2009 05:11:58 +0000 Nikhil http://developer.expressionz.in/blogs/?p=149 Yesterday,  after the issue I encountered with the CSS Resets in Google Chrome… I thought of digging a bit deeper into the area of  User Agent Style Sheets …
    Found this table on default values of CSS2.1 User Agent Style Sheets … ( for those unaware of what “User Agent Style Sheets” is follow What is User Agent Style Sheets (Specification) .

    For a full list of CSS 2.1 User Agent Style Sheets defaults click here

    ]]>     http://developer.expressionz.in/blogs/2009/07/28/css21-user-agent-style-sheet-defaults/feed/ 0     User Agent Style Sheets : Mystery Margins in Google Chrome http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/ http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/#comments Mon, 27 Jul 2009 05:01:22 +0000 Nikhil http://developer.expressionz.in/blogs/?p=146 Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

    Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
    A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

    *{ margin:0; padding:0; }

    What is User Agent Style Sheets (Specification) ?
    The following  excerpt is taken  from http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link to read more on User Agent Style Sheets

    CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

    Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

    ]]>     http://developer.expressionz.in/blogs/2009/07/27/user-agent-style-sheets-mystry-margins-in-google-chrome/feed/ 2     How To Enable Writing to Status Bar (window.status) in Firefox http://developer.expressionz.in/blogs/2009/04/06/how-to-enable-writing-to-status-bar-windowstatus-in-firefox/ http://developer.expressionz.in/blogs/2009/04/06/how-to-enable-writing-to-status-bar-windowstatus-in-firefox/#comments Mon, 06 Apr 2009 09:04:57 +0000 Nikhil http://developer.expressionz.in/blogs/?p=142 Another old school memory supplemental…

    Why do we to enable windos.status?
    Javascripts could to be a nightmare when you have something to debug .  Firefox does have a few handy addons, like Firebug thats makes our lives easy  and   Also , the vote for the  most popular debug  technique in Javascript must go to “ALERT()” .  Anywaz! There are few instances when adding ALERT do debug your mis-behaving Javascript  is just isn’t a good idea. For example! you have dragble item whose position  needs to be alerted …. NO NO! Dont do it! … you will  just get  infinite alerts  or you wont be able actually drap your dragable. Well! There are more good situations, where you might writing out debug texts to the status bar, much more usful… Believe me! Its Experience!

    IE by default left you write to the browser STATUS Bar  using the syntax “window.status = ‘ something to debug’ “, but FireFox doesn’t  . So to enable windows status change , you can do either of the following.

    Open about:config in browser ( type “about:config“ this into the address bar )  and search for
    dom    .disable_window_status_change    .  Change it to false… just click on the entry to toggle its state.

    OR Alternatively

    “Tools → Options → Content → Enable JavaScript / Advanced → Change status bar text“

    And also note that … to write to the status bar in your Javascript, IE is just ok if you use a short syntax i.e. status =’ some debug text’ but in FireFox, you have to use in full syntax i.e.  window.status = ‘ something to debug’

    ]]>     http://developer.expressionz.in/blogs/2009/04/06/how-to-enable-writing-to-status-bar-windowstatus-in-firefox/feed/ 0     IS disabled=”true” and disabled=”false” the same? http://developer.expressionz.in/blogs/2009/03/24/is-disabledtrue-and-disabledfalse-the-same/ http://developer.expressionz.in/blogs/2009/03/24/is-disabledtrue-and-disabledfalse-the-same/#comments Tue, 24 Mar 2009 07:00:33 +0000 Nikhil http://developer.expressionz.in/blogs/?p=137 Yes... here is some quick explanation... "disabled" is an attribute of any form element/field and hence can accept any value by its nature. So as long as this attribute is present, the element will be disabled regardless of its value]]> This ones old school , but as usual it is my memory supplement …
    So is disabled=”true” and disabled=”false” same?Yes
    … Don’t believe, well! thats the way it is … here is some quick explanation…
    “disabled” is an attribute of any form element/field and hence can accept any value by its nature.

    As long as this attribute is present, the element will be disabled regardless of its value. for eg.
    <input type=”text” value=”This is disabled” disabled>
    <input type=”text” value=”This is disabled” disabled=”disabled”>
    <input type=”text” value=”This is disabled” disabled=”true”>
    <input type=”text” value=”This is disabled” disabled=”false”>

    All of the above will make the this form field “DISABLED”.

    Simply not providing the attribute “DISABLED” keeps the Field “ABLED” … like below

    <input type=”text” value=”This is not disabled” />

    Remember “Any value (or no value at all) of the disabled attribute, the browser will render it disabled” . To keep things clear in our minds W3C recommends that we use disabled=”disabled” in these situations.

    This is difference though when we use this attribute in javascript …

    document.form.element.disabled = true; //the element will be disabled
    document.form.element.disabled = false; //the element will be enabled

    The above arguments are also true for these attributes and elements :

    • checked (radio button and checkbox)
    • selected (option)
    • nowrap (td)
    ]]>     http://developer.expressionz.in/blogs/2009/03/24/is-disabledtrue-and-disabledfalse-the-same/feed/ 0     SevenUp! Encourage the world to get rid of IE6! http://developer.expressionz.in/blogs/2009/03/22/sevenup-encourage-the-world-to-get-rid-of-ie6/ http://developer.expressionz.in/blogs/2009/03/22/sevenup-encourage-the-world-to-get-rid-of-ie6/#comments Sat, 21 Mar 2009 19:51:46 +0000 Nikhil http://developer.expressionz.in/blogs/?p=134 Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
    Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

    SO … Help rid the world of IE6 with one line of javascript!

    http://code.google.com/p/sevenup/

    ]]>     http://developer.expressionz.in/blogs/2009/03/22/sevenup-encourage-the-world-to-get-rid-of-ie6/feed/ 0