[Powered by Google Translate] [세미나] [웹 개발 : 아이디어에서 구현까지] [벤 쿤] [빌리 Janitsch] [하버드 대학] [이 CS50입니다] [CS50.TV] [빌리] 안녕하세요, 저는 빌리이고이 벤입니다. >> [벤] 안녕하세요. 우리는 오늘 웹 개발에 대해 이야기 할 것입니다. [경우 Webdev] [빌리 Janitsch 벤 쿤] 먼저 우리에 대해 조금. 벤은 백엔드 사람의 일종이다. 그는 사물이 작동합니다. 그리고 그때에 가서 그들을 사랑합니다. 나는 물건을 더 프런트 엔드 레이아웃 디자인의 종류와 주로 참여 해요 벤은, 다른 한편으로는, 그가 백엔드 물건에서 작동 그래서 무엇을하고 있는지 알고있다. 우리가 함께 몇 가지를 만들었습니다. 예를 들어, 작년에 우리는 온라인 게임 개발 스튜디오입니다 Gimblium 일했다. 즉, 클래스에 대한 우리의 마지막 프로젝트였다, 그 이후로 우리는 하버드 클래스 만들었습니다 이는 하버드에서 검색 및 쇼핑 과정에 대한 온라인 프레임 워크입니다. 

우리는 우리의 웹 사이트에이 아이디어를 시작하는 것입니다. 우리는 페이스 북 만들려고하지만, 고양이입니다. 실제로이 웹 사이트를하기 전에, 그것은 좋은 아니기 때문에이 웹 사이트를하지 않습니다 만, 우리는 프레임 워크로 사용할 수 있습니다 우리는이 아이디어를 가지고하는 방법의 절차를 통해 우리가 사용할 수있는 실제 웹 사이트에 켜십시오. 우리는 아래 웹 사이트를 파괴함으로써 시작합니다. 당신이 CS50에서하고 있었던 것 같은 이 웹 사이트로 가서 실제 부품이 무엇인지에 대해 생각합니다. 기본적으로 그냥 종류의 추상적 인 개념 인 생각에서 선회 당신이 할 수있는 실제, 유형 일에. 우리는 몇 가지 질문을 시작합니다. 이 웹 사이트는 무엇입니까? 왜 우리는 그것을하고있다? 그것은 무엇에 사용하는거야? 그런 종류의 물건. 페이스 북 고양이의 경우, 우리는 기본적으로 서로 고양이 소셜 네트워크를 할 수있는 웹 사이트를 원한다. 아이디어는 서로의 벽에 게시 할 수있는 것, 그들은 주석, 그런 종류의 물건을 만들 수 있습니다. 우리는 기능적 구성 요소에 와서 어디 때문입니다. 우리는 지금의 프레임 워크의이 종류가 - 우리는 사용자 프로파일을 가지고, 우리는 의견이, 우리는 게시 할 수 있습니다. 아마도 언젠가는 우리가 좋아하는 그런 종류의 물건을 유입하는 것이다. 그리고 우리는 종류의 추락이 기능에 우선 순위를 원​​하는 우리는 좋아, 모두가 프로필을 가지고 정말 중요한처럼하고 싶은 말 그 모두가 서로의 벽에 게시 할 수 있습니다. 그것과 차, 코멘트 좋을 것이다. 아마도 나중에 우리가 좋아하는 유입하는 것이다. 그래서, 당신은 당신의 프로젝트에 근본적인 무엇의 아이디어를 갖고 싶어 나중에 적용 할 수있는 일반적인 기능의 종류는 무엇입니까. 당신은 일종의 마음의 특정 목록을 갖고 싶어 그러나 당신이로 시작하는 프로젝트는 마무리 프로젝트 될 수 없습니다. 즉, 가지, 당신은 사이트를 개발하는 동안 변경하려는 당신은 그 공간을 떠나고 싶어. 나는 구조에 대해 조금 이야기 것 벤에 뒤집 있습니다. 

[벤] 나는 웹 개발의 기술적 측면에 대해 얘기 할거야. 그냥 먼저 몇 가지 기본 사항에 가자. 당신은 웹 응용 프로그램을 수행 할 때, 당신이해야 할 것입니다 주요 부문이다 당신은 클라이언트 측에서 일어나는 몇 가지 물건을해야 할 것입니다 - 즉, 당신이 브라우저입니다 코드는 사이트에서 소요 그리고 자바 스크립트, HTML, CSS 물건. 즉, 클라이언트 측의 모두이다. 당신은 서버 측에서 실행되는 다른 코드를해야 할 것입니다 어떤 사람들이 당신에 보내는 모든 데이터를 추적, 그런 어떤 물건을주는 사람을 결정합니다. 너희들은 모두 우리가 무슨 말을하는지 잘 알고 있도록이 그냥 몇 가지 용어입니다. 그 분야를 넘어 그것은 측면에서 웹 응용 프로그램을 생각하는 것이 좋다 서로 다른 구성 요소의 커플. 당신은 웹 개발을하고있는 경우 당신은 항상 일을하려고한다 것들 중 하나는 복잡성을 줄일 수 있습니다. 더 복잡한 코드에서 버그를 만들기 위해이 더 많은 기회, 열심히 나중에 변경하는 것입니다. 그래서, 당신은 몇 가지 독특한 기능 영역으로 앱을 중단 할 수있는 경우 그 것이다 - 당신은 크로스 지역 통신의 양의 종류를 줄일 수 있습니다 - 그것은 당신에게 버그를 줄이는 측면에서 장기적으로 많은 도움이 될 것입니다. 

구체적으로, 보통 사람들에 웹 응용 프로그램을 분할 - 이들은 지금 버즈 워드의 일종입니다,하지만 그들은 여전히​​ 유용하다. 당신은 사람들이 모델, 뷰, 컨트롤러에 대해 이야기 들었을 수도 있습니다. 모델은 앱에서 처리하려고하는 실제 데이터입니다. 예를 들어, 고양이 페이스 북에서 귀하의 모델이 될 것입니다 - 당신은 같은 게시물에 대한 모델과 같은 사용자 프로필, 물건에 대한 모델이있을 것이다. 여러분의 의견은 사용자에게 데이터를 제시하는 방법이다. 당신은 1 하나의 게시물을 찾고에 대한 전망과 모든 코멘트가있을 수 있습니다 모든 게시물의 목록이 당신 벽에 다른보기 당신에게 지시하고 뉴스 피드에 대한 다른 견해되는 - 그런 물건. 사람들이 당신에게 글을 보낼 때 마지막으로, 당신은 기본적으로하는 컨트롤러가 당신은, 당신의 백 엔드 시스템에 대한 업데이트를 확인 당신이 카운터의 무리를 증가하고, 뭐든간에. 사람들은 당신의 컨트롤러입니다. 

전 모델에 대해 주로 이야기 할거야. 뷰는 기술적으로 어려운되지 않으며 문제는 그들을 설계와 더 컨트롤러는 당신이 디자인하는 어떤 특정 될 것입니다. 하지만 사용할 수있는 몇 가지 매우 일반적인 기술이 있습니다 나는 아주 도움이됩니다 생각으로 일을 당신의 모델은 더 좋은 쉽게 만들 수 있습니다. 이것은 주로 좋은 방법으로 웹 애플리케이션의 데이터를 처리하는 방법에 대한 될 것입니다. 모델과 주요 이슈 그들은 클라이언트와 서버에 살고있는 당신이 파악해야한다는 것입니다 ) 방법을 얻을 수 있습니다 - 모든 관련 사람들을 - 서버에서 클라이언트로, 와 b)의 동기화를 유지하는 방법에 대해 설명합니다. 사용자는 약간의 업데이트를 수행 할 것입니다. 그들은 새 게시물을 할 것입니다. 그들은 당신이 좋아이있는 경우 물건과 물건을 좋아 할 것입니다. 그 모델을 다루는 주요 기술 과제이다. 당신 자신에게 물어보고 싶은거야 우선이다 데이터의 종류는 모델에 가서 쿼리의 어떤 종류의 우리가하고 싶은거야 - 즉, 우리는 어떻게 모델을 보는거야? 당신의 고양이 페이스 북의 예를 들어, 게시물은, 그와 관련된 저자를해야 할 것입니다 일부 벽 포스트 텍스트, 벽 포스트의받는 사람. 그리고 당신은 다른 방법의 무리에 그 쿼리 할 수​​ 있습니다. 당신은 어떤 게시물을 작성한 사람으로보고 싶을 것 아마 그들은이 게시 된 날짜에 의해 게시 된을받은 사람에 의해. 당신이 날짜를 기준으로 할 거라면, 그때 당신은 당신의 포스트에 다른 필드를 추가해야 그것은 실제로 게시의 경우. 이 2 개의 요인 - 당신은 당신이 그것을 표시 할 방법을 사용하려면 어떤 데이터 - 그들은 서로에 의존하기 때문에 먼저 그들에 대해 생각해야한다, 그리고 나중에이를 추가하는 것이 더 어려울 것입니다. 

