웹 개발자 리소스 메가 편집

인터넷은 끊임없이 성장하고 있으며 다가오는 웹 개발자를위한 수십만의 집단적 자원이 있습니다. 온라인 기사, 자습서, 도구, 안내서, 비디오에서 웹을 통해 얻을 수있는 모든 것을 배울 수 있습니다. 정말 온라인으로 뛰어 오르는 것이 더 쉬웠습니다.!

아래에는 매우 유용한 웹 개발자 리소스 모음이 정리되어 있습니다. 여기에는 HTML5 / CSS3의 초보자 용 자료와 JavaScript 및 PHP 프로그래밍에 대한 더 복잡한 이론이 포함됩니다. 몇 명의 열광적 인 개발자가이 언어를 연구하고 Twitter 또는 Tumblr과 비슷한 널리 사용되는 웹 응용 프로그램을 만들 수 있습니다. 현대 웹 개발자를위한 유용한 자산에 관심이 있다면 믿을만한 자료 모음을 좋아할 것입니다..

유용한 온라인 잡지

블로깅 세계는 수십만 명의 새로운 작가들이 인터넷에 접속하면서 폭발적으로 증가했습니다. 이러한 온라인 블로그 중 상당수는 디자인 및 웹 개발에 중점을두고 있습니다. RSS 피드를 넘기면 많은 유용한 리소스를 찾을 수 있습니다..

코드를 작성하는 언어의 유형에 따라 이러한 블로그에 대한 관심이 결정됩니다. 우리는 웹 개발에 중점을 둘 수 있으며 단순한 백엔드 스크립트 (PHP / RoR / Python / SQL)뿐만 아니라 모든 프론트 엔드 작업 (HTML5 / CSS3 / JavaScript)을 포함한다고 가정합니다. 나는 프론트 엔드와 백엔드 코드 모두에 초점을 둔 가장 인기있는 개발자 블로그의 단일 목록을 작성하는 자유를 가졌다..

• 넷츠츠+
• 24 가지 방법
• Webmonkey
• 스매싱 코딩
• 웹 디자이너
• 요소를 점검하다
• 고양이 코드
• Line25 웹 디자인 블로그

확실히 고려해야 할 많은 것들이 있습니다. 자습서 및 원하는 dev 언어에 대한 기사를 찾아 Google을 치는 것이 좋습니다. 그런 다음 Google 리더와 같은 RSS 피드 애그리 게이터를 사용하여이 잡지의 모든 최신 기사 목록을 설정할 수 있습니다. 이것은 귀하의 근무일을 시작하거나 심지어 자습서를 통해 조금씩 시간을 보내는 훌륭한 방법입니다..

jQuery 플러그인

지난 해 jQuery 코어 라이브러리와 jQuery Mobile은 많은 호응을 얻었습니다. 이러한 오픈 소스 라이브러리는 풍부한 애니메이션과 손쉬운 Ajax 기능을 구현하는 프론트 엔드 환경을 설계하기 위해 노력하지만 모바일 라이브러리는 플러그인 및 타사 코드 측면에서 상위를 따라 잡지 않았습니다.

마찬가지로 환상적인 또 다른 제품인 bgStretcher를 동적 배경 스크립트로 사용할 수 있습니다. 일련의 이미지와 사용자의 화면 해상도에 비례하여 크기가 조정됩니다. 이 기능을 실제로 활용하려면 멋진 데모를 확인하십시오. 이 두 플러그인은 모두 무료로 다운로드 할 수 있으며 jQuery로 빌드 된 멋진 써드 파티 코드의 간단한 예제로 동작한다. 이러한 리소스로 작업하면 프로젝트 작업에 많은 시간을 절약 할 수 있으므로 휠을 다시 발명 할 필요가 없습니다..

일반적으로 JavaScript 코드 스 니펫 / 플러그인 용 웹 사이트 Ajax Blender 및 Dynamic Drive를 검색하는 것이 좋습니다. 도서관은 거대하지는 않지만 사용자가 제출 한 새로운 콘텐츠로 인해 지속적으로 증가하고 있습니다. 사이트에는 jQuery 플러그인뿐만 아니라 MooTools 및 Prototype 라이브러리도 포함됩니다..

JQuery Mobile 라이브러리로 작업을 끝내면 jqmPhp라는 다른 툴을 추천합니다. 동적 인 PHP 클래스로, 간단한 함수를 참조하여 jQuery Mobile을 통해 구동되는 HTML5 코드의 라인과 라인을 출력 할 수 있습니다. 그것은 솔직히 PHP 셸 주위에 구축 된 동적 모바일 응용 프로그램을 프로토 타입하는 가장 쉬운 방법입니다. 사이트 블로그에는 수많은 예제 참조 자료가 있습니다..

