블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

Web 2008 통계

Publisher/WEB2.0 / 2009. 1. 12. 11:05


오늘자(2009/01/09) Ajaxian 포스트중에 2008년 Web에 대한 통계에 대한것을 정리하다.

John Allsopp씨는  extensive state of the web 2008 survey에서 전세계, 다양한 분야의  1,200명의 웹전문가를 대상으로 사용하는 브라우저,OS, 웹사이트 개발시 사용한 기술들에 대해서 정리하였다.

해당 포스트를 보면, 국내사용자를 대상으로 한 설문조사가 아니라서 국내환경과는 조금은 맞지 않는 부분이 있긴 하지만 대부분이 인식하고 있는 부분이라 결과에 대해서는 어느정도 공감하고 있으리라 생각한다.
예상했던 대로 2008년 한해는 UI기술에 대해서 획기적으로 많은 변화와 웹의 미래를 엿볼수 있는 한해가 아니였나 싶다.

비윈도우즈 계열이 50%에 육박했으며 윈도우즈XP는 여전히 무거운 Vista보다 단지 1/4 의 유저많이 사용하고 있었다.
단지 기본브라우저로 IE를 사용하고 있는 사용자는 극히 드물었으며, Firefox가 50%의 시장점유율을 보였으며, Safari3 이 21%, 크롬은 단지 4%의 시장점유율을 보였다.   

웹개발 기술로써는 응답자의 3%는 전혀 웹유효성검증을 하지 않았으며 70%가 항상 유효성 검증을 하고 있었으며 10%의 응답자만이 table로 layout을 그리고 있었으며 90%가 CSS Style을 이용하여 페이지를 그리고 있었다.
자바스크립트 라이브러리에서는 JQuery가 60%로 압도적으로 우세하였다.

플러그인 기술로는 Flash가 60%를 Silverlight가 2%, 애플의 QuickTime이 놀랍게도 20%를 차지하고 있었다. 
개발기술로는 PHP가 63%, Javascript가 55% ASP.NET이 17%, Pythondl 15%, Ruby가 14%로 그 뒤를 잇고 있다.

모바일웹의 도래
기본 레거시 브라우저에 다른 브라우저를 고려한다면 어떤 브라우저를 고려하는가에 대한 응답에 대해서 20%가 모바일에 대해서 고려하고 있었다. 전통적인 래탑이나 데스탑에서 모바일로서 웹이 이동해 가고 있다는 뜻은 아닐까?


설문대상자
응답자중 33%가 디자이너, 거의 반인 48.5%가 개발자이며 그외 18%로 북아메리카, 유럽, 호주,뉴질랜드쪽 응답자가 많았다.



브라우저 및 OS


웹개발시 사용하는 테스트 브라우저
 


마크업기술

사용하는 마크업



마크업의 경우 얼마나 자주 유효성 검증을 하는가?
 

사용하는 DOCTYPE은?


테이블로 레이아웃을 그리는가?

사용하는 속성이 있는 태그는?

사용하고 있는 MicroFormat(RDFa)은?



CSS기술

웹디자인 철학

크로스브라우징

사이트 디자인시 Qurksmode로 사용하는지?

CSS를 사용하는 목적


CSS사용시 자주 사용하는 선택자 및 CSS3중 사용하는것은?

웹폰트를 사용하는지? 사용하면 어떤식으로 사용하는지?

SVG는 사용하는지? CANVAS태그를 사용하는지?

사이트개발시 노트북이나 PC이외의 장치에 대해서는 고려하는지?
이외 장치에 대해 고려하는 응답자중 15%정도가 mobile, 10%가 iPhone(역시 대세인가?) 1%가 Blackberry 5명이 Wii 에 대해서 고려한다고 응답하였다.



Javascript, Ajax, DOM에 대해서

개발시 자바스크립트를 사용하는 목적
응답자중 5%를 제외한 모든 응답자가 자바스크립트를 사용하였다. (나머지 5%는 뭐지??)

Javascript Coding Practices (무간섭 스크립트를 사용하는가?)
마크업과 자바스크립트를 분리하여 사용하는가에 대한 질문 (Unobtrusive Javascript)

