에릭 허시 웹 디자인 및 개발

나는 자신있게 내가 합법적 인 사업처럼 내 판타지 풋볼 리그를 실행하는 것을 말할 수있다. 이 브랜드를 구축하는 스프레드 시트,문서 및 데이터베이스를 만드는 데 몇 시간을 보냈습니다. 허락하신다면,고객 기반은 작고 일반적으로 십여 명의 남성과 여성으로 구성됩니다. 그러나 챔피언은 회사만큼 좋다. 즉,회사는 합법적이어야합니다.

리얼 판타지 풋볼 리그는 2005 년에 만들어졌습니다. 자신과 저스틴 벤라인에 의해 의뢰. 우리는 매년 여러 리그를 개최하고’젤리 빈’의 상당한 금액에 대해 재생할 수 있습니다. 새로운 소유자를 우리들에게 그들의’젤리 빈’을 주는 보충하,얻기 위하여는,우리는 반박 상표를 붙이 만들것을 필요로 했다. 나는 또한 매년 내 통계를 알고 좋아(이 바이-더-방법 살아남을-숫자 게임이다).

작업:우리는 데이터베이스가 필요합니다

10 년대 초반에 엄청난 양의 웹 사이트를 만들지는 않았지만 몇 가지 예외를 만들었습니다. 내 친구 데이브 워드 프레스에 저를 소개하면,나는 손 대고 시작했다. 새로운 무언가를 배우기에 제일 접근은 애완 동물 계획사업을 발견하,놀기 시작한것을 이다. 이 호텔은 좋은 선택처럼 보였다. 2011 년 11 월 13 일,저는 기본 웹페이지를 만들었고,일부 웹페이지를 소개했습니다. 사이드 바에서 동적 머리글,바닥 글 및 일부 회전 배너 광고를 만들었습니다. 이 사이트는 매우 복잡하지 않았다 그러나 소유자의 목록과 몇 가지 기본 정보를 포함 않았다. 전년 대비 사이트를 업데이트하는 것은 기계에 의존했다. 수동으로 승리/손실 기록을 계산하기 위해 수학을하고 각 이미지를 하드 코딩하는 것은 고통이었습니다. 사이트의 나의 마음에 드는 부분은 기록과 통계이었다,그러나 그것은 또한 가장 좌절을 발생.

그 당시에 더 좋은 방법이 있는지 몰랐습니다. 내 블로그에 대한 워드 프레스에서 연주했지만 정말 데이터베이스의 힘을 인식하지 않았다. 대학안에,나는 아주 기본적인 접근 과정을 가지고 가고 데이타베이스가 일하는 까 라고 그러나 결코 생각하지 않았다 인터넷을 달리고 있었다 것 을 배웠다. 난 그냥 큰 웹 사이트의 모든 수동으로 레코드를 추가 수백명의 사람들에 의해 처리 된 가정 같아요.

데이터베이스 언어

집에 머무는 아빠로 지명 된 후,나는 새로운 것을 배우기 위해 자유 시간을 이용했습니다. 내 첫 번째 프로젝트는 시행 착오를 많이했다. 내 판타지 축구 사이트는 새로운 수준으로 내 능력을 복용했다.

첫 번째 애완 동물 프로젝트는 약간의 혼란 이었지만 현대 웹 개발의 원칙을 배웠습니다.

드라이-자신을 반복하지 마십시오. 절대 코드를 복제해서는 안 됩니다. 그것을 한 번 쓰고 너의 페이지로 그것을 가져오기 위하여 어떻게 파악하십시요. 데이터베이스는 이것을 가능하게 합니다. 데이터베이스를 사용하는 방법을 배우는 것은 내가 마스터해야 할 것이 었습니다.

팀 트리 하우스의 도움으로 Lynda.com,나는 언어의 언어를 발견하고 배웠다. 이 시점에서,나는 또한 꽤 고급했다. 웹 사이트 및 데이터베이스에서 데이터를 검색 할 수 있습니다,당신은 자신에게 꽤 스마트 웹 사이트를 가지고있다. 내 팀 이름과 통계를 수동으로 입력하는 대신 데이터베이스의 여러 테이블에서 가져올 수 있습니다.

