Victory Road

Victory Road (http://www.victoryroad.net/index.php)
-   Technology (http://www.victoryroad.net/forumdisplay.php?f=112)
-   -   The thread of resources for web design (http://www.victoryroad.net/showthread.php?t=9735)

Twiggy February 8, 2012 03:35:14 AM

The thread of resources for web design
 
The thread of resources for web design


Quick Reference Tables

* Media Foundation components can be utilized directly by Internet Explorer 9+ to make use of formats it doesn't understand natively without involving browser plugins. Everything is still handled by the browser, so all functions are as normal.
* Extensions on the other hand intercept requests for such media sources. It might be played using the extension's own player.

CSS3 Support (latest)IEFirefoxChromeOperaSafari
AnimationsBeta, experimentalExperimentalExperimentalExperimentalExperimental
Border ImageNoExperimentalExperimentalExperimentalExperimental
Border RadiusYesYesYesYesYes
Border Radius /w dashedYesBrokenBuggyBuggyBuggy
Border Radius /w dottedYesBrokenBuggyYesBuggy
Box ShadowsYesYesYesYesYes
Box SizingYesBuggy, experimentalYesYesYes
GradientsBeta, experimentalExperimentalExperimentalExperimentalExperimental
Media QueriesYesYesYesYesYes
OpacityYesYesYesYesYes
Text ShadowsBetaYesYesYesYes
Transforms (2D)ExperimentalExperimentalExperimentalExperimentalExperimental
Transforms (3D)Beta, experimentalExperimentalExperimentalExperimentalExperimental
@font-faceWOFFWOFFWOFFWOFFWOFF

HTML5 Video Support (latest)IEFirefoxChromeOperaSafari
H.264IncludedExtensionIncluded, at riskDependsIncluded
WebMMF InstallIncludedIncludedIncludedDepends
Ogg TheoraExtensionIncludedIncludedIncludedDepends
*A Media Foundation component is available to Windows users to enable WebM video and audio playback in everything using it, including Windows Media Player, Internet Explorer 9+, and more.
*An extension is available for Firefox users running Windows 7 to enable H.264 video playback.
*A future version of Chrome may drop support for H.264 video; an extension is available to permanently enable playback even if support is dropped.
*Safari depends on the QuickTime library for media playback on desktop systems. It only supports H.264 in iOS.
*Opera on Linux systems may support H.264 and MPEG-4 video, as well as MP3 and M4A audio, if the GStreamer version installed supports them.
*Opera Mobile on Android systems supports H.264 and MPEG-4 video, as well as MP3 and M4A audio, unlike its desktop counterpart.

HTML5 Audio Support (latest)IEFirefoxChromeOperaSafari
MP3IncludedNoIncludedDependsIncluded
AAC (M4A)IncludedNoIncludedDependsIncluded
WAVNoIncludedIncludedDependsIncluded
Ogg VorbisVideo only /w WebM MF Components;Full /w ExtensionIncludedIncludedIncludedDepends
WebMMF InstallIncludedIncludedIncludedDepends
*A Media Foundation component is available to Windows users to enable WebM video and audio playback in everything using it, including Windows Media Player, Internet Explorer 9+, and more.
*Safari depends on the QuickTime library for media playback on desktop systems.
*Opera on Linux systems may support H.264 and MPEG-4 video, as well as MP3 and M4A audio, if the GStreamer version installed supports them.
*Opera Mobile on Android systems supports H.264 and MPEG-4 video, as well as MP3 and M4A audio, unlike its desktop counterpart.

Validators

W3C Markup Validator
This validator checks your HTML and determines whether the markup is valid.

W3C CSS Validator
This validator checks your CSS and determines whether the CSS is valid. Note that it will not work well with vendor prefixes!


Browsers

Apple Safari
The de facto browser for Macintosh systems, and also the browser of iOS platforms. Has good standards support, but performance is abysmal compared to all other browsers.

Google Chrome
Boasts the most support for standards, including incomplete/draft standards, and also rocks a blazing-fast V8 scripting engine that wins in just about any scripting benchmark aside from one. However, lacks any hardware acceleration except in WebGL, and renders slowly, in a lower quality.

Mozilla Firefox
The "alternative" free, open-source browser of choice for many people that wish to switch browsers. Has an extremely healthy add-on ecosystem, known as extensions. Has good performance and graphical acceleration. Memory leaks are an issue to watch out for.

Opera
A web browser designed with high performance and accessibility in mind. UI can be a bit clunky, though.

Windows Internet Explorer
Prioritizes integration with the Windows operating system, as well as being a graphical speed demon - if it can render it (properly). Still the record-holder of the SunSpider JS test after almost 11 months without significant engine upgrades for some reason.

One should, under ideal circumstances, test pages in all browsers to best determine compatibility. If that is not possible, any one of them plus Internet Explorer 8/9 will do.


Tools

Microsoft Visual Web Developer Express 2010
A suite that consists of a framework, web server, database, and tools you need to build and run websites and applications on the Microsoft Web Platform. The best thing is its price tag: $0.00.

Firebug/Firebug Lite
An extremely powerful set of developer tools that allow live editing of HTML, CSS, and other stuff - and see them in real time. Firebug is for Firefox; Firebug Lite works on any browser, but has a limited subset of features. You should use Firebug Lite in conjunction with your browser's developer tools.

Opera Mobile Emulator
Emulates Opera Mobile on your computer, so you can see firsthand how your site looks in a standards-compliant mobile browser. Has lots of target device customization.

html5shim
Enables the styling of new HTML5 semantic elements in older versions of Internet Explorer.

Progressive Internet Explorer
Allows you to (mostly) use many of the standardized graphical CSS3 properties in Internet Explorer, especially older versions (older than 9).

Fiddler2
A powerful tool for web debugging, and it has the ability to intercept requests and substitute them with your own designated files. Works in Windows only, but due to the way it works, it can be used to debug web traffic for any application.

Build My Pinned Site
An automated tool to create Pinned Site metadata/JavaScript for your web site, usable in IE9+.

Browser Shots
An online tool that does the browser screenshots for you, from a lot of browsers, new and old, even these not installable on your operating system. Just point it to a page, and it'll do its work after some time!

Font Squirrel
An online resource of web fonts. It has a large collection of web fonts.

Google Web Fonts
Another online resource containing at least hundreds of free, open-source web fonts.

Google Anayltics
An useful script to be inserted in your pages so that you can analyze who's going to your site, their browsers, and more.

CSSPrefixer
Prefixes all your unprefixed CSS automatically to save you hassle from adding them manually.

Resources

Mozilla Developer Network
A one-stop resource for HTML, CSS, Javascript, SVG and more. This is also what I use these days as a reference for web design. This is also a wiki - anyone can edit it to help improve it. It also details quirks that certain browsers have.

SitePoint CSS Reference
Mostly consists of CSS2.1 stuff. Many parts hasn't been updated, but most of the examples still hold.

HTML5 Please
Details what HTML5, CSS3 and other new and shiny features that you can use right away without worrying too much. Simple to use, albeit a bit simplistic.

When Can I Use
When Can I Use lists browser support for various functions, HTML5, CSS3 and so on, in ridiculous detail, and goes really far back when it comes to browser versions.

CSS3 Click Chart
An easy-to-use usability checker for CSS3. It does show example code and workarounds.

Codecademy
A video game-like approach to learning various coding languages, including JavaScript.


Blogs

The Mozilla Blog
The Mozilla Blog. Updated quite frequently and details new web standards and other neat Firefox features.

IEBlog
The Internet Explorer Team's blog. It usually details things after things are almost bullet-proofed, and provides a lot of examples and details on things that Internet Explorer supports, as well as comparisons to other browsers.

EricLaw's IEInternals
Eric Lawrence details the internals of Internet Explorer, and also best practices on web pages and servers.

Dev.Opera
Tips and tricks about developing for the web, and throws in some interesting usages.

User Agent Man
Contains a lot of entries on getting things to work cross-browser, especially Internet Explorer.

Webmonkey
Another web dev/design blog that often details a lot of news about the newest advances in web development, web standards and more.

Cat333Pokémon February 8, 2012 11:09:00 AM

Ooh, that's a very nice set of resources. I'll be sure to check them out for my website design/testing.

Twiggy February 10, 2012 04:17:20 AM

Whew. I think adding quick reference tables for the more important stuff might do some good.


All times are GMT -8.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
Victory Road ©2006 - 2024, Scott Cat333Pokémon Cheney