W3C DOM 을 엄격히 고수하는가?


Javascript Library and Framwork

사용하는 자바스크립트 라이브러리나 프레임웍은?

Flash, Silverlight, 다른 embedded content

브라우저 플러그인을 사용하여 웹사이트를 구성하는가? 구성한다면 어떤 종류를 많이 사용하는가? 어떠한 목적으로 사용하나?


Back-end 개발언어 및 시스템

서버하드웨어를 구동하는 환경?


사용하는 웹서버는?

서버의 OS는?

많이 사용하는 데이타베이스는?


사용하는 언어는?


사용하는 서버프레임웍은?















아래는 각각의 통계자료에 바탕하여 패키지화한 페이지들이다 시간있을때 한번씩 둘러보는것도 좋을것 같다.


Javascript

  • jQueryDownload | Site | Docs | Plugins
    My favorite Javascript framework with a small footprint at 20k.
  • SWFObject 2.1 Download | Site
    Defacto script for embedding Flash content.
  • OffspringDownload | Site
    Automatically applies .first-child, .last-child, .only-child classes to DOM elements.
  • Dean Edwards IE7 ScriptDownload | Site
    Library makes IE5/6 behave like IE7.
  • NicEditDownload | Site
    Turns any textarea into a WYSIWYG editor.
  • Reflection 2.0Download | Site
    Adds a wet-floor effect to any image.

jQuery Essential Widgets

jQuery Specialized Widgets

  • Custom Checkboxes 1.1.0b2Download | Site
    Easily replace checkboxes and radios with custom graphics.
  • markItUp! 1.1.5Download | Site
    Turns textarea tag into a markup editor with various syntaxes.
  • jEditable 1.5.1Download | Site
    Makes any element a click-to-edit, Ajaxified item.
  • Date Picker 2.1.2Download | Site
    Creates a popup date picker to easily fill in forms.
  • Table Sorter 2.0.3Download | Site
  • Ingrid Datagrids 0.9.1Download | Site
  • Star RatingDownload | Site
    Creates a star rating interface based on a simple form.
  • jMedia 1.01Download | Site
    Flexible multi-media embedding. Supports: Flash, QT, Real, +.
  • BlockUI 2.14Download | Site
    Prevents activity with the window or elements when using AJAX.
  • jCarousel 0.2.3Download | Site
    Scroll items in horizontal or vertical order with controls.
  • Farbtastic 1.2 Color PickerDownload | Site
    HSL color picker widget.

jQuery “Extensions”

  • jQuery MetadataDownload
    Embed metadata in HTML tags. See code for examples.
  • jQuery Easing 1.3Download | Site
    jQuery library for advanced sliding-type animations.
  • Bgiframe 2.1.1Download | Site
    Used when you show elements over a select control in IE6.More Selectors 1.1.3.1Download | Site
    Adds a plethora of interesting selector options.

PHP/MySQL

  • CodeIgniter 1.7.0Download | Site | Docs | Forums
    Easy, documented framework by the devs of ExpressionEngine.
  • pChart 1.2.7Download | Site | Docs
    PHP classes to render high-quality charts.
  • mySQLDumperDownload | Site
    Quality backup solution for large mySQL databases.
  • PHP Development GuidelinesSite
    Best practices for PHP development from the EE guys.
  • PHPMailer 2.3Download | Site | Tutorial
    Send email with attachments, HTML and embedded images.
  • TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
    Builds and downloads zip+ files on the fly.
  • ROS PDF ClassDownload | Site
    Module-free creation of PDF documents from within PHP.