감사합니다 부트 스트랩

나는 쉬는 동안 많은 학습을했습니다. 나는 프레임 워크에 대한 모든 것을 배웠다. 나는 기초라는 프레임 워크로 시작하고 부트 스트랩으로 이동. 그것이 들리는 것처럼 어리석은,나는 그것이 트위터를 소유 한 사람들에 의해 만들어 졌기 때문에 부트 스트랩을 선호한다고 생각합니다.

프레임 워크 란 무엇입니까?

다시 한번,나는 꽤 순진했다. 대학에서 그들은 프레임 워크를 언급 한 적이 없습니다. 나는 모든 것이 손수 처음부터 모든 시간을 만든 줄 알았는데. 그렇지 않습니다.

우리의 친구 위키 백과는 부트 스트랩을 다음과 같이 설명합니다:

부트스트랩은 반응형,모바일 우선 프런트 엔드 웹 개발을 위한 무료 오픈 소스 프레임워크입니다. 타이포그래피,양식,버튼,탐색 및 기타 인터페이스 구성 요소에 대한 자바 스크립트 기반 디자인 템플릿.

위키 백과

대신 처음부터 스타일과 그리드를 모두 만들 필요없이,부트 스트랩이 만든 모든 것을 가지고 있으며,당신은 자신의 스타일을 수정합니다. 시간 절약에 대해 이야기!

그리드,글꼴 및 스크립트-오 마이!

부트 스트랩은 더 복잡한 항목의 일부를 만들 당신에게 단축 코드의 모든 유형을 제공합니다. 나는 자바 스크립트에서 마법사가 아니지만 부트 스트랩을 사용하면 캐 러셀,아코디언 및 기타 매우 일반적인 웹 사이트 기능을 쉽게 만들 수있었습니다.

나는 내 이전 사이트보다 타이포그래피와 방법이 더 창조적 얻을 수 있도록 우리는 쉽게 구글 글꼴에서 글꼴을 호출 할 수 있습니다. 우리는 심지어 글꼴 아이콘을 사용하고 그래픽을 만드는 시간을 절약 할 수 있습니다.

무엇보다도 부트 스트랩은 그리드가 이미 만들어 졌으므로 다양한 화면 크기에 상호 작용하고 적응할 수 있도록 디자인을 사용자 정의 할 수 있습니다. 이 자동으로 모바일 친화적 인 사이트를 만들어 반응 인 구글에서 좋은 범프를 얻을 것입니다.

부트스트랩은 몇 가지 기본적인 스타일과 심지어 몇 가지 편리한 프디디 와이어프레임 파일과 함께 제공되기 때문에,디자인을 시작할 때였다.

업데이트 브랜드

이 RFFL 브랜드에 의해 만들어에서 사고 mid-’00. 내가 찾는 글꼴,입력한’RFFL’,추가 스트로크와 외부의 빛이라는 하루입니다. 그것은 새로 고침에 대한 시간이었다.

사용자 특성

많은 상황에서,나는 온라인 깊은 다이빙을하고 잠재 고객에 대한 몇 가지 심각한 연구를 꺼내. 이 경우-나는 내 인생의 대다수를위한이 청중의 핵심 그룹을 알고있었습니다.

나는 내 친구가 좋아하는 밴드,축구 팀,정치적 견해를 알고 있지만-나는 그들이 웹을 사용하는 방법을 단서가 없었다. 몇 가지 도구의 도움으로,나는 캐릭터 페르소나를 구축 할 수 있었고,자신의 사용자 경험을 돕기 위해 웹 사이트의 기능과 디자인에 대한 전략을 수립 할 수 있었다.

플랫 디자인

이 프로젝트의 시작 부분에서 일반적인 웹 및 그래픽 디자인 트렌드는 플랫 디자인이라고 불 렸습니다.

