good inline drop downs ( learn more link) with different color and nestged dropdowns ..
--------HTML formatter
-----
http://forums.stockfetcher.com/ui2/index.php site has good tabbed dividers to hold lots of data
---------------
http://acsseo.com/casestudies/
- this is one good site with all DIVs and CSS no tables
http://www.mardiros.net/liquid-design.html -- liquid design
- see all good links at bottom of page
-----
Books:
Pro CSS and HTML Design Patterns -- great reviews, i looked at book in office
-- see all code is online too at this site -- see at bottom source code example to get all source code ..
-- note: see this author is Master and PHD in Music theory, taught computers himself .. what a good book to expect from cross domain people ..
good css beginner book -- read in Barnes Nobel book store
Pro JavaScript Techniques -- good reviews
----------------------
good CSS example Code
see categories at the left hand menu at this url
http://www.dynamicdrive.com/dynamicindex16/
- see these corporate style CSS FORM , very good http://www.dynamicdrive.com/style/csslibrary/category/C6/
-------------------------
Good CSS tutorial -- simple and easy to understand part 1, 2, 3 at this url
http://www.csstutorial.net/css_tutorial_part1.php
-----------------------
Good real sites with NO or mimimal table but all CSS
this site page is total CSS -- good example of real site with total css
No html table all CSS - good funded site
Tutorials
-- In this post we’ve covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials.
Java script -- seems good
210 Ajax Frameworks and Counting
Choosing an Ajax Framework
Using Firebug to Aid GME Development
How to really produce web based business applications in record time
problem:
- number one reason for bugs and low productivity while producing business web pages is 'inability to follow the flow of a web page' ( and mix of error conditions with flow ).
- Causal web pages shown on tutorials/how to in books are all toy pages in that there is not much a flow logic of page in the sense that If is country AU do this , if Canada do this, If business seller do this, if regular seller do this. 90% of the time this business flow logic is combined with presentation ( html) and the file runs in to 1000 lines of code. This 1000 line file is hard to comprehend how the flow is moving.
- web front end development does not have good software engineering methodoogy ( like patterns in backend java ) so due to lack of 'sofware engg' standard way of developing pages causes issues. This lack of standards on frontend cause burden on backend developers also in finding what is the root cause of a bug.
Solution:
- Have a 'page flow model' , this is a class or function which captures the logic (above said Site, business user etc..) and create a datamodel ( example a java class ) and the 'actual' presentation renders based on this 'page flow model'.
- example:
class ForgotUserID
{
boolean warningText ;
boolean warningTextAU ;
boolean warningTextCA ;
boolean pageErrorType ;
const int fatalerrorNoWebPage; // these vars can be defined in a common class
const int fatalerrorShowJustHeader;
const int errorShowPage ;
setPageErrorType {
if ( /model/parms/error = 502 )
pageErrorType = fatalerrorNoWebPage ;
else if (( /model/parms/error != 502 ) && ( usertype = buiess) )
pageErrorType = fatalerrorShowJustHeader ;
}
setWarningTextAU {
if ( (site=AU) && (userType= Biz) )
warningTextAU = true;
else
warningTextAU = flase;
}
setWarningTextCA {
if ( (site=CA) && (userType= reg) && ( registered != ture ))
warningTextCA = true;
else
warningTextCA = flase;
}
}
In the presentation file ( html code )
if ( fatalerrorNoWebPage ) { showPageHeadeerror()' }
else if (fatalerrorShowJustHeader)
{
showpageHeader();
else
{
showPageHeader();
if (warningTextCA)
}
How to be productive with web page development:
- can you say fixed 2 days and then per flow 1 day of development on any given web page. you can if you follow above 'page flow model'
- for all industry tested colors and web layout ( public pages)look sites like amazon, ebay , salesforce.com . They invested 100s of hours in coming up with those tested colors and web layouts .
- have Nice CSS layouts, have it as fixed number templates to suite your company needs and they should be designed upfront and reused by every team.
- most of the web pages fits into thse CSS elements. Header, sub header , paragraph, list and a FORM . If you have set of layouts around these elements that will server 90% of the needs.
- test case before development: even for UI you should have test cased before development , these are 'code based' test cases not test cases on word doc. Have the above 'page flow model' has set of XML files and stored as part code in version tree under testcases. If a page has 8 different flows based on countries , usertype ( biz etc) have 8 different xml test cases. These xml will be loaded into javaclass at unit testing time. when production bug comes the guy fixing bug first run existing unit tests ( better yet see the pageflow[do with a easy to use graphic tool] ) then he fix the 'page flow model' logic page.
example:
≤ForgotUserID>
≤warningText>true
≤warningTextAU >true
≤warningTextCA >false
≤pageErrorType>fatalerrorNoWebPage -- fatal error no web page
≤/ForgotUserID>
≤ForgotUserID>
≤warningText>true
≤warningTextAU >true
≤warningTextCA >false
≤pageErrorType>errorShowPage -- error but show page
≤/ForgotUserID>
CSS blogs
CSS Beauty: Its purpose is to showcase designers' work and to act as a small portal to the CSS design community.
good archives:
-following articles came the above archives
Creating a table with dynamically highlighted columns
A CSS styled table version 2
Nice way to show archives ( space saving, elegent )
CSS:
HTML CSS excellent examples
HTML CSS Reference
Designing on a Dime: 100 Freebie CSS Resources
Do you want a spiffy Web site design, but lack the means or knowledge to get it? No problem, brush up on CSS and get that site you want with our freebie guide!
If you're in the market for a professional grade site, you've probably found that quality design work doesn't come cheap. But while hiring outside help can be costly, designing your own site can be almost free if you know where to look for good resources, tutorials and tools.
most popular, most linked to from other sites
- go to categories you can find many of them...
Most Popular Books
simple CSS styles with buttons, dropdowns
-----
http://forums.stockfetcher.com/ui2/index.php site has good tabbed dividers to hold lots of data
---------------
http://acsseo.com/casestudies/
- this is one good site with all DIVs and CSS no tables
http://www.mardiros.net/liquid-design.html -- liquid design
- see all good links at bottom of page
-----
Books:
Pro CSS and HTML Design Patterns -- great reviews, i looked at book in office
-- see all code is online too at this site -- see at bottom source code example to get all source code ..
-- note: see this author is Master and PHD in Music theory, taught computers himself .. what a good book to expect from cross domain people ..
good css beginner book -- read in Barnes Nobel book store
Pro JavaScript Techniques -- good reviews
----------------------
good CSS example Code
see categories at the left hand menu at this url
http://www.dynamicdrive.com/dynamicindex16/
- see these corporate style CSS FORM , very good http://www.dynamicdrive.com/style/csslibrary/category/C6/
-------------------------
Good CSS tutorial -- simple and easy to understand part 1, 2, 3 at this url
http://www.csstutorial.net/css_tutorial_part1.php
-----------------------
Good real sites with NO or mimimal table but all CSS
this site page is total CSS -- good example of real site with total css
No html table all CSS - good funded site
Tutorials
-- In this post we’ve covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials.
Java script -- seems good
210 Ajax Frameworks and Counting
Choosing an Ajax Framework
Using Firebug to Aid GME Development
How to really produce web based business applications in record time
problem:
- number one reason for bugs and low productivity while producing business web pages is 'inability to follow the flow of a web page' ( and mix of error conditions with flow ).
- Causal web pages shown on tutorials/how to in books are all toy pages in that there is not much a flow logic of page in the sense that If is country AU do this , if Canada do this, If business seller do this, if regular seller do this. 90% of the time this business flow logic is combined with presentation ( html) and the file runs in to 1000 lines of code. This 1000 line file is hard to comprehend how the flow is moving.
- web front end development does not have good software engineering methodoogy ( like patterns in backend java ) so due to lack of 'sofware engg' standard way of developing pages causes issues. This lack of standards on frontend cause burden on backend developers also in finding what is the root cause of a bug.
Solution:
- Have a 'page flow model' , this is a class or function which captures the logic (above said Site, business user etc..) and create a datamodel ( example a java class ) and the 'actual' presentation renders based on this 'page flow model'.
- example:
class ForgotUserID
{
boolean warningText ;
boolean warningTextAU ;
boolean warningTextCA ;
boolean pageErrorType ;
const int fatalerrorNoWebPage; // these vars can be defined in a common class
const int fatalerrorShowJustHeader;
const int errorShowPage ;
setPageErrorType {
if ( /model/parms/error = 502 )
pageErrorType = fatalerrorNoWebPage ;
else if (( /model/parms/error != 502 ) && ( usertype = buiess) )
pageErrorType = fatalerrorShowJustHeader ;
}
setWarningTextAU {
if ( (site=AU) && (userType= Biz) )
warningTextAU = true;
else
warningTextAU = flase;
}
setWarningTextCA {
if ( (site=CA) && (userType= reg) && ( registered != ture ))
warningTextCA = true;
else
warningTextCA = flase;
}
}
In the presentation file ( html code )
if ( fatalerrorNoWebPage ) { showPageHeadeerror()' }
else if (fatalerrorShowJustHeader)
{
showpageHeader();
else
{
showPageHeader();
forgot UserID
if (warningTextCA)
you have to be careful while giving userIDs
}
How to be productive with web page development:
- can you say fixed 2 days and then per flow 1 day of development on any given web page. you can if you follow above 'page flow model'
- for all industry tested colors and web layout ( public pages)look sites like amazon, ebay , salesforce.com . They invested 100s of hours in coming up with those tested colors and web layouts .
- have Nice CSS layouts, have it as fixed number templates to suite your company needs and they should be designed upfront and reused by every team.
- most of the web pages fits into thse CSS elements. Header, sub header , paragraph, list and a FORM . If you have set of layouts around these elements that will server 90% of the needs.
- test case before development: even for UI you should have test cased before development , these are 'code based' test cases not test cases on word doc. Have the above 'page flow model' has set of XML files and stored as part code in version tree under testcases. If a page has 8 different flows based on countries , usertype ( biz etc) have 8 different xml test cases. These xml will be loaded into javaclass at unit testing time. when production bug comes the guy fixing bug first run existing unit tests ( better yet see the pageflow[do with a easy to use graphic tool] ) then he fix the 'page flow model' logic page.
example:
≤ForgotUserID>
≤warningText>true
≤warningTextAU >true
≤warningTextCA >false
≤pageErrorType>fatalerrorNoWebPage -- fatal error no web page
≤/ForgotUserID>
≤ForgotUserID>
≤warningText>true
≤warningTextAU >true
≤warningTextCA >false
≤pageErrorType>errorShowPage -- error but show page
≤/ForgotUserID>
CSS blogs
CSS Beauty: Its purpose is to showcase designers' work and to act as a small portal to the CSS design community.
good archives:
-following articles came the above archives
Creating a table with dynamically highlighted columns
A CSS styled table version 2
Nice way to show archives ( space saving, elegent )
CSS:
HTML CSS excellent examples
HTML CSS Reference
Designing on a Dime: 100 Freebie CSS Resources
Do you want a spiffy Web site design, but lack the means or knowledge to get it? No problem, brush up on CSS and get that site you want with our freebie guide!
If you're in the market for a professional grade site, you've probably found that quality design work doesn't come cheap. But while hiring outside help can be costly, designing your own site can be almost free if you know where to look for good resources, tutorials and tools.
most popular, most linked to from other sites
- go to categories you can find many of them...
Most Popular Books
simple CSS styles with buttons, dropdowns
No comments:
Post a Comment