Flash Components

  • Open Source FLV PlayerDownload | Site | Docs
    "OS FLV" - Open source, embedable player for Flash video.
  • JW FLV Player 3.12€30 | Download | Site
    SWF file that displays FLV videos. Free for personal use.
  • SlideShowPro$29 | Site | Wiki
    Gallery and slideshow Flash component. 60 options.
  • MonoSlideShow$19.95 | Site | Manual
    Gallery and slideshow SWF file. 150 options.
  • XSPF Flash MP3 Music Player (Slim)Download | Site
    SWF file that plays mp3 songs and playlists.
  • Date Slider 1.1Download | Site
    SWF file that selects a date range.
  • amChartsFree/€85/€275 | Site
    Customizable Flash charts. Free version embeds link to vendor.
  • TWF Flash Uploader€15/€50 | Site
    Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools

  • Standalone IE6Download | Site
    Download a standalone version of IE6 you can install in XP.
  • Allan Jardine's "Design" BookmarkletSite
    Four overlay tools: Grid, Ruler/Guides, Measurement, Crosshair.
  • XRAY BookmarkletSite
    Select any page element and display its style info.
  • SpriteNavi Menu Tool for FireworksSite
    Takes the work out of creating sprite-based horizontal menus.
  • Create Favicons in PhotoshopMac Plugin | Win Plugin
    Install this PS plugin to add ability to save in .ico format.
  • Javascript Email Enkoder (Spam protection)Site
    Protect email addresses by converting into encrypted JavaScript.

Grid Design

  • 960 Grid SystemDownload | Site
    CSS grid system based on 960px wide design in 2 col widths.
    12 column - 60px wide columns, 20px gutters.
    16 column - 40px wide columns, 10px gutters.
  • Blueprint CSS 0.8Download | Site
    Stylesheet set that combines some of the best thinking on css design. Grids, typography, reset included.
  • GridMaker2 for Photshop CS2+Download | Site
    Photoshop script that creates custom grids.
  • GridMaker2 (columns only)Download
    A modified version that only outputs columns.
  • Grid DesignerSite
    Online tool to design and preview a grid system. This one also includes side margins.
  • Grid CalculatorSite
    Online tool to design and preview a grid system.
  • Syncotype BookmarkletSite
    Overlays a customizable baseline grid on your web page.

Content Generators

  • Ajax Loading GraphicsSite
    Online tool to customize an animated loading graphic.
  • Loader GeneratorSite
    Another tool to customize one of 99 different loading graphics.
  • Stripe GeneratorSite
    Online tool to customize background stripe tiles.
    Also see Stripe Mania.
  • Background Maker (Tiled Backgrounds)Site
    Online tool to make pixel-by-pixel tiled backgrounds.
  • CornerShopSite
    Online tool to generate rounded corner graphics and code.
  • Dummy Text GeneratorSite
    Best tool for generating dummy content. Highly configurable.
  • LipsumSite | Copyable Text
    Generic lorem ipsum copy for roughing in content.
    Also see Lorem2.com and html-ipsum.com

Pixel Icons

Vector Icons

  • ClickBits$49 | Site
    792 arrows & web-related icons in OpenType font format.
  • InfoBits$29 | Site
    188 web-related icons & dingbats in OpenType font format.
  • 165 Vector Icons by GoSquaredSite | Preview
    Free, useful icons in SVG, JPG and Illustrator CS2 format.

Backgrounds & Styles

  • Illustrator - Basic Gradients by GoSquaredSite
    Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
  • Illustrator - Web 2.0 Gradients by dezinerfolioSite
    130 Illustrator gradients. Matches PS gradients below.
  • Photoshop - Web 2.0 Gradients by dezinerfolioSite
    130 Photoshop gradients.
  • Photoshop - Web 2.0 Layer StylesSite
    131 Photoshop layer styles by deszinerfolio.com.
  • Photoshop - Web 2.0 Gradients by EuphorishSite
    70 Photoshop gradients.

Hosting

  • ServInt - My Current Host of Choice$49 | Site
    Well-regarded Virtual Private Server solution starting at $49. This site is hosted there. Better experience for me than MediaTemple. Cheaper than Mosso.
  • BlueHost - Decent low-cost host$6.95 | Site
    Hosting many sites here. Solid host for small to medium traffic. Great customer support and uptime. Unlimited domains.

Browser Compatibility

  • PNG Support in IEDownload | Site | Code
    Enable transparent PNG support in IE.
  • PNG Support in IE (CSS Only)Site | Code
    Enable transparent PNG support in IE6 using only CSS.
  • Whatever:hover in IEDownload | Site | Code
    Enables css :hover support in IE.
  • IE Browser Filtering/TargetingSite | Code
    Some hacks to target different browsers.
  • Misc Browser WorkaroundsCode
    Click the code link to see some collected browser workarounds.