HTML5 및 CSS3로 제작

프론트 엔드 웹 개발에 관해 이야기 할 때 일반적으로 효율성에 관한 것입니다. 백엔드 Ruby 애플리케이션을 코딩 할 때와 마찬가지로 HTML / CSS로 웹 사이트를 구축하는 것과 같은 문제는 없습니다. HTML에는 실제 로직이나 오류 처리가 없습니다. 대부분의 경우 모든 브라우저에서 레이아웃 디자인을 얼마나 신속하게 확장 할 수 있는지에 관한 것입니다.

먼저 HTML5 Boilerplate를 추천해야합니다. 이것은 박탈 된 베어 본 템플릿입니다. “표준” 하나의 패키지에 HTML5 웹 페이지 요소. 여기에는 기본 스타일 시트, 자바 스크립트, 파비콘, Apple 터치 아이콘 및 기타 여러 가지 유용한 기능이 포함됩니다. 100 % 무료 프로젝트이며 Github 레포에 기여할 수도 있습니다. 심각한 웹 프로젝트를 시작하기 전에 모든 개발자에게 꼭 필요한 리소스입니다..

이제이 상용구를 사용하면 모든 사용자 지정 코드를 추가 할 수 있습니다. 하지만 나는 다음 단계를 밟아서 Initializr과 같은 앱으로 구축 할 것을 제안한다. 이렇게하면 일반적인 웹 사이트 레이아웃이 생성되고 상용구 패키지에 포함될 요소를 사용자 정의 할 수 있습니다. Google 웹 로그 분석 코드, 축소 된 jQuery, .htaccess 또는 web.config 파일 외에도 약 12 ​​개의 다른 옵션을 사용할 수 있습니다..

CSS 디자이너

이제 HTML5 코딩에 대해 살펴 보았으므로 인기있는 CSS3 프레임 워크를 고려해야합니다. CSS를 사용하면 훨씬 많은 작업을 수행 할 수 있기 때문에 HTML 템플릿보다 더 개방적입니다. 디자이너는 모든 현대 웹 브라우저에 표준 호환 코드를 작성하는 데 어려움을 느끼게됩니다..

Golden Grid System은 반응 형 웹 디자인 프레임 워크로서 환상적입니다. 이러한 레이아웃은 브라우저 창 크기를 조정할 때 모바일 화면에 적응하고 안쪽으로 접 힙니다. 또한 각 열 영역의 너비와 크기를 계획하는 데 도움이됩니다. 청사진은 체크 아웃해야하는 또 다른 편리한 CSS 프레임 워크입니다. 맞춤 웹 사이트를 구축하고 환상적인 문서를 제공하는 데 적합합니다..

그러나 CSS 도구에 관해서는 CSS3 PIE이 제 3 위의 즐겨 찾기에 있어야합니다. Internet Explorer 6-9에서 지원되는 CSS3 효과를 렌더링하기위한 적절한 코드를 출력하는 간단한 웹 앱입니다. 사용자 정의 가능한 설정으로 동적 선형 그라디언트, 둥근 모서리 및 상자 그림자를 만들 수 있습니다. 이 사이트에는 IE 예제도 있습니다..

개발자는 제작을 위해 파일 크기를 줄이려고합니다. Clean CSS는 코드를 단순화하고 파일 크기를 줄이기 위해 다양한 옵션 중에서 선택할 수있는 리소스 중 하나입니다. Code Beautifier의 또 다른 대안은 많은 옵션을 제공하지 않지만 사용하기가 더 쉽습니다..

WordPress로 테마 사용자 정의하기

WordPress 출판은이 시대에 가장 인기있는 CMS입니다. 우리는이 환상적인 콘텐츠 관리 솔루션을 통해 수백만 개의 새로운 블로그와 웹 사이트를 보았을 것입니다. 그리고 그러한 WordPress 개발자들은 커스텀 위젯과 웹 사이트 테마를 만들어야 할 필요성이 높습니다..

Constellation Theme의 새로운 버전은 WordPress 개발자에게 기본 템플릿보다 쉬운 출발점을 제공합니다. 새로운 Twenty Eleven 테마는 매우 교활하고 미니멀리즘이지만 HTML5Boilerplate 위에 구축 된 전체 테마 템플릿과 경쟁 할 수 없습니다. Constellation WP 테마에는 iPhone 및 iPad 태블릿과 같은 다양한 장치 해상도에 대한 미디어 쿼리가 포함됩니다.

Wonderflux는 개발과는 거리가 먼 WordPress 테마 템플릿입니다. 최근에 일부 온라인 설명서와 함께 v1.0에 베타 버전이 릴리스되었습니다. 이 테마는 컨 스텔 레이션보다 조금 복잡하여 레이아웃을보다 잘 제어 할 수 있습니다. 개발자는 사용자 정의 PHP 후크, 함수 및 필터를 사용하여 WordPress 사이트를 더욱 역동적으로 만들었습니다.