위키백과에 다시 물어보자–평면 디자인은 무엇인가?

평면 디자인은 3 차원(그림자,그라디언트 또는 텍스처 사용 등)의 환상을 제공하는 문체 요소의 최소 사용을 강조하는 인터페이스 디자인 스타일이며 단순한 요소,타이포그래피 및 평면 색상의 미니멀리스트 사용에 중점을 둡니다.

위키 백과

플랫 디자인은 내가 가고 또한 부트 스트랩에서 미리 만들어진 항목에 아주 잘 연주 정확히 것입니다. 나는 로고로 시작하고 그 모든 스트로크와 빛을 제거 할 것입니다.

타이포그래피와 폰트

주로 웹 사이트에 초점을 맞추고 있지만,인쇄 작업도 공평한 분배를 합니다. 그것은 내가 웹에서 사용할 수 있는 글꼴을 발견 하 고 그것을 일관 되 게 모든 컴퓨터에 표시 하는 것이 중요 했다. 구글 글꼴이 쉽고 유연했다. 시행 착오의 무리를 수행 한 후,나는 오스왈드와 조세핀 산세의 글꼴 조합을 결정했다. 두 글꼴 모두 다양한 무게,케이스 및 크기로 작동했습니다.

색상

새로운 스타일은 동일하게 유지되지만 몇 가지 새로운 음영을 던집니다. 나는 많은 검은 색을 흰색 공간으로 대체 할 것입니다.

메인 웹 사이트에 슈퍼 유행하지 않지만,우리는 우리의 개인 리그를 의미하는 파란색,녹색,빨간색을 사용합니다. 이러한 정적 광고 및 인쇄 담보의 많은 놀이로 서.

웹 사이트에서 일어나는 일

브랜드의 일반적인 표정으로 디자인을 시작할 준비가되었습니다. 대부분은 이것이 펜/종이 또는 디지털 아트 프로그램을 나가는 것으로 시작한다고 생각할 것입니다. 아뇨 그것은 내용으로 시작합니다.

내용 먼저

초기에 나는이 웹 사이트는 다음을 수행 할 것이라고 결정:

• 우리의 쉬운 연결있으십시오 MyFantasyLeague.com 웹 사이트
• 소유자 및 팀 역사 제공
• 리그에 대한 규칙,규정 및 득점의 고향이 되십시오
• 모든 승패 및 득점 기록 계산 및 나열
• 일대일 기록 표시

이전 사이트에서 더 이상 시간을 낭비하고 싶지 않은 것 외에도,내가 새로운 팀을 만들게 된 주된 이유는 웹 사이트는 소유자 머리 대 머리 결과를 표시했다. 게임 데이에 상대를 쓰레기 이야기보다 더 아무것도 실제 데이터를 사용하는 것은 훨씬 더 있습니다.

웹 사이트 개요

웹 사이트에서 원하는 모든 페이지의 목록을 만드는 것이 좋습니다. 당신은 웹 사이트의 구조와 어떤 페이지가 중첩되어야하고 어떤 페이지는 독립형 만들 수 있습니다. 보통,난 그냥 워드 문서를 꺼내 정렬되지 않은 목록으로 목록을 시작합니다.

모든 페이지가 나열되면 글쓰기를 시작할 준비가되었습니다. 약간의 계획으로,나는 대부분의 페이지가 매우 상세하지 않을 것이라고 생각. 소유자 페이지를 위해,약간은 생물 할텐데. 나는 규칙을 복사하여 붙여 넣고 조금 포맷 할 것이다. 페이지에 대한 대부분의 콘텐츠는 실제로 통계 및 동적으로 가져온 것입니다.

코딩 또는 디자인 준비가 되었습니까?

웹 사이트 디자인

나는 무거운 리프팅이 미래에 이루어질 것이라는 것을 알고 있었다. 나열된 기본 정보를 모두와 함께,나는 종이를 꺼내 그냥 상자를 그리고 사이트의 일부 손으로 그린 버전을 할 수 있습니다. 복잡한 것은 없지만 다음 단계를 위해 필요합니다.