다른 고려 사항이 있습니다. 당신은 당신이 서버 모델을 처리하는 방법에 대해 생각하는 경우 당신이보고 싶은 것은 - 당신은 기본적으로 가능한 서버가 단순하고 싶다. 클라이언트 측에서 물건을 수행하면 일반적으로 클라이언트에 순수 할 수 있으면 훨씬 빠릅니다 네트워크 요청 모든 종류의 일을하지 않고. 아이디어는 클라이언트에서 할 수있는 쿼리의 많은 작업을 수행하는 것입니다. 그 유일한 문제 입니다 당신은 처음에 모든 데이터를 요청하는 경우 그로드하는 데 시간이 오래 걸릴거야. 그래서 아이디어는 클라이언트에 충분한 데이터를 갖는 사이의 중도를 공격하는 것입니다 당신이 대부분의 작업을 수행하지만, 그냥 모든 것을 한 번에 반입 할 수 없습니다 당신은 처음에 정말 느린로드 시간을 얻을 수 있도록. 예를 들어, 당신의 고양이 데이터 당신은 아마 벽 최근 게시물의 무리를 가져올 할 것입니다. 그 몇 년을 다시 갈 수 있기 때문에 그들 모두를 가져 싶지 않을 것이다. 하지만 당신은 한 번에 하나씩 가져 싶지 않아 즉, 네트워크 오버 헤드를 많이 소개하기 때문. 

그것은 아주 어려운 자주의 - 데이터베이스 실행이되면 - 당신이 그것을에 가지고있는 데이터를 변경하는 것이 매우 어렵다 - 즉, 새 데이터베이스 열 또는 뭔가를 추가 - 그래서 하나의 좋은 전략은 텍스트 덩어리에 많은 양의 데이터를 유지하기 위해 실제로 - JSON 한방울 - JSON 자바 스크립트 객체 표기법 인 - 다음 새 속성을 추가 할 수 있기 때문에 유용합니다 이유는 데이터베이스를 변경하지 않고이 JSON의 얼룩 모두에게. 그 유일한 단점은 당신이 필드의 무리가있는 경우 당신이 나중에 추가 한 - 그 JSON 한방울에 숨겨진 같은 - 다음은 데이터베이스 내에서이를 조회 할 수 어렵습니다. 예를 들어, 나중에 경우 - 당신은 당신의 포스트 모델이 있다​​면 우리는 앞에서 언급 한 바와 다만 저자,받는 사람 텍스트와 - 당신은 또한 당신이 나중에 날짜 필드를 추가하고 싶다면 다음 JSON 한방울을 가지고 있었다 당신은 당신의 데이터베이스를 변경할 필요가 없습니다 것입니다. 당신은 텍스트 필드의 모든 날짜를 추가 할 수 있습니다. 그리고 당신은, 클라이언트 측에서 그 볼 수있을 것입니다 하지만 서버 측에서이를 조회 할 수 없을 것입니다 그것은 텍스트 내부에 숨겨져 있기 때문이다. 

당신이 생각하고 싶은 다른 문제 클라이언트와 서버가 통신하려고하는 방법입니다. 당신은 일반적으로 가능한 한 간단하게이 문제를 계속하고 싶습니다. 당신은, GET - 날 -이 데이터 요청과 같이 할 수 있습니다 일 - 새로운 객체 생성 및 갱신 된 오브젝트 요청. 그리고이 모든 서버에서 다른 URL 것이 당신 것입니다 - 브라우저는 것 - 만약 당신이 이러한 모든 AJAX 요청을 사용할 수 있습니다 수신 또는 포스트 데이터를 하나. 다시 말하지만, 우리의 고양이 페이스 북의 예를 들면, 당신은 각각의 게시물을 얻을 해당 URL을 가질 수있다, 당신은 새 벽 게시물을 작성하기위한 URL이있을 것이다 어쩌면 그런 프로필 사진, 물건을 업로드하기위한 URL. 그러나 다시, 그것은 당신이 계속해야 할 수 있도록 데이터의 대부분을 사전 인출의 네트워크 요청을. 그 이유로, 당신은 하나의 게시물에 대한 개별 GET 요청을하지 않을 수도 있습니다 대신 당신은 벽 전체 1 GET 요청을 할 것입니다. 그리고 당신은 때문에 균형을 시도하는 경우 - 이것은 또한 응용 프로그램에 의존 할 것이다. 때문에 당신은 사람들이 10 또는 20 벽 게시물이 것을 기대하는 경우 즉, 잘 될 것입니다. 당신은 그들이 수천을해야합니다 기대하는 경우에 그 요청이 너무 오래 걸릴 것 그래서 당신은 얻을 - 모든 게시물을하기 때문에 매개 변수를 추가 할 수 있습니다. 

이들 모두를 위해 당신은 아마 JSON으로 데이터를 동기화 할거야 - 자바 스크립트 객체 표기법. 거의 모든 언어를 아주 잘 JSON 다룬다. JQuery와 당신을 위해 열심히 일을 모두 할 것이 좋은해서 getJSON 기능을 가지고 있습니다. 그리고 PHP에 아주 좋은 JSON 통신 기능도 있습니다. 그래서, 아마 앞뒤로 모델을 보내기위한 가장 좋은 형식입니다. 

우리가 지금까지 언급 한 내용의 예를 들어, 여기에 고양이 페이스 북의 응용 프로그램에 대한 예를 들어 흐름입니다. 이 브라우저의 기본 웹 사이트 URL을 요청으로 시작한다. 서버는 아마 정적 HTML과 약간의 자바 스크립트와 CSS를 통해 보낼 것입니다. 이 서버의 모든 렌더링 작업을 수행하지 않는 것이 가장입니다. 당신은 아마 싶지 않아 - 어떤 서버가 일을하지 않거나 벽 게시물의 목록을 추락 하고 각각에 대한 일부 HTML을 생성하고 그 위에 전송. 때문에 그렇지 않으면 클라이언트 측에서 그렇게하는 것이 최선 당신이 뭔가를 다시 그리 할 때마다, 당신은 서버의 요청을해야합니다. 그리고 매우 빨리 당신에게 많은 오버 헤드를 제공합니다. 배는 정적 HTML을 전송 단지에 그것은 일반적으로 최선의 다음 자바 스크립트와 CSS는 클라이언트 측에서 렌더링을 할 것이다. 즉시 그 물건이 들어 오면, 당신은 할 수 있습니다 - 자바 스크립트에 - 당신은 벽 데이터에 대한 요청을 할 수있다 그와 같은 것들, 그리고 그 후 서버는 기본적으로 그냥 데이터베이스 쿼리를하고있다 및 사용 권한을 확인합니다. 단지 중요한 것은 그것이 다른 사용자의 벽 포스트를 통해 보낼 수 있다는 것입니다 당신은 볼 수 없습니다 있다는 것을. 그것은 기본적으로 데이터베이스에 매우 얇은 액세스 계층이 될 수 있습니다, 다음의 모든 데이터를 보여주는 - 전망과 물건의 모든 - 당신이 게시하거나 뭔가를하고 싶은 경우에 그 다음 브라우저에서 일어날 수 당신은 또 다른 요청을 보냅니다. 

이 상단에 할 수있는 몇 가지 멋진 물건도 있습니다. 보다 구체적인 기술 정보의 측면에서, 일반 자바 스크립트로 개발하는 것은 조금 고통 스러울 수, 그래서 당신에게 많은 도움이 될 몇 가지 라이브러리와 도구가 있습니다. 나는 당신이 모든 아마 HTML 렌더링을 수행하게하는 jQuery를에 대한 소문은 들었지만 생각 및 조작을 더 쉽게 - 및 페이드 아웃을위한 멋진 기능을 많이 가지고, 와 기운찬 애니메이션을하고. Underscore.js이라는 라이브러리도 있습니다. 그것은 유용한 유틸리티 기능을 많이, 당신은 자바 스크립트가있을 것으로 예상 할 물건을 가지고 정말 나던 것을 - 배열 셔플 같은 것들을, 목록에서 중복을 제거하거나,리스트의 목록을 평탄화. 이것은 단지 작은 코드 샘플입니다. 밑줄은 당신이 모든 시간을 텐데 이러한 좋은 기능이 많이 있습니다. 

그리고 난에 약간의 시간을 보내고 싶습니다 1 더 라이브러리가있다 백본은 정말 당신이 클라이언트 측에서 모델을 처리 할 수​​ 있기 때문에 Backbone.js라고 그것이 발생할 수있는 많은 혼란. 백본은 당신에게 모델과 컬렉션의 개념을 제공합니다 자바 스크립트에 정확히 자바 스크립트 객체와 같이 기본적으로 어느 자바 스크립트의 배열에 있지만, 그들은 당신이 그들의 속성을 변경 이벤트가 있습니다. 버튼을 클릭하거나 뭔가 오면 그냥 자바 스크립트에서처럼, 당신은 이벤트를 할 수 있습니다 이러한 백본 모델과 백본 컬렉션은 같은 일을 방송합니다 그들이이 변경 될 때. 즉, 여기서이 코드 조각처럼 작성할 수 있다는 것을 의미합니다 - 당신은 전체 벽을 다시 그려야 게시물 배열에 아무것도 추가 할 때마다이는 말한다. 좋아하는 게시물의 번호가 변경 될 때마다 그리고 이것은 말할 것 당신이 누군가가 자신의 게시물을 좋아하는 사용자에게 통보. 또는 게시물의 속성을 사용하면 게시물을 다시 그리기 변경 될 때마다. 그런 물건은 복잡성의 톤을 저장하기 때문에 그렇지 않습니다 이 같은 일부 프레임 워크 당신이 변경 코드에서 다음의 모든 시간이없는 경우 게시물에 대해 아무것도, 당신은 모든 렌더링 함수를 호출하는 자신을 기억해야 할 것 그와 같은 것들, 그리고 무슨 일이 있었 새로운 무언가를 추가하려는 경우 당신이 게시물을 수정할 때마다 당신은 당신의 모든 곳을 통과해야 할 것 당신이 게시물을 수정하고 새로운 것을 추가 코드입니다. 이 같은 프레임 워크는 그 사이의 계층 통신을 많이 제거합니다 즉, 코드가 복잡하고 유지하기 어려운 있습니다. 

