Related
I am a student in Web Design and I would like to make a slider without javascript for a personal project. I would like to make a slyder like this in CSS only with a good accessibility.
Original website : https://www.synthesia.io/ (This is the section with the title 'Used by over 12,000 trainings'.)
I thought of using a checkbox hack and playing with display block and display none. But I think it's not optimal for accessibility. Do you have any ideas? Thank you for your future answers.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
What should be the top 10 CSS and HTML questions to ask an interviewee? To test his level of knowledge if interviewee mentioned 2 yrs. experience in XHTML and CSS.
Edit:
how we can know interviewee's cross browser layout making capability? My question is only related to xhtml css coding not about design ability
What is the CSS box model?
What is the difference between quirks mode, standards mode and almost standards mode?
Tell me about hasLayout.
What would be the most appropriate markup for: a navigation menu; a picture gallery; a blog post. (Why? Can you think of some alternatives? Might be good to draw these up on a whiteboard or something)
What's the difference between <p class="main_header">Foo</p> and <h1 class="main_header">Foo</h1>?
Why is this a bad idea?: <span class="red">Bar</span>
Describe how to set opacity and how will it appear in Gecko, WebKit and IE.
How can you set few properties on to textboxes as default?
A design calls for png files with alpha transparency, what issues might you encounter?
Some of these are the same as zoul's questions except from a slightly different angle - I was aiming for questions that would lead to a bit of a discussion.
Why is it a good idea to split HTML and CSS?
What is the difference between inline and block elements?
What is a doctype good for?
What is the difference between classes and ids?
What is the difference between margin and padding?
These should be more than plenty to see how much candidate knows about browsers, standards and the reasoning behind HTML and CSS. Maybe you could throw in some floats, positioning and similar stuff if you want to test detailed CSS knowledge.
Update: The point is the kind of answer you are going to get, of course. If you ask about margin and padding and you get a clean drawing of box content, added padding, border line and margin, possibly collapsing against another box, you know the guy knows what he is talking about. Same goes for all the other questions.
No amount of questions in a short interview would establish a person's skill level. And there is the question of innovative qualities of a person which may not reveal itself in an interview. Some people may be introverted and shy or suffer from interview jitters others may be smooth talkers with little substance. There is also the challenge of asking objective questions not opinions.
If I show up for an audition to join a symphonic orchestra and tell them I have been playing the violin for 20 years they will not ask me about the construction of the bridge or the best material for bow strings. They give me a music score and ask me to play.
I suggest creating a simple web page that requires the techniques mentioned in the answers above, showing it to the candidate and asking the candidate to re-produce it in 30 minutes using the notepad. This will sort out the experienced from the novice.
Apart from HTML/CSS/JS specific or problem-solving questions, I would also ask what sort of tools she/he is using to get a task done. It often gives good insights about 'how' someone works and gives good/relaxed room for discussion. Good developers always have good and sharp tools.
I've taken a number of tests over the past couple of years and in all honesty there are really no questions one can ask to judge how great someone is at coding in HTML and/or CSS.
First, if the interviewee claims to have written web pages over the past couple of years ask for a couple of examples. If possible get him/her to email you them, print them out and get the user to explain and critique everything about them. Completely tear through everything regarding their previous work and get them to explain everything they can about it.
Once this is done, the user should be given a small task involving the development of a web page. Give them a networked computer and clear the history, then give them a couple of web pages to be built over the space of n minutes. Tell them to document what they decide to do and what resources they'll be using and just let them get on with it. After a while check their references and look at the outcome. The user will never be able to perform their best work in such a short time but you'll be able to see how efficient they are by the quality of their work.
Once this is done, give them a broken web page and give them a small amount of time to fix it to the point of it being standards-compliant. This should be an easy task to perform for most given good use of their tools.
It's obviously not an exact science, but a range of these methods have always found suitable candidates for many companies and it seems that a lot of Web Design places rarely ask questions nowadays and will move onto simple practical exercises to ensure that the interviewee can do what is asked of them.
What do you see as the main differences between html and xhtml?
Are there benefits to using one over the other?
Technical
Ask the person to make a simple page with a header, a two column layout, and a footer with each column having a different background color extending to the footer. Get them to flip the columns around on completion.
A couple of questions that are tricky.
How do absolutes affect the flow?
How do floats affect the flow?
(they don't)
What are two practical difference between a relative and static?
Determine their interest in CSS and HTML with 'What is the semantic web and why is it important?' People should be able to speak with enthusiasm about bring information to the blind for example. People who really work in HTML and CSS and know their stuff tend to be quite passionate about how information is there for all.
IMO, Cross browser issues are becoming less important now as more people are using modern browsers that obey standards.
Ask about their interest in design. A good sense of design concepts tends to be important when working in a team - a programmer with a sense of design can communicate why such a design may not work well within a website and can explain better some of the limitations.
Ask: what do you think of flash :-)
Below are 40 questions you can ask a person specifically from HTML 5 perspective.
http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe
What is the relationship between SGML,HTML , XML and HTML ?
In HTML 5 we do not need DTD why?
If I do not put will HTML 5 work?
Which browsers support HTML 5?
How is the page structure of HTML 5 different from HTML 4 or previous HTML?
What is datalist in HTML 5 ?
What are the different new form element types in HTML 5?
What is output element in HTML 5?
What is SVG?
Can we see a simple example of SVG using HTML 5?
What is canvas in HTML 5?
So how can we draw a simple line on Canvas?
What is the difference between Canvas and SVG graphics?
How to draw rectangle using Canvas and SVG using HTML 5 ?
What are selectors in CSS?
How can you apply CSS style using ID value?
What is the use of column layout in CSS?
Can you explain CSS box model?
Can you explain some text effects in CSS 3?
What are web workers and why do we need them ?
What are the restrictions of Web Worker thread ?
So how do we create a worker thread in JavaScript?
How to terminate a web worker
Why do we need HTML 5 server-sent events?
What is local storage concept in HTML 5?
How can we add and remove data from local storage?
What is the lifetime of local storage?
What is the difference between local storage and cookies?
What is session storage and how can you create one?
What is difference between session storage and local storage?
What is WebSQL?
Is WebSQL a part of HTML 5 specification?
So how can we use WebSQL ?
What is application cache in HTML5?
So how do we implement application cache in HTML 5 ?
So how do we refresh the application cache of the browser?
What is fallback in Application cache?
What is network in application cache ?
What are different ways to apply styles to a Web page?
What is grouping in CSS?
What is the Contextual Selector?
What are the limitations in the use of CSS?
like the above there are 50+ awesome questions that are available here through
which any CSS related interview can get cracked. Top CSS interview
questions and answers
This also help to clear the concept of CSS.
Some good questions to ask are:
Describe how to set opacity.
What is the box model in CSS?
How do you add a CSS to a HTML?
Describe the difference between a class and an element.
What is the Doctype for?
Odd no one mentioned this yet...
Since the person claims to have two years of experience, they should have something to show for it - so ask to see recent works. Even if some of their work was internal or protected by NDA or such, if they are any good, they ought to have something they've done just to try out new things or such.
I believe real examples would be the best gauge for actual skill in this case. People can easily learn various details about HTML and CSS, but being able to apply them is a totally different matter. It should also demonstrate their ability to write cross-browser compatible code (Just open their examples in IE, FF, Opera, Safari/Chrome)
Do you know how to clear floats?
Write a simple nested list.
Ask them to make a simple layout (header, 2 col, footer) and include table data. See if they go div crazy, table crazy, or stick to what's correct.
What's the difference between a class and an element?
When they make a layout, look closely at what they name their classes. If they are layout-specific ("left-column", "bottom-section", "red-box") and not structure-specific ("column", "header", "footer", "navigation"), they're doing it wrong.
If the answer to 1. is "by using clearing divs", hit them across the face with a bat before you send them out the door.
The fancy button question seen here is the best question I've seen. It covers a range of topics without making it a written test. It's much more valuable to have them implement something like this on a whiteboard or paper to avoid getting bogged down in MDN-searchable details. Even if they don't come up with a perfect solution, you will find out how intelligently they can speak on a range of topics.
Remember, you want someone who can think and come up with creative and effective solutions. Not someone who has memorized the MDN.
About HTML5 and its features .
method of adding CSS to HTML.
New Features of CSS3.
Browser Compatibility of CSS3.
Different type of selector in CSS.
Different between class and id selector .
Different type of measuring unit in CSS
HTML5 form and different type of input type option.
HTML check box,select,radio ,button tags and its use.
Styling the simple page
I'm looking for best-practices for designing a site that with accessibility in mind. The site is going to have a lot of older and less-abled individuals visiting it, and I want to make it as friendly for them as possible. Is there a resource that describes all the right tags, and attributes to use?
There are many many resources depending on your goals.
Strongly suggest you start with:
Section 508 (US legislation, obviously US centric though)
W3C's Web Accessibility Initiative and Web Content Accessibility Guidelines
edit:
Forgot to mention that WCAG has come in for some considerable criticism which makes this guy's efforts very helpful.
Also wanted to add, from personal experience, to remember that WA doesn't mean "blind people with screen readers". There are all manner of access limitations which you have to think of as well: e.g. dexterity issues related to e.g. muscle control, unusual input devices, and simple screen magnification.
Good luck!
Here's a quick list I tend to follow
Ensure it uses clean XHTML markup ideally to AAA standards,
Try where possible to spilt HTML, CSS, Javascript into respective files,
Create different style sheets for print, screen, etc.,
Ensure you take into consideration colours and fonts for the hard of sight and colour blindness,
Try to only place the main navigation at the top of the code so that the actual content appears near the top of the code, this way people do not have to scroll to far to see the content especially if they are using a screen reader / low res,
If you do have a lot of navigation before the content then place a link near the top allowing users to skip to the content,
Ensure the very first link on the page is to a text-only / low graphics version of the site,
Ensure ALL pages and all Essential functionality will work without JavaScript turned on,
There are lots of plugins for firefox to assist with development including:
Web Developer
No Script
HTML Validator
Firebug
Ensure the page renders across all browsers including old ones even if that means it works though does not match design exactly.
Ensure HTML, CSS, JavaScript is kept to the minimum file size to aid downloading times e.g. Remove white space and blank lines,
Always use LABELS in forms and alt, title tags in links and images,
Only use Tables for tabular data and ensure data appropriately labelled,
Where possible do not use JavaScript to write content to a page but use CSS to hide it, that way is JavaScript is disabled or does not work properly then content will still appear,
Always ensure you use onkeypress as well as onclick events in JavaScript encase the user can not / is not using a mouse.
Finally if you have to use blank images on a page for tracking etc. then don't give them Alt tags. This is my own view and is one which is hotly debated on-line especially when 1x1px images used to be used for spacing. However as far as I see it, if you are using a screen reader then you don't what it reading out stupid comments for images it does not need to see.
Try looking at Wikipedia's article on Web Accessibility. It contains lots of links to various sources of information for different countries, which may be useful depending on your target audience. The W3C was one of the original standards, but has plenty of critics.
Among other things.. provide "alt" and "title" attributes for every "img" tag.
Get a text-only browser like lynx. If your site works in lynx, it's likely to work for people who need screen readers or have other handicaps. It's no substitute for looking up the regulations, but it's a quick and easy check.
For another perspective, see the Dutch Government Web Guidelines.
The government provides a standard called section 508 that lays out what makes a site compatible.
A good resource is found at W3C site: Web Content Accessibility Guidelines.
A few things to keep in mind:
have a CSS link on each page that easily allows the font size to be changed.
Visually try to have appropriate presentation that is easy to read in a backwards S fashion.. left to right, back down.. etc..
ensuring that all the alt tags, etc, as mentioned in the other responses is vital.
see if there are some disability websites out there that specialize in testing your site. no harm in seeing what they list as being important to do.
make sure things are easy to read and find. this alone will make the job much easier.
There are many many resources on this topic. In fact, the danger is of information overload, rather than not enough information.
But an alternative approach is to think about your HTML page in generic terms, rather than the visual output you see in the web browser. If you wrote a piece of software that interpreted the website what would be helpful? This is a round-about way of saying use good semantics. My top tips would be to use standard XHTML for content and CSS for design. Also look up topics such as "progressive enhancement" and "behavioral Javascript".
But for resources:
The W3C's Web Accessibility Initiative: www.w3.org/wai
www.WebAIM.org
www.Accessify.com
www.CSSZenGarden.com for inspiration on how semantic markup can be styled to look very different.
It hasn't been mentioned yet so I figure I would mention it. If you want blind users to be able to use your site avoid flash. At the most 1% of flash I find on the internet is accessible.
A good list of resources about accessibility (colourblind screen-reader,typography etc) is here in design way.
For validation of web site and general documentation I use the W3C.
If you're developing in asp.net the opensource NAAK tool might be useful.
A must read is Jeffery Zeldman's "Designing with Web Standards"
Not sure if you are using Dreamweaver, but he has also just realeased a toolkit to validate your site for accessiblity.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Hey. We're building a large ASP.NET website, and have hired an external firm to do the design (CSS + protoype pages). In fitting the design to the page, we've found a number of problems that indicate ASP.NET's workings were never considered. My question is - Is there a common standard (that should be) used by design firms creating what will become an ASP.NET site?
We've found things like:
Using IDs on HTML elements for
CSS/JS to find, which doesn't work
with server tags generating IDs.
IDs with hyphens in them
ValidatorSummary example built in a completely different style to ASP.NET's.
Assumptions that all buttons will be <input> tags
Margin styles on <div>s, interfering with our use of panels
The first instance is a problem. The rest are inconvient misunderstandings. As usual, there are intense time constraints, so in this sea of 'we'll fix it / get our designer to look at it / work around it', I'm largely hoping there's some fundamental building block that would have stopped most of these problems from happening.
The design firm is large, with a substantial body of large-site work behind them, so sadly the 'don't hire a one man shop' wisdom isn't the ticket in this case...
[Update]
If you're in the position of hiring an external web design firm, and have the luxury of early collaboration and wish to help bridge the gap of meeting ASP.NET's requirements, here's our current list of guidelines. Please comment below if you feel there's something that should be added:
Please encapsulate each the page in a <form> tag (ie.
place it directly after the
<body> tag), and use no other <form> tags on the page
To
display a summary of page validation
errors, please cater to rendering
the following format example:
<div class="error_class">
<h3>Please review the following fields</h3>
<ul>
<li>Home phone number</li>
<li>Surname</li>
</ul>
</div>
Please avoid driving styles off the ID or name property.
If there are HTML components that need to be turned on and off, these components should be encapsulated in a <div> element, so that the div's visibility can be set to 'false'.
If styling buttons, please cater to both <input> tags and <a ... class="example_class"> <span>Button text</span>` formats.
Avoid setting attributes on class-less <div> and <span> tags.
Thank you for bearing with us.
Most design firms I have worked with required some hand holding on what they can and cannot do with regards to designing for an ASP.Net app. You hit all the big ones, the ID thing being the biggest issue.
In terms of building blocks, collaboration early and often did the trick for us. Once we established how we needed the design to be implemented to work easily within an ASP.Net context, things went smooth. Of course, the better the designer on the other end, the easier its going to be.
I am not one for having developers chop up PSD files. With the right designer or firm, you should be able to save time and money and get it done right from the outset. Most developers I know can tweak and extend css and markup, but are much less efficient when starting from a PSD, or from scratch.
HTH.
Any time I've worked with design firms building asp.net pages I've always just had them design what it should look like. Nothing to do with the markup or css. This leaves a lot of work to be done by the developers, but avoids all the mistakes you just mentioned. I've always had designers deliver a PSD file and chopped it up myself.
If this doesn't suit your needs you can always try ASP.NET MVC. It gives you a lot more control over the markup you put on the page.
In general, people who make their living as designers do not know ASP.Net well enough to avoid it's, ahem, quirks. It's not reasonable to expect them to produce HTML and CSS which take ASP.Net's rules into consideration. The standards are actually on the designers side in this one.
For future integration, you may want to go with a firm that has their own .Net devs who work with their designers or, if you have the option of .Net 3.5, you could work with a design shop that has MS Expressions Web at their disposal.
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.