와이어 프레임

부트 스트랩에서 포토샵과 와이어 프레임 파일을 꺼내는 것이 편안하다고 느꼈습니다. 옛날에,당신은 단지 하나의 마스터 와이어 프레임 파일을 가질 것이고 당신은 바탕 화면에 대한 디자인 것입니다. 반응 형 디자인으로 각 페이지에 대해 네 가지 버전을 포맷하고 디자인했습니다.

부트 스트랩을 사용하면 네 개의 주요 중단 점이 있습니다. 1309>

• 초소형
• 초소형
• 초소형
• 초소형
• 초소형

이들은 모두 화면 크기와 직접 관련이 있습니다. 휴대 전화 및 리터 거래 대형 데스크톱을 처리. 각 페이지가 스크린에 따르고 전화와 큰 스크린에 사용하기 쉬웠다 고 중요했다.

유니버설 스타일 치트 시트

나는 웹 사이트에 반복해서 사용되는 몇 가지 요소를 가지고있을 것입니다. 버튼은 사이트 전반에 걸쳐 동일한 것. 제목 및 링크에 대한 특정 클래스는 특정 방식으로 스타일이 지정됩니다. 나는 가서 이러한 스타일에 대해 별도의 포토샵 문서를 만들었습니다. 이 방법으로 와이어 프레임의 폴더/레이어를 드래그 앤 드롭 할 수 있으며 모든 것이 일관됩니다.

모바일 우선 디자인

부트스트랩이 구축되어 사이트 및 디자인의 모바일 버전으로 시작합니다. 모바일 화면에서 디자인을 마치면 다음 크기로 이동합니다.

이것이 항상 가장 쉬운 것은 아닙니다. 그래픽 디자인에서 우리는 그래픽을’더 크게’만들려고 노력하는 것이 종종 래스터 화와 흐릿함을 생성한다는 것을 알고 있습니다. 하지만 때로는 대형 데스크탑을 설계하고 아래로 이동하는 것이 더 쉽습니다. 이 상황에서,나는 내 화면에 엑스와 엘 버전을 모두 가지고 동시에 둘 다 조금했다.

브라우저에서 디자인

사이에 몇 가지 작은 단계가 있다고 가정하면 다음 큰 움직임은 목업과 와이어 프레임을 웹으로 가져가는 것입니다. 페이지별로 페이지를 채우기 위해 페이지를 만들기 시작했습니다. 내 단어 문서에서 내용을 복사하고 각’카테고리’에 대해 하나의 자리 표시 자 페이지를 만듭니다. 나는 몇 가지 독특한 페이지 구조를보고 있었다:

• 홈페이지–다른 페이지에 비해 완전히 고유
• 소유자 목록–데이터베이스에 의해 당겨
• 소유자 단일–데이터베이스에 의해 당겨
• 시즌/리그 목록–데이터베이스에 의해 당겨
• 시즌 단일–데이터베이스에 의해 당겨
• 레코드–데이터베이스에 의해 당겨
• 규칙–정적

이 페이지의 골격은 매우 유사했습니다. 나는 하나 시작하고 조각의 모든 스타일. 클래스와 아이디를 사용하여 이러한 스타일이 향후 사용을 위해 쉽게 액세스 할 수 있는지 확인했습니다. 많은 시간 후,나는 프레임 워크 스타일과 갈 준비를했다. 우리가 지금 필요로 한 모두는 데이타베이스를 창조하,정보를 안으로 당긴것을 이었다. 쉽게 말하기는.

데이터베이스 딥 다이브

이 프로젝트를 시작했을 때 나는 초보자였으며 결국 망할 전문가가되었습니다. 나는 모서리를 잘라 또는 내가 원하는 기능 중 하나를 제거하지 않을 것이라고 결정했다. 이것은 내가 필요한 정확한 정보를 가져 오는 방법을 알아내는 시간과 시간 및 작업 시간을 의미했습니다.

데이터베이스의 기본 규칙