또한 전체에 대해 조금이있다. 그들은 기술적으로 매우 어려운 아니에요 때문에 빌리이 대부분을 떠날거야. 귀하의 의견에 대해 jQuery를 사용합니다. 그것은 실질적으로이 시점에서 필요 같아요. 그냥 모든 것을 너무 쉽게합니다. 도서관이 많이 있습니다. 는 사용자 인터페이스 요소를 복잡했다면 당신은 자동 완성 일을 원하거나 그 멋진 멀티 선택기 중 하나를 좋아하는 경우 - 당신이 그런 일을 할 경우, 당신은 아마 그냥 주위를 검색한다 당신은 당신이 원하는 것을 할 것입니다 좋은 라이브러리를 찾을 수 있습니다. 빌리 뷰의 사실 어려운 부분에 대해 자세히 설명합니다. 또한, 보조 노트로, 백본은 전체 의사 소통하는 몇 가지 기능이 있습니다 잘 모델 - 실제로,이 라이브러리의 모든 문서를 확인합니다. 그냥 문서를 봐주세요. 그들은 아주 잘 작성하고 따라하기 쉬운입니다. 당신은 문제가있는 경우 일반적으로, 당신은 꽤 많은 단지 구글을 할 수 있습니다. 를 사용하는 사람들이 많이 있습니다. 나는이 마지막 참고로 생각합니다. 

당신이 할 수있는 몇 가지 고급 기법도 있습니다 당신은 당신의 웹 응용 프로그램은 별도의 멋진 만들기 위해 찾고 있다면.보기 당신은 할 수있다 - 새로운 HTML5 사양은 당신이 할 수있는 멋진 일들이 많이 있습니다. 로컬 스토리지 - 브라우저에서 데이터를 저장할 수 있습니다 - 오히려 되돌아 가서 모든 것을 서버를 정독하는 것보다, 당신은 클라이언트에서 그 중 일부를 유지할 수 있고 심지어 사람들을 수 있습니다 - 어떤 경우에도 당신이 웹 페이지를 오프라인으로 사용하도록 할 수 있습니다. 네트워크 통신의 다른 종류입니다 WebSocket을이라는 것이있다 어디 대신에 당신이 하나의 요청을, 당신이 응답을하고 작업을 완료, 당신은 서버에 대한 연결을 열 유지하고 그래서 당신은 같은 일을 할 수있다 실시간 업데이트. 그래서, 당신은 채팅 응용 프로그램을 만들려고한다면, 당신은 WebSocket을 사용할 수 당신이 요청하는 유지해야하지 않을 수 있도록 앞뒤로 전달하는 것은, "아, 서버, 사람이 나에게 채팅을 보내나요?" 10 초마다 또는 뭔가. 당신이처럼 보이게 할 수있는 재미있는 HTML5 기능도 있습니다 페이지의 URL은 이제까지 실제로 그것을 다시로드하지 않고 변화하고 있습니다. 당신은 다시 사용하고 네트워크 요청의 무리를하지 않고 버튼을 전달할 수 있습니다. 그런 물건은 빠른 결정의 측면에서 정말 유용합니다뿐만 아니라해야 웹 응용 프로그램처럼 작동합니다. 

CoffeeScript이라는 것은도 있습니다. CoffeeScript 사실, 즉 자바 스크립트를 아래로 컴파일, 다른 언어입니다. 당신은 CoffeeScript에 모든 코드를 작성하는 것입니다, 다음이 컴파일러를 실행 그것은 당신이 당신의 웹 페이지에 포함 할 수있는 자바 스크립트 파일을 내뿜으며. 그것은 많은 제거해 때문에 CoffeeScript가 좋은 이유는 같음과 동일 곳 자바 스크립트가 이상한 경우, 와 등호 다른 일을하거나, 좋아 같음 - 그것은 배열과 기능을 처리하기위한 더 좋은 구문이 있습니다. 이것은 모든 사각형의 목록을 CoffeeScript의 작은 조각이다 10 ^ 2 역순으로 2 ^ ~ 1. 당신이 볼 수 있듯이, CoffeeScript는 종종 1 라인에 표현 할 수 있습니다 자바 스크립트의 5 줄을 것입니다 무슨. 그것은 일을 훨씬 쉽게 만들 수 있습니다. 처음에 배울 새 구문의 약간의, 그러나 그것은 확실히 장기적으로는 생산성을 만들 것입니다. 

또한 PHP보다 서버에서 다른 언어를 사용할 수 있습니다 - 루비, 파이썬, 같은 언어 또는 node.js이라고 불리는 프로젝트가있다 즉, 서버에서 자바 스크립트를 사용하게됩니다. 개인적으로, 나는 정말, 정말 PHP를 싫어. 난 그냥 작업을 즐길 수 없습니다. 당신은, 너무, 그것은 언어의 끔찍한 cluge이라고 생각하면, 당신은 대신 이들 중 하나를 사용할 수 있습니다. 일반적으로, 당신이 무언가를하고 싶은 경우에 당신은 정말 당신이 그것을 할 것입니다 방법을 몰라, 다만 인터넷을 검색 할 수 있습니다. 톤, 특히에 자원의 톤이있다 - StackOverflow의 좋은 하나입니다. 그것은 프로그래머가 서로 질문을이 사이트입니다. 당신이 CS50 문제 세트에 문제가 된 경우는 그것으로 실행할 수도 있습니다. 그리고 당신이 원하는 것이 거의 아무것도에 대한 라이브러리의 톤이있다. 당신이 뭔가를 원하는 경우에 당신은 그것을 할 방법을 몰라, 그것은 불가능하다고 생각하지 않습니다. 그냥 구경하고 당신은 좋은 리소스를 찾을 수 있습니다. 

일반적으로 감싸고, 주요 테이크 아웃은 간단하게 유지합니다. 더 복잡한 코드는 시작 부분에 그리고 더 시도하고 멋진 물건을, 이상은 실제로 기능 무언가를 얻기 위하여 걸릴 것인가 그리고 열심히 나중에 변경하는 것입니다. 따라서, 최초의 것들에게 바보, 쉬운 방법을. 그와 함께 이동하려면, 예전의 코드를 버리고 나 많은 그것을 청소 무서워하지 않습니다. 일반적으로, 당신이 실제로 뭔가 작업을하면, 그것은 당신이 시작 단계에 아직도있을 때보다 생각하는 것이 훨씬 더 쉽다 얼마나 내가 모두 함께 이것을 넣어 않습니다. 그것은 작동 멍청한 가능한 디자인을 만들기 위해 최선의 다음 반복적으로 모든 권리를 처음 얻는 것보다 그것을 개선. 클라이언트 - 서버 부문의 측면에서 시도하고 매우 간단한 서버를 계속 - 단지 데이터베이스와 몇 가지 인증이 하드 작업을 수행하지 않습니다. 브라우저에서 클라이언트 측에 복잡한 물건을 모두 수행 자바 스크립트에서 많은 당신이 할 수있는. 당신의 삶이 더 나아지는 라이브러리에 대한 주위를 둘러 봐. 다른 사람이 쓴 코드를 사용하는 것이 더 당신이 경우 -하지가 직접 작성. 물건을 많이는 인터넷에있다. 구글은 당신의 가장 친한 친구입니다. 구글은 프로그래머의 가장 좋은 친구입니다. 그래, 확실히 물건에 대한 주위를 둘러 봐 두려워하지 않습니다. 괜찮아요. 이상 빌리에. 

