2011-04-19 7 views
54

모두 안녕 — HTML5 BoilerplateHTML5 Reset은 최신 모범 사례가 많이 내장 된 두 가지 HTML, CSS 및 JavaScript 템플릿입니다. 그들의 목표는 크게 동일합니다HTML5 상용구 대 HTML5 재설정

  • 빠르고, 강력하고, 현대적인 웹 개발
  • HTML5 (! 대만족) (IE6 및 모바일 브라우저에 대한 지원을 포함)
  • 크로스 브라우저 정상화
  • 점진적 개선 및 분해 우아한
  • 성능 최적화
  • 아니 프레임 워크, 그러나 당신의 다음 프로젝트의 시작점

분명히 기능면에서 매우 유사합니다. 어떤 방법으로 구현이 다른가요? (예를 들어 IE 별 CSS 수정은 다른 기술을 사용하여 수행 할 수 있습니다)? 그들은 모두 다른 범위에 있습니까? HTML5 상용구는 도구 (서버 도구, 빌드 도구 등)를 조금 더 크게 만드는 것처럼 보이지만 사람들이 볼 수있는 실제 사이트와 관련하여 HTML5 재설정을 넘어서는 위치를 아는 것은 어렵습니다.

답변

47

일반적으로 두 프로젝트는 웹 프로젝트에서 작업하는 개발자에게 확실한 출발점을 제시합니다. 그들은 둘 다 많은 개발자들이 각 프로젝트마다 다시 만들어내는 지루하고, 오류가 발생하기 쉬운 보일러 판을 제거합니다. 그들이 어떻게 움직이는 지에 대한 세부 사항은 약간 다르지만, 대부분 같은 결과를 얻습니다.

HTML5Boilerplate에는 개발자가 모범 사례를 따라 서버 측 항목 (예 : 먼 미래 만료 헤더 등)의 속도를 높이는 데 도움이되는 몇 가지 빌드 스크립트 부분이 추가되었습니다. HTML5Reset 프로젝트는 의미, 내용 및 스타일에보다 중점을 둡니다. 예를 들어, HTML5Reset은 HTML5의 페이지 내용에 대한 더 많은 예제 구조를 가지고 있습니다 (사람들에게 새로운 요소의 사용법을 보여주기 위해). 반면 HTML5Boilerplate는 그렇지 않습니다.

HTML5 보일러 플레이트가 포함하는 응답 시간 및 페이지 속도 부분은 더 많은 사용자가 모바일 플랫폼에서 스스로를 찾음에 따라 점점 더 중요 해지고 Google은 효과가 증가함에 따라 page response times have on page rank이 증가합니다. 페이지 응답 시간이 약간 증가하면 사이트가 used and perceived (especially in an eCommerce setting ... 종종 100ms가 더 느린 페이지는 판매 된 제품의 비율이 더 적어지는 경우가 많음)에 부정적인 영향을 미친다는 많은 논문이 있습니다.

CSS 프런트에서 두 프로젝트의 리셋 스타일 섹션의 대부분은베이스 라인이 설정되는 부분에 약간의 차이가 있지만 매우 동일합니다. 그러나 IE 고유의 수정 사항은 거의 동일하며 HTML5Boilerplate는 IE에서 양식 요소 (예 : 확인란/라디오 버튼 및 유효/무효 상태)와 같은 스타일을 사용하는 방식에 비해 HTML5Reset보다 조금 더 제어한다고 주장합니다.

두 가지 HTML5Boilerplate가 HTML5Reset을 다루는 CSS 영역은 .hidden.visuallyhidden과 같이 사이트를보다 쉽게 ​​이용할 수 있도록 도움을주는 일반적인 도우미 클래스가 아니며 브라우저에서 인쇄가 더 비슷해 지도록하는 인쇄 스타일을 크게 조정합니다. 배경 이미지를 투명하게 (토너를 낭비하지 않기 위해) 만들고, 링크에 실제 URL을 추가하고 약어에 제목을 추가하는 것과 같은 일부 비용 절감 및 접근 가능성으로.

유사점과 그 차이점 (그리고 그 이유)이 매우 유익하고 나에게 도움이 되었기 때문에 두 프로젝트의 정보를 통해 읽고 그들이 나란히 비교하여 일을하는 방법을 강력하게 제안합니다. 각자 내가 사용하기를 원하는 부분을 더 잘 결정하십시오.

궁극적으로 모든 "라이브러리"종류의 프로젝트와 마찬가지로 개발자는 자신이하는 일을 이해하고 프로젝트의 특정 요구를 충족시키기 위해 기준을 조정해야합니다.

+1

페이지 응답 시간과 페이지 순위에서 참조하는 논문에 대한 링크를 제공 할 수 있습니까? –

+0

@s_hewitt - 요청하신대로 인용문이 추가되었습니다. – cdeszaq

+0

좋은 대답, cdeszaq. – Francisc

0