첫 번째 큰 데이터베이스 프로젝트를 통해 테이블에서 테이블로 정보를 반복해서는 안된다는 어려운 방법을 배웠습니다. 이러한 레코드를 연결할 수 있으며 필요한 정보를 호출하는 데 정교한 코드를 사용해야 합니다. 조금 더 많은 훈련과 더 많은 시간 테스트를 통해 계획에 대한 모범 사례를 배웠습니다.

나는 인덱스 카드,포스트잇 노트를 사용하고,마지막으로 스프레드 시트를 생성-내 데이터베이스의 상세한 개요와 각 테이블에 갈 것 모든 필드를 만들었습니다. 이를 통해 일부 기록의 결혼과 그들이 어떻게 상호 작용 하는지를 쉽게 이해할 수있었습니다.

엑셀 데이터베이스 치트 시트

예,당신은 모든 것을 입력 할 수 있습니다. 몇 가지 프로젝트를 통해 서식이 지정된 엑셀 시트를 만들어 전체 시트를 복사하여 붙여 넣을 수 있습니다. 스프레드 시트에서 데이터를 읽고 바로 밀어 넣을 수 있습니다. 이 절대 시간을 절약 할 수 있습니다.

데이터베이스 작업 얻기

이것은 도전이었습니다. 나는 단지 몇 줄의 코드를 호출하지 않았다. 나는 개별 판타지 축구 게임 데이터를 가져 와서 개별 소유자의 승리,손실,점수,수입,게임 등으로 웹 사이트를 구축하려고 노력했습니다…

나는 이것에 거의 한 달 이상을 보냈다;나는 여기에 대해 더 많이 타이핑하면 심각한 플래시백이 생길 까봐 두렵다.

일러스트 레이터 및 그래픽

나는 어도비 일러스트 레이터에 경험이 있습니다. 대학과 고등학교에서 나는 많은 프로젝트를 만들었고 모든 도구를 배웠습니다. 내 그래픽 기술(많은)광고를 돌아 다니지 않기 때문에 녹슬 게됩니다. 이 믹스에 다시 얻을 일부 사용자 정의 그래픽을 만들 수있는 좋은 기회였다.

재교육 과정 후 Lynda.com,내 사이드 바 일부 그래픽을 필요로 결정했다. 나는 그들이 웹사이트를 유익할 수 있는 까 라고에 관하여 것 또는 2 개을 배웠다. 나의 이력서에 다른 특기 및 약간 지견을 추가하십시요.

테스트 및 실행

자신을 테스트하는 것은 클라이언트를 테스트하는 것보다 조금 쉽습니다. 당신이 문제를 볼 때,당신은 그것을 기록하고 당신은 그것을 해결. 또한 당신의 자신의 위치를 개발하고 당신의 자신의 주제를 만드는 것은 당신이 가는 때 당신이 시험하고 있는 때 시험하기 위하여 약간을 남겨둔다.

발사는 다소 유사했다. 이전 리플 링 사이트가 트래픽을 거의받지 못했고 오프 시즌이었다는 것을 고려할 때,나는 다운 타임에 대해 많이 걱정할 필요가 없었습니다. 단추의 간단한 스위치에,우리는 인터넷에 아주 새로운 위치가 있었다.

최종 생각–데이터베이스 하드 코딩 된 웹 사이트

나는 최종 결과에 대해 그렇게 열정적이지 않았다면 이런 일이 일어나도록 코드의 시간을 겪었을 지 확신 할 수 없다. 시간에,나는이 많은 워드 프레스 또는 백엔드 씨엠으로 수행 할 수 있다는 것을 깨달았다. 손으로 코딩 된 웹 사이트를 갖는 이점이 있지만(속도 점수를 확인하십시오),프로젝트에 몇 달을 소비하는 것과 같은 네거티브도 있습니다. 워드 프레스에서 이러한 게임 기록을 끌어 거기 솔루션(가)아마있다,나는 백엔드 학습 데이터베이스와 쿼티에서 나를 훨씬 더 만든 생각합니다.