[빌리] 사실, 어떤 디자인의 물건을 시작하기 전에, 누군가는 그가 이야기 아무것도에 대한 벤에 대한 질문이 있습니까? 좋아요. 다시 말하지만, 아무것도 분명하지 않다 경우 알려 당신은 당신이 좋아 한 경우에 또는 우리가 좀 더 뭔가를 통해 이동합니다. 나는 조금 뒤로 물러나 디자인의보다 근본적인 부분에 대해 이야기하겠습니다. 죄송합니다, 모델 컨트롤러 전망 체계 - 벤라는 모델을 언급 이는 기술적 인 측면의 일종이다, 그래서 나는 특히 전체 볼거야, 그리고 당신이 좋은 보이는 뷰를 디자인 할 것입니다 방법을 시작하겠습니다. 여기에 우리의 고양이 페이스 북 정말 기본 템플릿의 종류입니다. 나는 현대적인 UI 디자인에 약간의 기초가 있다고 생각합니다 따기 가치가있다. 당신은 모든 페이지에 공백이 많이있어주의 할 수있다, 것들에 대한 충분한 공간. 당신이 페이지에 물건을 스쿼시가 느껴지지 않습니다. 당신은 열린 공간을 많이를 마칠 수, 당신은 거의 모든 현대의 웹 사이트로 이동하는 경우 당신은 온통 흰색의 볼 수 있습니다. 당신이 기대하지 않을 것이다 장소에 흰색있다. 이 색상 표를 가지고 있고, 그것은 시작에 현명 당신이 일을하고 개발하는거야 색상 팔레트를 선택합니다. 또한 - 그것은 서체를 선택하는 데 도움이, 그리고 그 방법은 일종의 작업하고 디자인의이 콘크리트 기초. 당신은 당신의 유형을 가지고, 당신은 당신의 색깔을 가지고 있고, 당신은 종류의 수 로 필요한 다른 모든 맞습니다. 내가 말했듯이 그래서, 당신의 색 구성표와 함께 당신은 당신의 색상의 대담한 색상을 사용하려면 드물게. 헤더 좋네요. 버튼은 정말 큰, 화려한 색상을 가지고 좋은이다. 그러나 일반적으로, 당신은 모든 곳에서 색이있는 웹 사이트가있는 경우, 모든면에서 당신을 쳐다보고, 그냥 어수선하게 보이는, 그것은 좋지 않다. 당신은 일반적으로 밝은 색상을 사용합니다. 다시, 꽤 일관된 색상을 선택하려고합니다. 당신은 색상의 많은이 작은 밝아진 할 수 있습니다 - 그것은 꽤 좋은 볼 수 있습니다,하지만 당신은 아주 아껴서 사용하고 싶습니다. 

내가 말했듯이, 당신은 최소화합니다. 이하는 거의 항상 더 많은 것이다. 당신이 뭔가를 표시하거나 할 수없는 경우 뭔가를 표시, 당신은 종류의 확신은 기본적으로이 있어야하는지 여부입니다 - 아마 당신은 그것을 떠나 오프 최고예요. 당신은 항상 나중에에 추가 할 수 있습니다. 네, 간단하게 유지. 그러나 가장 중요한 것은, 당신은 여러 디자인을 고려하는 것이 좋습니다. 당신이 사이트를 만들 때, 당신은 당신이에가는거야 당신의 머리에 있다고 생각하지 않습니다 어떤 방법으로 사이트를 확인하고 정확히 다음과 같이 할 것입니다. 그것은 상단에있는 파란색 헤더와 블루 사이드 줄이 것 다음 노란색 서브 헤더 것. 여러 템플릿을 만들고 싶어. 당신은 할 수 있습니다 - 당신이 사진 숍 좋은 경우에, 당신은 종류의를 열 수 있습니다 당신이보고 좋아하는 웹 사이트를 디자인. 그렇지 않다면, 당신은 펜과 종이를 사용하여, 하지만 여러 디자인을 긁어. 당신은 기본적으로 당신이 다른 디자인의 제비가 위치가 설정해야 할 하나의 작업을 종료하는 경우와, 그 좋아. 하나가 실패 끝나는 경우에, 당신은 항상로 설정하는 또 다른 하나가 있습니다. 당신은 제한되어야한다처럼 일반적으로 생각하지 않습니다 어떤 디자인 당신은 처음에 결정합니다. 디자인은 매우 변수이며, 모델의 중요성의 일부 컨트롤러 전망 체계 및 축소 당신이 원하는 다른보기를 교환 할 수 있다는 것입니다. 당신은 데이터를 한 방법을 바꿀, 다음이 잘 작동하지 않는 사실, 오, 결정할 수 있습니다. , 나는 종류의 너무 복잡하다고 생각하거나 실제로 작동하지 않습니다 여기 부분이있다 그래서 난 그냥 완전히 완전히 새로운 하나이보기와 스왑을 포기하는거야. 우리는 여전히 이전 모델과 기존의 컨트롤러를 사용할 수 있습니다. 우리는 우리가 전에하는 것처럼 서버와 클라이언트에 모든 것을 할 수 있습니다. 그러나 표시되는 데이터의 실제 파도가 약간 다를 것입니다. 

지금까지와 같은 실제로 당신이 원하는 디자인을 구현, 당신은 몇 가지 디자인을 종이 또는 사진 숍 또는 무엇이든에 밖으로 스케치 한 후에 귀하에게 제공되는 툴의 개수가있다. 당신이하는 매우 잘 알고 첫 번째는 HTML, PHP, 또는 무엇 당신은 당신의 웹 사이트에 정적 페이지를 암호로 사용하는 언어입니다. 당신은 종류의 당신에게 이러한 태그를 제공 HTML과 많이 일했다 당신은에 물건을 넣을 수 있으며, 기본적으로는 콘텐츠를 구성하는 방법있다. 예를 들어, 당신은 거기 헤더를 가지고, 그래서 당신은 헤더 태그를해야 할 것입니다 그것은 아마 다른 태그가 될 것입니다 그 안에 텍스트를 가질 것입니다. 그럼 당신은 어떤 다른 링크와 함께 아마 사이드 바있다, 그 모든 별도의 태그에있을 것입니다. 그래서, 그 중심에 기본적으로 HTML 페이지를 분할하는 방법입니다 방법 당신은 결국 포맷합니다. 그래서 다시, 당신은 그 전에 봤어요. 당신은 지금 작업을 꽤 익숙해 당신이 희망 마지막 PSET을 수행 한 점을 감안, 그래서 아무 문제가 없습니다. 

그런 다음 당신은 기본적으로 디자인 정적 측면을 모두 처리하는 CSS있다. 그것은 모든 색상, 다른 요소의 위치를​​ 모두 취급 것 그들이 서로에 대해 이동하는 경우, 얼마나 큰 그들은 당신이 가진 것 위치 지정의 종류입니다 - 당신이 아래로 스크롤 할 때 머물 수 있도록 즉,이 일들이 해결 한 수 또는 당신은 다른 요소에 상대적으로 일을 할 수 있습니다. 물건의 종류의 모든 CSS입니다. 또한, 당신은 다른 장식을 할 수있는, 당신은 텍스트의 색상을 가지고 있습니다, 텍스트 효과, 그런 종류의 물건을 모두. 벤이 지난 주말에 정말 좋은 세미나를했다, 당신은 CSS와 몇 가지 멋진 일을 할 계획이라면 그래서 나는 확실히 그것을 확인합니다. CSS3 실제로 CSS의 최신 버전이며, 그것은 정말 좋은 모든 종류의 것들을 할 수 있습니다. 그것은 그라데이션을 할 수있는, 당신은 좋은, 둥근 모서리를 가질 수 있습니다, 당신은 물건의 모든 종류의 작업을 수행 할 수 있습니다 귀하의 웹 사이트가 더 현대적이고 멋진 보이게. 

다음 도구는 자바 스크립트와 벤에 대해 조금 이야기 jQuery를합니다 하지만 난에 조금 더 멀리 얻을 것이다. 자바 스크립트, 당신이 강의에 그것과 조금하고, 또는 적어도 살펴본 바와 같이, 종류의 동적 HTML에서 물건을하는 방법입니다. 당신이 HTML을 일단 당신이 그것을 수정할 수 있도록 HTML, 당신도 알다시피, 정적입니다. 그러나 자바 스크립트는, 어떤 방법으로, HTML을 수정할 수있는 방법입니다. 그래서 당신은 그렇게 할 수 있고, 그 좋은,하지만 자바 스크립트는 실제로 작동하는 고통이다. 심지어 간단한 일을 너무 오래과 둔각 그리고 자바 스크립트의 라인을 많이 필요로합니다. 그래서, jQuery를 기본적으로이 모든 것을 단순화 자바 스크립트에 대한 라이브러리입니다. 왼쪽에서 오는 사각형 상자를 가지고 싶은 경우는, 좋아,라고 그것은 걸릴 것 자바 스크립트로, 중간에의하도록하고 페이지에 페이드 - 나는 백 라인이해야 할, 모르는, 그리고 통증이있을 것 당신은 웹 프로그래밍에 대한 모든 것을 미워 나올. JQuery와 당신은 기본적으로 그런 요소 - 점 - 페이드 인, 또는 무언가가있다. 당신이 멋진 애니메이션의 모든 종류의 작업을 수행하게됩니다 그래서, 매우, 매우 간단한 기능 그리고 그런 종류의. 이러한 2는 정말 좋은 다른 것은 단지 동적 일을하고있다 웹 사이트와. 그래서, 오히려 당신의 HTML 페이지를 가지고보다 - 사실없는 일부 데이터를 표시하지만 않는 아무것도 - 자바 스크립트와 jQuery를 당신이 클릭 할 수 버튼을 드릴 것입니다, 당신은 요소와 순서가 다시 드래그하고, 정렬하고 새로운 요소를 포함 할 수 있습니다 추가 또는 제거. 당신은 추가 삭제 할 수 있습니다, 그런 종류의 물건을. 그래서, jQuery를 멋진 물건의 톤을한다. 그리고 Vipul 님은 실제로 5시에, 저는 믿습니다, 오늘의 세미나를주고있다, 당신이 오랫동안 곁에 있습니다 경우에, 그 것 - 5 또는 4? 네. 미안 해요. 그것은 바로이 후 실제로, 그래서 나는 추천 할 것 당신이 할 수있는 경우에 더 머물. JQuery와 슈퍼, 슈퍼 유용합니다, 당신은 그것으로 정말 좋은 일을 많이 할 수있을 것이다 거의 모든 웹 개발 프로젝트. 