Must-Know CSS Techniques

  • Sliding DoorsSite
    Not just for tabs, this technique is by far the most useful of all.
  • Taming ListsSite
    Transform the meager list into something useful.
  • CSS ResetSite
    Several variations exist here. Resetting all the styles to a baseline helps a lot in styling websites. Season to taste.
    Yahoo YUI Reset | Eric Meyer's Reset
  • Clearing Floats without Extra MarkupSite | Code
    Avoid adding extra markup to your documents using this method to clear floats.

General HTML Techniques

  • Resize a Popup to Fit an Image's SizeSite | Code
    Make a popup window resize perfectly to the image.

Typography

  • FontSquirrel - High Quality FREE FontsSite
    Free, hand-picked, licensed-for-commercial-use fonts.
  • Typical Cross-Browser Font CascadesSite | Sample
    Use these fonts lists when specifiying fonts in your css.
  • Alternative Font CascadesSample
    Interesting alternative cascades.
  • Default Mac FontsSite | Show
  • Default Windows FontsSite | Show

Firefox Extensions

  • Firebug 1.3Install | Site
    Edit, debug, and monitor CSS, HTML, and JavaScript live.
  • Web Developer's ToolbarInstall | Site
    Adds a menu and a toolbar with various developer tools.
  • View Formatted SourceInstall | Site
    Displays formatted source and CSS info for each element.
  • YSlowInstall | Site
    Analyzes pages and tells why they're slow. REQUIRES FIREBUG.
  • Dust-Me Selectors 2.11Install | Site
    Dust-Me Selectors finds unused CSS selectors in your site.
  • UrlParamsInstall | Site
    Displays the GET and POST parameters of a web page.
  • Link CheckerInstall | Site
    Checks all links on a webpage and reports broken ones.

Mac Software

  • MAMP 1.7.2Download | Site
    Installs a self-contained local hosting environment on your Mac. (M)ac, (A)pache, (M)ySQL, (P)HP.
  • VirtualHostX 1.1.1$9 | Download | Site | Tutorial
    Host multiple sites on your Mac. Useful with MAMP.
  • CSSEdit 2.6€29.95 | Download | Site
    The best CSS editor on the market. An absolute must-have.
  • TextMate 1.5.7€39 | Download | Site
    The best text editor ever.
  • Coda 1.6$99 | Download | Site
    Popular all-in-one web development application.

Services

  • DNSstuffSite
    Configure, monitor & fix problems with your domain & email.
  • Bulk Email with Campaign MonitorSite
    Campaign Monitor is an email newsletter sending service geared towards designers. $5 + 1¢ per address per mailing.
  • Domain Names by PickyDomains$50 | Site
    PickyDomains will help you come up with a good/available domain name for only $50.
  • Bust A Name Domain SearchSite
    Two-word combination searches and quick lookups.
  • NameBoy Domain SearchSite
    Good name suggestor tool.
  • Add This Social Bookmarking WidgetSite
    Widget helps visitors bookmark your page on social media sites.
  • ShareThis Social Bookmarking WidgetSite
    Another widget to help visitors bookmark your page on social media sites.
  • Web Development Project EstimatorSite
    Estimate the time and materials required for a proposed web project.
  • SSLmatic - Cheap SSL Certificates$19.99 | Site
    Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

Cheat Sheets

'Publisher > WEB2.0' 카테고리의 다른 글

IE8 웹조각(Web Slice) 만들기  (5) 2009.11.02
웹표준 UI/UX 그리고 프리젠테이션  (0) 2009.04.15
구글크롬 테스트 및 브라우저버전체크 스크립트  (6) 2008.09.03
IE,Opera,Safari에서도 Firebug를 쓰자  (2) 2008.07.30
사용자에게 브라우저 업데이트 권장하기(Push up)  (2) 2008.07.30
Post by 넥스트리소프트 데꾸벅(techbug)
, |

티스토리툴바