심각한 WP 개발자는 두 솔루션 중 하나가 향후 프로젝트 작업에 도움이되는지 확인해야합니다..

웹 개발자 프리 빌리지 찾기

PSD 및 그래픽과 비교할 때 웹 개발 커뮤니티는 공짜 물건 갤러리에서 조금 부족한 것 같습니다. Github에서 언제나 훌륭한 스크립트를 찾을 수 있지만, 자주 검색하고 직접 테스트해야합니다..

무료 다운로드 및 데모는 물론 스크립트 예제를 제공하는 웹 사이트를 찾는 것이 어렵습니다. 필자가 가장 좋아하는 새로운 리소스는 사용자가 제출 한 개발 도구, 플러그인, 라이브러리 및 기타 깔끔한 것들을 카탈로그 화하는 CodeVisually입니다. 레이아웃은 갤러리와 같이 설정됩니다. 각 페이지에는 제품에 대한 링크, 데모 스크린 샷 및 몇 가지 세부 정보가 포함되어 있습니다..

이 갤러리에는 HTML / HTML5 템플릿 코드, CSS3 라이브러리 및 수많은 jQuery 예제가 포함되어 있습니다. 나는 또한 자신의 오픈 소스 코드를 대중에게 제출할 수있는 훌륭한 웹 사이트임을 발견했다. 귀하의 이름은 제출물에 묶여 있으며 사용자가 코드에 액세스 할 수있는 자신의 웹 사이트 링크를 추가 할 수 있습니다.

웹 응용 프로그램 API

현대 웹 개발에서 인기있는 추세는 타사 앱으로 API를 구축하는 것입니다. 주류 소셜 네트워킹 브랜드의 대부분은 자신의 웹 사이트에 바로 작동하는 API 및 설명서 세그먼트를 포함합니다. 게다가 모든 주요 백엔드 프로그래밍 언어로 작성된 Github의 무료 래퍼 클래스가 있습니다..

개발자는 이러한 종류의 코드 라이브러리가 수요가 증가함에 따라 편안하게 작업해야합니다. OAuth 시스템을 사용하면 이러한 많은 응용 프로그램에서 사용자 기반을 신속하게 구축 할 수 있습니다. 다음은 인기있는 온라인 API에 대한 몇 가지 참조 정보 및 전체 설명서입니다..

• Twitter API
• CloudApp API
• Instagr.am API
• eBay API
• Foursquare API
• 드리블 API
• Github API

가능한 경우 언제든지 새 프로젝트에서 이러한 리소스를 활용하십시오. 웹은 점점 더 연결되고 사용자는 항상 다음 큰 앱으로 몰려 들고 있습니다. 방문자가 전혀 새로운 계정을 등록 할 필요가 없으며 Twitter 또는 Facebook을 통해 직접 가입 할 수 있으면 앱에 수천 명의 헌신적 인 회원을 모집 할 수 있습니다..

Q & A 리소스

개발자들 사이에서 가장 유익한 경험은 질문하고 새로운 기술을 배우는 것입니다. 개발자 커뮤니티는 항상 신규 이민자에게 많은 도움이되며 다양한 상황에서 전문 지식을 제공하고자합니다. 프로젝트에 어려움이나 특정 질문이있는 경우 Google을 통해 관련 웹 개발자 포럼을 검색하십시오..

회원이 아닌 경우 Stack Exchange 커뮤니티에 가입하는 것이 좋습니다. 여기에는 Stack Overflow 및 Super User와 같은 놀라운 웹 사이트가 포함되며 기본적으로 프로그래밍 도움말을 얻을 수 있습니다. 커뮤니티 회원은 jQuery 및 더 작은 PHP 클래스를 포함한 모든 주요 웹 언어에 대해 잘 알고 있습니다..

내가 배운 좋은 트릭은 Google 검색을 통해 문제가 이미 해결되었는지 확인하는 것입니다. Google 검색에 몇 개의 키워드를 입력하고 접미사를 추가하십시오. 사이트 : stackoverflow.com. 반환 된 모든 검색 결과는 Stack Overflow 아카이브의 질문 일 것입니다. 운이 좋으면 현재 문제에 대한 해결책을 정확하게 찾을 수 있습니다..

페이지 속도 온라인 테스트

Google Developers가 발표 한이 새로운 도구는 사실 정말 인상적이었습니다. 앱 Page Speed ​​Online은 웹 사이트 콘텐츠를 분석하고 속도에 대한 분석 보고서를 생성합니다. 여기에는로드 시간을 줄이고 방문자를 사이트에 오래 머물 수있는 가능한 솔루션이 포함됩니다..