지금은 구별의 일종으로 얻을거야. 나는 사용자 인터페이스에 대해 기본적으로 이야기 했어요. 사용자 인터페이스는 사이트의 바로 디자인입니다. 그러나 사용자 경험입니다 종류의 다른 개념이있다. 두 사람은 매우 다릅니다. 인터페이스는 확실히 경험의 일부입니다. 당신이 사이트를 방문 할 때 즉, 당신은 인터페이스를 확인합니다. 즉, 사이트를 경험하는 방법의 일부입니다. 그러나 사용자 경험은 그 이상입니다. 사용자 경험은 사용자가 사이트에서 얻는 느낌이 무엇인지에 대한 것입니다. 그래서, 분명히, 인터페이스는 그 일부입니다. 그리고 그것은 확실히 필요한 부분이긴하지만 충분하지 않습니다. 당신이 좋은 인터페이스를 가지고있는 경우 즉, 그것은 예쁘고 화려하고 그 전부, 잘됐다,하지만 사용자가 귀하의 사이트로 이동하는 경우, 꽤 레이아웃을보고하고이 혼동 것 모든 것이 아무것도 할 방법을 모르고있다, 다음 분명히 당신은 정말 만들었다 가난한 웹 사이트. 즉, 사용자 경험은 어디에서 오는 일종의 나는 UX 디자인에 대해 조금 이야기하려고 해요 - UX는 사용자 경험에 대한 짧은 - 당신은 당신이 좋은 사용자 경험을 가지고 있는지 확인하는 방법의 일종. 첫 번째 포인트는 사용자가 작업을 수행 할 수있는 당신이 웹 사이트를 디자인 할 수 있다는 것을 이 사용자는 가능하십니다. 그러나 사용자는 그 일을하는 방법을 알아낼 수없는 경우 - 즉, 그들은 당신의 사이트를 방문 할 때 사용자가 좋은 생각이없는 경우, 내 프로필을 업데이트 할 경우 "아, 그때 난에 게시하려면이 버튼을 클릭하거나, 사람의 벽, 그때는 벽에 가서 작은 상자를 클릭하십시오. " 사용자가 알고하지 않으면, 당신은 효과적으로 실제로이 제대로 그 기능을 구현했습니다. 기능 구현의 일부는 사용자가 실제로 그것을 사용할 수 있다는 것이다. 당신이 사이트를 만들 수 있습니다, 그것은 모든 종류의 작업을 수행 할 수 있습니다 - 그리고 그것은 좌절 수 있습니다 멋진 물건,하지만 당신은 사람들이 그것을 테스트하고이 작업을 수행 할 수 없습니다 "라고해야합니다. , 왜?이 작업을 수행 할 수 없습니다 "당신은 그들에게 다시 말씀 드리죠 "음,. 당신은이 모호한에 7 드롭 다운 메뉴에 들어갈 수 있습니다 단지 오른쪽 아래 모서리 "또는 무언가 링크에 의해 발견되는 페이지입니다. 물론, 당신은 그것을 원하지 않는다. 당신은 그들이 뭘해야하는지 사용자에게 명확하게 할 심플하고 직관적이어야한다. 

당신이 시도 할 또 다른 점은 누군가가 당신의 사이트로 갈 경우에,이다 9 (10)의 타임 아웃 액션을하고, 1 ~ 10의 타임 아웃 액션 B를 수행, 당신은 아마 액션 A.에 대한 자신의 경험을 집중하고 싶어요 즉, 당신은 매우, 매우 명확한 방법 A.을 수행 할 수 있도록 할 해야 프론트와 센터는 -를 참조 사이트로 이동, 아, 바로 거기에 있습니다. B 반면 분명히 분명히하고 싶은,하지만 당신은 좀 더 둘 수 있습니다 백그라운드에서. 다윗은 강연이의 좋은 예를 보여주고 있습니다 이는 보스턴 T 시스템입니다. 당신이 보스턴 T에 가서 티켓을 구입하고자 할 때, 당신은 당신이 실제로 티켓을 구입하기 전에 5 메뉴로 가야 이 지하철을 타고 차지하는입니다 $ 2, $ 2.50 값에 대한 한 방향으로. 즉, 문제의 때문에 지하철을 타고 대부분의 사람들 아마, 한 장소에 가서 자신의 티켓을 구입, 지금 당장에 싶어. 그것은 그들이 다른 메뉴를 많이 통과해야하는 것이 이해가되지 않습니다 이 얻을 수 있습니다. 더 나은 사용자 경험을 첫 페이지에 대한 빠른 버튼 것 그건 그냥 '편도 티켓을 구입'라고하고 그 표준을 모두 넣을 것 기본값, 다음 사람이 그와 다른 티켓을 구입하고자하는 경우, 그들은 여전히​​ 물론, 할 수있는 옵션이 있습니다,하지만 당신은에 최적화 한 정말 중요한 공통 사용 사례. 당신이 바로 페이스 북에이의 예를 볼 수 있습니까? 당신은 페이스 북에 가서 상태를 게시 할 경우, 그것은 당신이 자주 수행 할 작업입니다 오른쪽 상단에 있습니다. 즉시 페이지를 입력 할 때, 당신은 가장 일반적인 작업을 수행 할 수 당신은하고 싶습니다. 당신은 같은 좀 더 복잡한 작업을 수행 할 경우, 내 친구의 벽에 가서 거기에 사진을 게시하고 싶은 말은 - 나는 종종 수행 할 수 있지만 자주 상태 업데이트를 게시 등 고객님은 - 그래서 그 경우는, 자신의 프로필을 클릭 상단에있는 상자에 자신의 이름을 입력 내가 프로필에받은 일단 다음, 아직도, 그것은 바로 거기 상단에 있습니다. 다시 말하지만, 나는 가장 일반적인 사용의 경우에 우선 순위를 최적화했습니다. 

또 다른 중요한 점은 종종 사람들이 종류의 이러한 문제를 해결하기 위해 노력할 것입니다 오케이, 말, 그래서 사이트를 변경 한 사람들은 혼란을 찾고있다, 그것은 바로, 문제입니까? 물론, 나는 사람들이 내 사이트의 내용에 의해 혼동되고 싶지 않아. 하지만 그것을 해결하는 방법은 무엇인가 말을 팝업이 아니다 이봐, 내가 어떻게이 사이트를 사용하는 방법을 가르 칠거야. 1 단계 -이 버튼을 클릭합니다. 2 단계 - 여기에서. 물론, 그 주위에 방법 - 당신이 무엇을하는 사람을 말할 수있는 방법,하지만 그건 정말로 최적의 방법. 나는 웹 사이트에 가서 갑자기 나는 나를 말하고이 튜토리얼 포격있어 경우 무엇 가서 그 모두에 수행하고하는 것은, 그 날 재미 아니다. 그것은 나를 위해 좋은 경험이 아니다. 그것은 고통의 종류입니다. 그냥 물건을 일을 시작하려고합니다. 사람들은 자신의 대화 상자에서 종료 예정 또는 자습서 나가, 무엇을 해야할지, 다음 불평 때문에 당신이 그들을해야 할 일을 말하지 않았다. 이 문제를 해결하는 방법은 자습서 또는 방향의 모든 종류를 제공하여 아니다 - 그런 건. 만큼 당신이 그것을 피할 수있는, 당신이 정말로 무엇을 사용자에게 보여주고 싶은 다만 웹 사이트가 배치되는 방식의 특성상. 즉, 내가 로그인하지 않고 페이스 북에 가면, 내가 메인 페이지에 표시되는 첫 번째 것은 - 조금 로그인 상자입니다. 그래서, 대만족입니다. 나는 그것은 바로 거기에 로그인 할 수 있습니다. 반면에, 나는 페이스 북에 가서 바닥에 작은 링크를 클릭해야한다면 '로그인'라고하고 페이지의 나머지 부분은 그림 또는 무언가의 단지 어떤 종류의 것을, 제가 정말, 무엇을 해야할지하지 않을까요? 나는 혼동 될 것이다. 그래서, 아래로 가서 로그인 버튼을 클릭하여 말해 줄 수 또는 버튼에서 로그 내가 그것을 볼거야 상단에 잘 될 수 있었다. 당신은 항상 수행 할 작업을 사용자에게 표시되도록하려면, 그리고 그 페이지 자체에 내재해야한다. 