이전 개발자가 회사를 과 Prototype을 사용하여 roped하는 환경에서 작동합니다 ... 그것은 엉망입니다. 호환성 모드에서 벗어나야 할뿐만 아니라 추가로 발생하는 오버 헤드를 고려해야합니다. 디버깅 할 때 Prototype "Firebug"에서 디버그 메시지를 "납치"하면 더 많은 작업을 수행 할 수 있습니다. 그리고 그 끔찍한 부분은 내가이 난장판을 몇 달 동안 풀어 놓고 막 끝나기 시작한 순간입니다 .... 그리고 프로토 타입에 플러그를 꽂으려고 할 때마다 나는 항상 다른 것을 찾는 것처럼 보입니다. 그것에 의존하는 섹션 ...

그것은 비슷한 목적을 가진 프레임 워크의 조합에 대해 매번 논하는 이유입니다. 예를 들어, YUI Grids이 얼마나 멋지더라도 YUI Framework 전체를로드하는 경우 Jquery, Moo 또는 Prototype을 사용하지 않는 것이 가장 좋습니다. 너는 불필요하게 너 자신을 허둥지둥 거릴 것이다. 그것은로드 시간 (어느 wrecks the user experience)을 죽이고 단지 개발자에게 두통과 불필요한 작업을 제공합니다.

재단 구축과 같은 사이트의이 단계를 살펴보십시오. 당신은 당신이 사용하고 싶은 무엇이든 사용할 수있는 기회를 가지지 만 말하기 위해 "구석에 페인트 칠"하지 않도록주의해야합니다. 그러므로 리소스를 기반으로 사용할 수있는 가장 적합한 클래스 도구를 사용하십시오. 귀엽게 뭔가를 사용하지 마십시오! 많은 고품질 도구가 무료라는 점에서 운이 좋으므로 선택의 여지가 있습니다. 그러나 당신이 미래를위한 당신의 위치의 방향을 조종하고 있다는 것을 아십시오. 그리고 당신은 당신의 결정이 급하게 이루어지면 그 결과를 다루어야하는 나 같은 사람 일 것입니다.

그래서 다른 프레임 워크를 절대 사용하지 않을 경우 Reset ... 또는 최고 품질 표준을 준수하는 CSS 만 수행합니다.

+1

JavaScript 프레임 워크에 대한 귀하의 의견에 완전히 동의하지만 여기서 다루는 HTML5 프레임 워크는 주로 마크 업이며 활성 코드가 아니며 거의 대부분이 동일합니다. 특정 CSS는 약간 다르지만 훌륭한 개발자가 등장하는 것처럼 중요한 부분은 맹목적으로 적용하는 대신 사용하려는 것을 이해하는 것입니다. 개발자가 의미 론적 HTML과 CSS를 확실하게 이해하지 못하면 HTML5 프레임 워크 중 어느 것도 프로젝트의 잠재력을 충분히 발휘하지 못합니다. – cdeszaq

+2

마지막 공연에서 jQuery와 Dojo를 사용하는 프로젝트가 하나있었습니다. 나는 처음으로 AJAX를 만지는 것만으로 그 부분을 요약했다. 그런 다음 jQuery와 Ajax.net을 사용하여 코드를 보냈던 매우 비싼 컨설팅 회사를 고용했습니다. 그리고 나서 포기하고 그만 뒀습니다. –

+1

프레임 워크에 관해서는 좋은 조언을하지만 프레임 워크가 아닌이 두 시간 절약 도구에 어떻게 적용되는지 상상하기가 어렵습니다. – JohnC

0
사용할 수

중 하나 ... @murtaugh처럼

은 (http://5by5.tv/bigwebshow/45)는 u는 제 1 리와 함께 시작할 때 아무것도 배울 필요가 없습니다 말했다. 내 경험으로는 R & D 부서에서 일하면서 데모를하거나 빠른 반복 작업을해야 할 때 재설정 (또는 이미 알고있는 경우 보일러)을 사용할 수 있습니다. 배포 할 제품을 만들어야 할 때 더 많은 것들이 있기 때문에 보일러로 전환합니다. 둘 중 하나를 쉽게 사용할 수 있다는 것을 알고 있기 때문에 지금은 작동합니다.

0

나는 실제로 거의 전통적인 reset.css를 사용한다고 말하고 싶습니다. 최고입니다 ... 내 모바일 앱 호환성에 문제가 없음을 발견했습니다. 그러나 jQuery 모바일 프레임 워크를 사용하여 이러한 앱을 개발하고 있습니다.

그래서 나는 당신이 사용하고있는 도구의 종류에 관해서는 정말로 조건부라고 생각합니다. Phonegap은 모든 OS에 내 코드를 컴파일하는 데 문제가있는 것 같지 않습니다. 에뮬레이터에서 내 소스 코드를 보는 것은 완벽하게 멋지게 보입니다 ...

그래서 polyfills를 얻으 려하지 않는 한 정형화 된 부분을 볼 수 없습니다.