이탈률 문제를 파악하고 전환율을 낮추는데도 도움이됩니다. Google 웹 로그 분석은 모든 웹 사이트의 필수 요소이지만 Page Speed는 더 높은 수준의 분석을 달성 할 수 있다고 생각합니다..

보고서 출력은 높은 우선 순위에서 높은 우선 순위에 이르며 종종 여러 항목을 포함합니다. 램프 설정을 이해하고 Apache 서버에서 작업하는 경우 mod_pagespeed 모듈을 고려할 수 있습니다. 로드 시간을 줄이고 중요한 웹 데이터 (이미지, 아이콘, 스크립트)를 캐싱하기 위해 웹 사이트에서 이러한 최적화를 자동으로 수행합니다..

최고의 개발자 소프트웨어

가장 인기있는 두 가지 운영 체제 사이에서 수십 개의 프로그램을 찾을 수 있습니다. 그래픽 소프트웨어에서 소스 코드 편집기 및 IDE에 이르기까지 웹 개발자가 선택할 수있는 많은 리소스가 있습니다. 그러나 인기있는 제안을 찾고 있다면 다음 제목을 추천합니다..

맥 OS X

Panic은 Mac 용 최고의 웹 개발 앱인 Coda를 만든 소프트웨어 회사입니다. 소스 코드 편집기, 터미널 및 FTP 클라이언트에 액세스하여 서버 파일을 직접 변경할 수 있습니다. Coda는 HTML, XML, CSS, JavaScript, PHP, SQL 등과 같은 언어에 대한 구문 강조 표시의 긴 목록을 추가적으로 지원합니다.

그러나 무료 솔루션이 필요한 경우 Komodo Edit를 확인해야합니다. 이 소프트웨어는 Windows 및 Mac, 오픈 소스 용으로 개발되었으며 완전히 다운로드 할 수 있습니다. 그것은 구문 강조와 Coda (FTP가 안타깝게도)와 비슷한 기능을 많이 지원합니다. TextWrangler 당신이 시도 할 수도 있습니다 또 다른 무료 솔루션입니다, 또한 간단한 텍스트 편집기.

무료 FTP 응용 프로그램을 보려면 Mac App Store에서 Cyberduck을 확인하십시오. 개인적으로 나는 맛있는 FTP 또는 전송과 같은 유료 대안을 선호하지만.

Microsoft Windows

Adobe 소프트웨어 제품군은 웹 디자인 및 개발에 관해 생각할 때 항상 염두에 둡니다. Windows 사용자에게는 Dreamweaver 대신 사용할 수있는 많은 옵션이 있으며 그 중 대다수는 무료입니다..

Notepad ++는 오픈 소스 Win32 소프트웨어의 좋은 예입니다. 이 프로젝트는 여전히 활발히 개발 중이며 업데이트를 자주 (거의 매월) 발표합니다. 나는 그들의 탭 인터페이스와 많은 추가 플러그인에 대한 지원을 좋아합니다. 앞서 언급했듯이 Komodo Edit는 Windows XP / Vista / 7에서도 제공되므로 대안으로 사용해 볼 수 있습니다..

Windows의 웹 개발자는 FTP 클라이언트가 없습니다. Filezilla는 아마도 가장 인기있는 무료 대안 일 것입니다. 대안으로, 유사한 도구와 함께 무료 FTP 클라이언트 목록을 확인하십시오..

기타 유용한 데브 리소스

• 100 가지 필수 웹 개발 도구
• 2011 년 최고 : 유용한 jQuery 플러그인 및 자습서
• 웹 개발 초보자를위한 Ruby on Rails 자습서
• 7 흥미로운 웹 개발 동향 (2011 년)

결론

지금까지 2012 년 1 분기가 강타로 시작되었습니다! 우리는 이미 세계 각국의 디자이너와 웹 개발자들로부터 쏟아져 나오는 놀라운 컨텐츠를 보았습니다. 웹을 구축하는 전문가는 1-2 년 전에 비해 많은 도구를 사용할 수 있습니다..

이 도구와 리소스를 엄청나게 편집하면 더 나은 개발을위한 방법론이 탄탄하게되기를 바랍니다. 나는 웹 개발자들과 일하는 것을 좋아하고 항상 새로운 프로젝트에 대해 배우는 것을 좋아합니다. 그러나 우리가 포함 할 수있는 새로운 자원을위한 공간이 너무 많아서, 나는 몇 가지 보석을 놓친 것입니다. 관련 웹 개발자 리소스에 대한 아이디어 나 제안 사항이 있으면 게시판 토론 영역에서 알려주십시오..