당신이 디자인에 대해 생각하고 다른 방법을 조롱 할 때 당신의 위치를​​ 표현하는, 당신은 정말 사용자가가는 일에 대해 생각하고 싶지 당신은 무엇을 보여줄 수있는 방법을 수행 할. 마지막으로 하나는 테스트가 정말, 정말 중요합니다. 친구를 얻을, 당신이 알지도 못하는 사람을 얻을 - 누군가를 얻기 위해 중대하다 - 이 사이트를 사용하기 전에 사이트를 본 적이 누구. 당신이 시간 동안 현장에 종사하고 있기 때문에, 당신은 그것을보고있어, 당신은 분명히 당신에게 테스트 될 것입니다 정확하게 그렇게 할 알고 만약에 당신이 일을 알고 일한지 일. 그러나 다른 사람이 나타나서 전에 그것을 사용하지 않았다 사이트를 사용하는 경우, 당신이 사전 지식이없는 사람이 있기 때문 독특한 경험의 사이트가 그것으로, 그래서 그들은 효과적으로하도록 할 어떤 생각을 예정하고 있지 않습니다의 또는 사용의 경우 어떤 종류의 그들을 위해 존재한다. 잘 됐네. 그들은 본질적으로 마음의 빈을 가진 사람이기 때문에 그 고유의. 뭔가 혼란 또는 불분명 한 경우에는 말할 수 있습니다. 그들은 당신에게 당신의 사이트의 사용자 경험은 정확하게 무엇의 아이디어를 줄 수 있습니다. 내가 당신을 격려 할 것입니다 그래서 확실히하는 것이 자신을 구별하는 것은 아주 어려울 수 있습니다 당신은 당신의 프로젝트를 개발하고로 - 당신은 웹 기반 프로젝트를 수행하는 경우 - 이미 당신이 기능 데모의 몇 가지 종류가 같은 사이트를 사용하는 사람들을 얻을 수 있습니다. 

지금은 웹 개발 프로젝트를 관리하는 방법에 대해 조금 이야기하려고 해요. 우리는 당신이 기술적 인 백 엔드 측을 할 수있는 방법에 갔어요 당신은 정말 좋은 사이트를 디자인 할 수있는 방법, 당신은 자신이 작업 만하는 경우와 정말 멋져요 - 당신은 자신이 작업하는 경우에도 당신이 팀에 최선을 다하고 특히, 프로젝트 관리는 큰 문제가된다. 당신은 종류의 이후 다른 형태의 프로젝트 관리에 대한 소문은 들었지만 초등학교 당신이 그룹의 일을 이야기했을 때. 당신은 모든 의사 소통, 협력해야합니다. 그게 아직도 여기에 적용되지만, 일부 고유 한 상황이있다 당신이 알고 있어야 할, 당신은 당신이 잘 처리 있는지 확인하려면 컴퓨터 과학. 난 당신이 안으로있을 것이다 팀에 대해 먼저 조금 얘기하자 이 작업 할 수있는 팀의 적당한 크기를 선택하는 것이 매우 중요합니다, 및 최종 프로젝트에 당신이 선택할 수있는 옵션이 있다고 생각 1 ~ 4 명이 올바른 해요 경우. 당신은 단지 사람의 수를 선택하지 않을 있는지 확인하려면 당신은 친구이기 때문에 작업 할 것을. 당신은 좋은 크기의 팀을 선택하고 그 작업을 수행 할 얻을 것이다. 적은 사람에 비해 더 많은 사람들이 가지고있는 무역 오프가있다. 당신이 더 많은 사람이있는 경우, 분명히 더 많은 작업을 수행 할 수 있습니다 당신은 많은 사람들이, 많은 코드, 아이디어를 많이 가지고 있기 때문에 그 모든 위대한입니다. 그러나 그것은 또한 더 많은 관리와 더 많은 의사 소통을 필요로한다. 즉, 동일한 프로젝트에서 작업 사명이있는 경우 그들은 모두 더 많거나 적은 그들이 필요로하는 모든 종류의 알고, 동일한 코드를 편집하는 무슨 일이야 것은 그래서 당신이 필요합니다 - 당신은 몇 가지 새로운 기능을 추가하는 경우는 종류의 사람들에게 얘기를 해 - 난이 추가, 나는이 방식이 변화하고있어 - 당신은 정말 깊은 물건에 들어갈 특히 실제로 사이트가 작동하는 방법에 영향을하고자하는 모델과 컨트롤러 등을들 수있다. 전체 팀은 그것을 인식해야 그래서 당신은 당신이 힘든 것 너무 큰 팀을 선택하지 않을해야 그 통신을 확인합니다. 당신은 또한 당신이하지 않을거야 충분히 작은 팀을 선택하고 싶지 않다 그것은 단지 당신 때문에 의사 소통을 할 수. 

고려해야 할 또 다른 점은 사람들의 능력이있는 곳의 균형입니다. 모든 정말 좋은 프로그래머가 있다면 좋을 것입니다. 모든 백엔드 사람들이 있다면, 그때 당신의 위치가 매우 좋지 않을 것입니다 당신이 큰 데이터베이스를 가지고 있고, 그것은 슈퍼 빠른 검색 쿼리를 수행하기 때문에 - 위대한입니다 -하지만 당신이에 갈 때, 그것은을 가진 1990의 사이트처럼 빨간색과 파란색 도처에, 그리고 그 좋은 중 하나 없습니다. 나는이 종류의 더라서 벤 나는 팀으로 작업이 아주 좋은 것을 알 수 프론트 엔드에서, 우리 모두는 중간 결국 상호 작용, 그리고 벤 백엔드 물건 정말 좋은 우리가 어떤 사이트를 디자인하고 기본적으로 구멍을 할 수 있기 때문에 그래서 정말 잘 작동합니다 작성해야 할 해당 사이트에 우리 중 하나, 또는 아마도 둘 다에 의해 채워질 수있다. 당신은 당신의 팀에 구멍이 없는지 확인합니다. 중복의 비트가 있다면 괜찮아. 즉, 당신은 모두 백 엔드와 좋은 이명이있는 경우, 그들은 문제를 서로 도울 수 있기 때문에 그뿐만 아니라 좋은 수 있습니다 그들이 겪고있다. 당신은 어떤 일에 대한 책임의 한 사람이있는 경우에 문제가 될 수 있습니다 그들은 문제로 실행하는, 그래서 당신은 중복을 조금 갖고 싶어 하지만 가장 중요한 것은 가능한 홀 모두가 작성되었는지 확인 싶어. 

마지막으로 -이 분명해야하지만, 그것은 종종 아니다. 당신은 정말 재미가되고 싶어요. CS50의 마지막 프로젝트의 포인트와 일반적으로 웹 개발의 자주 점 이 일을해야하기 때문에 그냥 일을하지 않는 것입니다. 당신은 정말 재미있을 싶어, 당신은 뭔가를하고 싶지 즉, 그 일에 당신을 동기를 부여 있어요. 당신이 무엇을하고있는 것은 앉아서에서 작동하는 고통, 경우 당신이 바로 그 프로젝트를 선택 아닙니다. 당신은, 당신이 흥미있는 무언가를 선택합니다 당신이 정말로 결과를보고 싶은 당신에 대한 새로운 아이디어를 얻을 때, 당신은 흥분 그래서 프로젝트의 모든 종류의 내가 확신하는 것이이있다 - 당신이 할 수있는 일 당신이 찾을 수 있습니다 - 모든 사람이 그들을 정말로 호기심을 자극 할 뭔가가있다 그들은 웹 기반의 프로젝트를 수행하는 경우. 지금은 다시 말을합니다. 프로젝트가 고통처럼 보인다 당신이 그것을 작동하지 않는 경우, 다른 프로젝트를 선택합니다. 정말 당신을 고무 무언가를 선택합니다. 

벤 반복 비트의 개념을 언급, 나는 그 위에 비트를 가고 싶어요. 그것은 당신이 기능 무언가를 얻기 분출에서 일하기 정말 중요합니다. 당신이 A, B 및 C를 할 것 웹 사이트에 대해이 계획이 있다면 그것은 훌륭한 될 수 있습니다 결국은 거기에 도착합니다. 하지만 당신은 당신이 작업하고 작업하고이 단계에 갇혀있어, 그러나 아무것도 이루어지지지고있어. 당신이 볼 수있는 아무것도 유형, 기능적인 것이 없습니다. 당신은 정말 때때로 고통의 종류를 보이는만큼 수행 할 작업 뭔가 작업을하고 실행, 안정적인 적어도의 있도록 다음 종류의 그것을 떨어져 모자 당신이 원하는 모든 기능을 가지고 있지 않는 경우에도 버전. 그리고 어쩌면 당신은 정말 추가하고 싶지만 당신이 할 수없는 몇 가지 기능이 있습니다 당신은 기능적인 점에이 사이트를하고 싶어하기 때문이다. 그래서 당신은 종류의 전체 개발 프로세스가 저렇게 갖고 싶어. 또는 기본적으로 아무것도 시작 - 만약 당신이 어딘가에 기능을 시작하려면 - 하지만 당신은 어딘가에 아주 기본적인 기능적인 싶어. 그리고 다시, 점프의 종류를 확인하고 다시 어딘가 기능 얻는다. , 당신은 천천히 만들 것이고, 그것은 그렇지 않으면 것보다 조금 느리게 갈 수도 하지만, 장기적으로는 지속적으로이 중간 단계에 갇혀 있다면 어디 실제로 작업 아무것도 없어, 그것은 정말 큰 좌절이 될 수 있습니다 당신은 항상 작업을 얻기에 너무 가까이이기 때문에 당신의 프로젝트에 대한 작업을하려면, 그리고 그것은 실제로 작동 적이 없어요. 이러한 기능 분출에서 작업 할, 당신은 또한 각 후 일부 반사를하고 싶다. 즉, 당신이 사이트가 지금 작동되는 점에있어 일단 - 그것은 당신이 원하는 모든 것을 가지고 있지 않지만 몇 가지 일을한다 - 당신이 생각하고 싶지, 그래, 내가 할 규정 된 목표를 달성이 사이트입니까? 즉, 사이트가 X을가는 경우에, I는 X 방향으로 일이 무엇입니까? 내가 거기에 원하는 기능의 모든 있으신가요? 그리고 또한, 내가 원하는 전체의 목적을 제공하고있다? 당신은 당신의 사이트가 다른 방향으로 바꾸다 시작되어 발견하는 경우 아니면 일이 어쩌다 튀어 작동하지 않습니다, 그것은 기어를 조금 이동하는 시간이있을 수 있습니다. 즉, 그것은 고려 가치가있다 - 필요한 경우는 아이디어를 던지고 가치 그리고 생각 난 정말이 원하는 것을 위해 노력하고 있습니다. 

나는 그것이 내 옆에 점 믿습니다. 아이디어를 포기하는 것을 두려워하지 마십시오. 당신은 기능에 근무 시간을 많이 소비해서 그리고 마지막으로 그 작업을 했어요하지만 정말 잘하지 않을 것입니다 - 그것은 그 유용하지의 또는 사용자는 그것을 사용하는 데 문제가있는 것처럼 - 그런 종류의 물건을 - 그것을 버릴 것을 두려워하지 않습니다. 그것은 당신이 작업에 시간을 많이 소비하는 것이 짜증, 그러나 궁극적으로 당신은 종류의이 조각에 의해 함께 넣어 것 사이트를 싶지 않아 일의 종류 만이 그 잘 제공되지 않습니다. 또한, 새로운 아이디어를 수용하는 것을 두려워하지 않습니다. 누군가가 따라 와서 야,이 사이트는 정말 멋진하지만 보이는 말한다면 그것은 또한 이런 짓을하면 그것도 좋은 것 같지 않아? 그것은 당신이 의도하고 있지 뭔가하지 않았다 뭔가해서 당신의 스펙, 당신이 밖으로 설정하지 않은 것을, 그것을 가지고 다음 작업을하는 것을 두려워하지 않습니다. 당신이 개발 과정 전반에 걸쳐 실행 종종 생각하기 때문에 웹 사이트의 정말 멋진 기능 끝나게. 

나는 전에이 말을했습니다. 난 다시 그것을 말할 수 있습니다. 테스터는 최고입니다, 슈퍼 유용합니다. 에 로그인하고 무슨 일이 일어나고 있는지 확인하기 전에 사이트를 본 적이없는 사람들을보십시오 그들이 사이트와 사용자 경험의 유용성을 시험 할뿐만 아니라 때문에, 그들은 또한 당신이 할 수없는 방법으로 기능을 테스트 할 수 있습니다. 당신은 어떤 일을 몇 가지 기능을 한 경우 그리고 당신은 그 위대한 제대로 그 같은 일마다 한 시간을 할 것 알고있다. 하지만 종종 사용자의 힘 코너 케이스를 설명하기 어려울 수 있습니다 당신은 정의하기 때문에 정확하게 - 당신이 기대하지 않은 일을 입력 기능을 직접. 그래서, 누군가가 사이트를 사용하는 방법을 모르고있다 누가달라고하는 단지 그들이 할 수있는 어떤 방법으로 그것을 깰 정말 유용합니다 당신 때문에 노력하고 귀하의 사이트에 어떤 완전히 다른 관점에서 아이디어를 얻을 수리를 어떻게해야합니다. 

마지막으로, 나는 몇 가지 일반적인 모범 사례에 대해 이야기하는거야 당신은 CS50 이러한 많이 본 적이 있지만 그들은 또한 정말, 정말 프로젝트 설정에 적용됩니다. 하나는 의견이다. 당신이 큰 팀에서 작업하는 경우 항상 특히 코드를 주석으로 처리합니다. 누군가가 기록 난 그냥 코드의 거대한 블록이 너무 성가신 수 있습니다 어쩌면, 어쩌면 그렇지, 작동하지만, 당신은 무엇을 아무 생각이 그래서 당신은 그것이 거기에 여부를할지 여부 또는 유용하거나하지 여부 아무 생각이 당신이 뭔가 다른 작업을하는 경우 그것은 당신이 작업하고있는 것으로도 가능 같은 일이, 그래서 그냥 동료를 배려하는 것은 매우, 매우 신중해야 및 쓰기 코드를 잘 문서화가. 당신이 증가하면 좋아하는 모든 일을 할 것처럼 지금까지 갈 필요가 없습니다 카운터는 난이 카운터에 1을 추가 해요,라는 의견이있다. 그것은 그 상세한해야하지 않지만 혹시 작성하는 모든 기능에 대한 당신은 그 기능이 정확히 무엇의 일부 문서가 있어야합니다 그 입력은 무엇인지, 그리고 그것을 반환해야하는지. 당신이 사이트의 다른 사람의 구성 요소를 사용할 수있는 방법 당신은 큰 무언가를 구축하는 방향으로 작업 할 수 있습니다. 

또 다른 중요한 것은 당신이 정기적으로 클린 업을 수행 할 수 있습니다. 코드가 지저분 해집니다. 코드 그냥 완전히 읽을 수와 거대한 엉망이면 기분 나빠하지 마십시오. 즉, 항상 웹 개발에서 발생합니다. 당신은 오래된 것들을 제거, 새로운 기능을 추가하고 있습니다. 물건이어야한다 그이 될 것입니다. 괜찮아요,하지만 당신은 정기적으로 그와 거래를 확인하고 싶다. 당신은 당신이 무엇을 찾을 수있는 곳이 시점까지 구축 할 싶지 않아 코드에서, 당신은 아무것도 무엇을 아무 생각이 없습니다. 즉, HTML의 경우입니다. 때때로 당신은, 아무것도 포함하지 않는 개체를하게 될 겁니다 당신은 사람들을 제거하는 것이 좋습니다. CSS에서, 당신은 더 이상 존재하지 않는 요소를 참조 할 수있다 그래서 당신은 그 코드를 제거합니다. 자바 스크립트에서, 당신은 HTML에서 뭔가를 제거 할 수도 있습니다. 그래서, 당신은 꽤 물건 만들기, 당신은 항상 청소하고 있는지 확인하려면 사용자가 정기적으로 할 수있는만큼. 

내가 생각하지 않는 또 다른 정말 유용한 물건은 CS50에 많이 설명되어 있습니다 하지만은 버전 제어에 점점 가치가있다. 당신은 기본적으로 모든 진행 상황을 추적 할 때 버전 관리의 아이디어는 당신은 당신의 사이트를 향해 만들었습니다 어떤 시점에서 당신이 생각하는 경우에, 오,이 일하는 얼마 전하지만 더 이상 작동하지 않습니다, 당신은 이전 버전으로 돌아갈 수 있습니다 다음과 그런 종류의 물건 이후의 변경 사항을 참조하십시오. 이 작업을 수행하는 가장 기본적인 방법은 망할 놈의 부착, 힘내 시스템이 모든 종류입니다 토미 MacWilliam 작년에 대한 세미나를했다 생각합니다. 당신이 2011 CS50 세미나에 가면, 당신은 그의 세미나를 볼 수 있습니다. 망할 놈의 아이디어는 정기적으로 이러한 약속을하고 있다는 것을 기본적으로 사이트가 지금은 꽤 안정 버전의 말하는 방법되는 그래서 내가 그것을 포장 및 서버에 멀리 전송 한 다음 해당 서버에 갈 수있어 그리고 코드의 모든 이전 버전을보고이 진행 어떻게 볼 좋은 물건의 모든 종류. 그래서 그것은 기본적으로이다. 지금까지 웹 개발, 우리는 곁에 어떤 답변을 드리겠습니다 질문까지 우리의 프레젠테이션과. 그거야. 감사합니다. >> [벤] 감사합니다. [박수] 

[빌리] 직원, 누군가는 우리가 다룬 것들에 대한 질문이 없습니다 또는 우리는 그들이 기대하고 있다고이 적용되지했습니다 일들이 우리 커버 것? 우리는 그 답변을 드리겠습니다. 누군가? [청중 회원] 루비를 사용하여 파이썬을 사용하는 장점과 단점은 무엇입니까? [벤] 문제는 루비 또는 Python을 사용의 장점과 단점은 무엇입니까했다 대신 PHP 등을들 수있다. 전문가들은 루비와 파이썬은 PHP보다 훨씬 더 나은 언어 있음이다. 적어도 내 생각에, 나는뿐만 아니라 다른 사람들의 의견을 많이 생각합니다. 그들은 복잡한 물건을 수행하기위한 더 많은 설계되었습니다 과 함께 정말 빠르게 웹 페이지를 함께 구타 덜 동적 콘텐츠의 약간. 단점은 조금이 있다고합니다 - 학습 곡선의 더있어 그들을 설정 얻을 수 있습니다. 즉, PHP처럼, 당신이 HTML 파일을 가질 수 있고, 당신은보다 적게보다는 쓰기입니다 물음표, 다음 코드를 작성하고 당신이 물음표를 쓰고, 보다 더 큰, 다음 작업을 완료. 루비 또는 파이썬과 같은 다른 언어로 당신은 초기 사이트 실행을 얻기 위해 조금 더 많은 작업을 통과해야합니다. 도있다 - 적어도 케이스로 사용 - 더 많은 문서가 있음 PHP를 위해 그것을 사용하여 더 많은 사람들이있다해서. 나는 그것이 더 이상 문제의 그와 같이 생각합니다. 루비 온 레일스 (Ruby on Rails) 같은 물건에 대한 아주 좋은 문서는 확실히있다 파이썬에 대한 장고에 해당합니다. PHP 사람들이 년 동안 사용하는 바로 그 사람입니다, 당신은 그것이 작동하는 방법을 알고있다. 루비와 파이썬은 조금 덜 성숙. 

[청중 회원]을 배우거나 데리러 그들 중 하나를 선택할 것 인 경우에, 어떻게 하겠어? 솔직히, 난 그 사람에 따라 생각합니다. 미안 해요. 문제는 사람이 배울 수있는 당신이 선택하는 것입니까? 파이썬 개인적으로 가장 좋은 찾을 수 있습니다. 내가 파이썬과 장고에 내 첫 번째 웹 dev에 프로젝트 한 - 많은 사람들이있다. 또한 레일에 루비를 좋아하는 많은 사람들이있다. 루비 온 레일즈를 알고 아마 더 많은 사람들. 솔직히, 난 그냥 당신 주위의 사람들이 알고있는대로 갈 것 당신은 질문을하는 사람이되도록. 

질문은 - 공유 서버에 그것의 종류의 하드 파이썬에서 작동하는 것입니다? 즉, 호스팅에 따라 달라집니다. 파이썬 물건을 게시 할 예정입니다 웹 호스트의 숫자가 있습니다. WebFaction, 오른쪽이 무엇입니까? WebFaction 빌리와 내가 몇 가지 프로젝트에 사용하고 하나입니다. 그들은 정말 좋은입니다. 그들은 대부분의 언어를 지원합니다. 하지만 PHP는 훨씬 더 광범위하게 지원되는 것은 사실이다. 당신 만 PHP를 수행하는 웹 호스트에 붙어있어 경우에 따라서, 즉 PHP를 사용하는 이유입니다. 

[청중 회원] 난 그냥 데이터베이스를 쿼리하는 방법을 학습에있어, 그리고 난 내 SQL 사방 알고 있지만 최근에 노출있어 - 그리고 당신은 그것을 지적했다. 당신은 JSON과 확장 데이터베이스를 참조하십시오. 내 SQL은 도처에 아직도있다. 어떻게 이런 일이 일어날 볼 수 있습니까? 거기에 더 확장 (들리지 않음)에 대한 경향이 점차 증가 될 것입니다? 질문은 - 나는 비-SQL 데이터베이스를 향한 경향이있을 거라고 생각 하냐. 예를 들어, MongoDB에있다. 그 확실히 사실이라고 생각합니다. 내 조언은 대부분 MySQL은 만 있기 때문에 여기에 MySQL의 관련되었다 업계 표준. 개인적으로, 나는 많은 MongoDB를 같은 schemos이없는 데이터베이스를 선호 당신은 문제가없는 곳, 오, 나는 또 다른 열을 추가 할 필요가있다. 화가 나는 무엇을해야합니까 같은 날입니까? 그것은 MySQL을 그렇게하는 것은 매우 어렵지만, 당신은 몽고과 같이있을 때 훨씬 더 좋은입니다. 몽고에 대한 또 다른 좋은 점은 당신의 기록이 실제로 자바 스크립트 객체는 것이다. 당신이이 데이터베이스 행을해야 변환 단계의 어떤 종류가 없습니다 과 자바 스크립트 객체로 만들어 놓을 후 네트워크를 통해 보냅니다. 나는 그런 물건은 미래에 빠른 웹 개발을위한 매우, 매우 유용 할 것입니다 생각합니다. 

[빌리] 난 그냥 일반적인 점입니다 추가 할 뭔가입니다 우리가 토론 한 모든 언어를 습득해야 기분이 안 우리의 세미나에서. 물론 포인트는 당신에게 거기에 무엇의 아이디어를 제공하는 것입니다 당신이 우리가 언급했던 것들 중 하나에 관심이 있다면 당신은 그들을 구글 수 그들에 읽어. 앞에서 언급 한 바와 같이, 정확히 이런 일을 처리 몇 가지 세미나가 있습니다. 나는 그 아마 들어갈 언급하지 않은 더 많은 세미나가 있습니다 이 물건뿐만 아니라. 아이디어는 당신이 뭔가 작업을하고 싶은 경우에, 여기 당신의 처분에 도구 점이다. 이러한 도구가 정확히 무엇을 정말 확실하지 않은 경우 흥분하지 말라, 그러나 그들이 거기에서 그리고 당신이 그들의 광범위한 사용을 할 수 있다는 거 알아 구글에 의해. 

[청중 회원] 사물의 어떤 종류의 당신은 당신의 웹 사이트를 확인하려면 어떻게해야합니까 모바일 장치에서 잘 보인다? [빌리] 모바일 디바이스는 조금 어렵다. 당신이 접근 할 수있는 방법은 2 가지입니다. 첫 번째 방법은 당신이 실제로 모바일 웹 사이트를 가지고있다. 즉, 처음에 감지 어떤 종류의 수행 브라우저는 말한다 하나 귀하의 웹 사이트에 요청하는 경우 이보기를 반환 - 데스크톱 또는 랩톱 브라우저의보기가 될 것이다 - 모바일 장치에이 다른보기. 즉, 뷰가 거의 교환 할 수 있다는 점에서 정말 좋은입니다 장소 두 개의 출력 및 모바일 장치에서 정말 잘 작동하는 인터페이스가 브라우저 장치에서 잘 작동 완전히 다른 하나가 있습니다. 그 문제는 그것이 코딩을 의미하기 때문에 장시간이 소요이다 완전히 다른 인터페이스를 제공합니다. 당신이 그것을 할 수있는 다른 방법입니다 - 현대 전화의 많은 웹 사이트를 표시하고 브라우저 에서처럼을 렌더링하기 위해 노력할 것입니다 그들은 자신의 최선을 다하고 있습니다. 당신은 종류의 당신이 사용하고있는 jQuery를 자바 스크립트의 양에 빛을 유지하기 위해 시도 할 수 있습니다 이는 일이 잘못 조금 갈 수있는 경향이있다. 이것은 당신이 많은 시간이없는 경우 사용해야하는 방법의 일종이다. 당신은 모바일 인터페이스에서 작업하는 시간이 경우에, 그것은 분명히 당신의 최선의 선택입니다. 

나는 일반적으로 CS50 프로젝트를 위해, 당신은 둘 중 하나를 선택하려는 것 같아요. 즉, 당신은 모바일 응용 프로그램을 만들고 싶어하거나 바탕 화면의 웹 사이트를 만들고 싶어. 당신이 그와 함께 갈 곳 그리고 그 종류의 결정합니다. 나중에 그것을 확장 할 경우에, 아마 당신의 최선의 방법입니다 기타 다른 인터페이스를 만들 수 있습니다. 나는 워드 프레스 기반 사이트 개발에 경험이 조금 있습니다. 나는 잠시 워드 프레스에 개인 웹 사이트를 호스팅하고 있습니다. 프레임 워크의 그 종류가 좋은 단지 매우 기본적인 것들을 할 수 있습니다. 때때로 당신은 비록 커스터마이즈의 많은 문제로 실행됩니다. 당신은 어떤 특정 방법을 찾거나 특정 방법이 될 수있다 할 것이다 이 시스템에 하드 와이어드 때문 그리고 당신은 할 수 없기 때문에 이것은 당신이 약간의 문제가 될 수있는 일을해야 할 방법이다. 그 이후로 나는 종류의 처음부터 사이트로 작업하는 경향있었습니다. 블로그 데이터베이스와이 프레임 워크를 구축하기 위해 정말 어렵지 않다 그런 종류의 물건과 같은 것들에 대한. 당신이 정말 시간을 뻗어 경우에, 당신은 물론 워드 프레스 같은 것을 사용할 수 있습니다 또는 블로그에 대한 그런 종류의 물건. 물건의 종류가 블로그 저장하고 할 수 있습니다 정말 열심히 그 당신이 일 이러한 종류의로 실행하는 경우, 당신은 아마도 최고예요 사내 버전을 확인합니다. 

그 그것에 대해 생각, 그래서 다시 한번 감사와 주셔서. 우리가 정말 두분 즐기고 당신이 어떤 물건을 알게되기를 바랍니다. [벤] 우리는 얘기를 행복 - 우리가 가야하지만, 우리는 더 많은 외부의 얘기를 행복 당신은 다른 질문이있는 경우. 다시 한 번 감사드립니다. [박수] [CS50.TV]