출제양식



Similar documents
순 서 1. 직종설명 1 2. 경기과제에관한사항 2 3. 사용재료 경기장구성및배치 경기장시설 ᆞ 장비목록 경기진행절차 채점에관한사항 안전관리 공통사항 적용시기 주요개정사항 31 [

Windows 8에서 BioStar 1 설치하기

View Licenses and Services (customer)

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

1

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Web Scraper in 30 Minutes 강철

개정일 : ` 직종설명서 직종명 : 금형 (Plastic Die Engineering)

H3250_Wi-Fi_E.book

게임 기획서 표준양식 연구보고서

SIGIL 완벽입문

[Brochure] KOR_TunA

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

SBR-100S User Manual

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사

볼륨 조절 아이콘 표시하기 만일 알림 영역에 볼륨 조절 아이콘이 표시되지 않았다면 아래의 방법을 따라합니다. 1> [시작] - [제어판] - [사운드 및 오디오 장치] 아이콘을 더블 클릭합니다. 2) [사운드 및 오디오 장치 등록 정보] 대화상자에서 [볼륨] 탭을 클릭

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

PDF_Compass_32호-v3.pdf

<4D F736F F D D31312D30312D53572D30312DBBE7BFEBC0DABCB3B8EDBCAD5FBFDCBACEB9E8C6F7BFEB2E646F63>

1809_2018-BESPINGLOBAL_Design Guidelines_out

B2B 매뉴얼

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

Microsoft PowerPoint - 권장 사양

PowerPoint Presentation


안 산 시 보 차 례 훈 령 안산시 훈령 제 485 호 [안산시 구 사무 전결처리 규정 일부개정 규정] 안산시 훈령 제 486 호 [안산시 동 주민센터 전결사항 규정 일부개정 규

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

슬라이드 1

MF Driver Installation Guide

공지사항

순 서 1. 직종정의 1 2. 작업범위 1 3. 경기과제에관한사항 1 4. 사용재료 7 5. 경기장시설및선수지참목록 7 6. 경기진행절차 채점에관한사항 공통사항 적용시기 18 [ 별첨 ] 대회별경기일정 ( 예시 )

쏘니표지

WebRTC 플러그인이 필요없는 웹폰 새로운 순수 VoIP 클라이언트 기반의 최신 WebRTC 기술은 기존 레가시 자바 클라이언트를 대체합니다. 새로운 클라이언트는 윈도우/리눅스/Mac 에서 사용가능하며 Chrome, Firefox 및 오페라 브라우저에서는 바로 사용이

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P

설치 순서 Windows 98 SE/Me/2000/XP 1 PC를 켜고 Windows를 시작합니다. 아직 컴퓨터에 프린터를 연결하지 마십시오. 2 PC에 P-S100 CD-ROM(프 린터 드라이버)을 삽입합니다. 3 설치 프로그램을 시작합니다. q CD-ROM의 PS1

쉽게 풀어쓴 C 프로그래밍

1

Microsoft Word - LTL-XL RSC vers Nov. 08 _Korean Version_.doc

PowerPoint Template

온라인등록용 메뉴얼

PowerPoint 프레젠테이션

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

Microsoft Word - src.doc

마지막 변경일 2018년 5월 7일 ** 이항분포와 정규분포의 관계 ** Geogebra와 수학의 시각화 책의 3.2소절 내용임. 가장 최근 파일은 링크를 누르면 받아 보실 수 있습니다.

Microsoft Word - 김완석.doc

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

슬라이드 1

대표이사등의확인서명( ) I. 회사의 개요 1. 회사의 개요 1. 연결대상 종속회사 개황(연결재무제표를 작성하는 주권상장법인이 사업보고서, 분기ㆍ 반기보고서를 제출하는 경우에 한함) (단위 : 백만원) 상호 설립일 주소 주요사업 직전사업연도말 자산총액 지배

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

Microsoft PowerPoint - 02_Linux_Fedora_Core_8_Vmware_Installation [호환 모드]

System Recovery 사용자 매뉴얼

윈도우시스템프로그래밍

품질검증분야 Stack 통합 Test 결과보고서 [ The Bug Genie ]

rv 브로슈어 국문

디지털 공학

ThinkVantage Fingerprint Software

mobile_guide_SA

NCS : ERP(SAP) ERP(SAP) SW IT,. SW IT 01., 05., 06., 08., 15., , 05. SW IT,,,, SAP HR,,, 4,,, SAP ABAP HR SCHEMA, BSP,

MF3010 MF Driver Installation Guide

춤추는시민을기록하다_최종본 웹용

IRISCard Anywhere 5

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로

TTA Journal No.157_서체변경.indd

PowerPoint 프레젠테이션

고객 카드

서현수

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

4S 1차년도 평가 발표자료

KPS-19MA-1.hwp

Microsoft Word - Korean_뷰어 메뉴얼_공용_ADVR&SWi_.doc

Scene7 Media Portal 사용

목 차 1. 드라이버 설치 설치환경 드라이버 설치 시 주의사항 USB 드라이버 파일 Windows XP에서 설치 Windows Vista / Windows 7에서 설치 Windows

*2008년1월호진짜

Windows Live Hotmail Custom Domains Korea

Microsoft PowerPoint - chap01-C언어개요.pptx

MF5900 Series MF Driver Installation Guide

Nero StartSmart 설명서

tiawPlot ac 사용방법

마켓온_제품소개서_ key

부서: 기획감사실 정책: 지방행정 역량 강화 단위: 군정운영 및 의회협력 행정협의회 분담금 20,000,000원*1식 20, 행사운영비 2,000 2,000 0 행정협의회 지원 2,000,000원*1식 2,000 의원상해 지원 36,000 36,

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E C8A3292E687770>

목 차 DEXTUpload Pro 소개 시스템 요구 사항 기능 및 특징 시스템 구성도 벤치마킹 적용 효과 유지보수 안내 담당자 안내

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

사용하기 전에 2

슬라이드 1

<목 차> I. 출장 개요 1 II. 주요일정 2 III. 세부내용 3 1. 전자공증체계 3 2. 전자공증 시스템 및 서비스 절차 4 3. 전자공증서비스 현황 6 4. 기타 7 IV. 국내 전자공증제도 도입 시 검토의견 9

,, 55 * 1., * 2 80, 140.,. Z, 3.,. *1: A4. ApeosPort-V ApeosPort-V ppm. *2: (A4 ), ( ), 200 dpi. : 55 ppm* : A3 Super G3, : 80 ppm : 140

2007

User Guide

Studuino소프트웨어 설치

pdf

Transcription:

기능경기대회 과제출제 양식 (지방, 전국대회, 선발 및 평가경기) 직 종 명 : 웹디지인 및 개발 출제 위원 : 작성 일자 : 201... (인) 검토 위원 : 검토 일자 : 201... (인) 한 국 산 업 인 력 공 단

제51회 전국기능경기대회 분 과 전기전자 정보처리 직 종 명 웹디자인 및 개발 경기시간 12시간 Website Design 과제 과제 소개 MODUS는 IT 상품 판매 가상 웹사이트이다. MODUS는 당신의 디자인이 반응형이길 바란다. 반응형 웹사이트는 사용자가 웹사이트에 컴퓨터, 태블릿이나 스마트폰으로 접속하기 위한 최적의 보기 경험을 제공하는 것이다. Siyelo 웹사이트의 새로운 디자인을 개발하고 세 가지 디바이스들에서 보여질 내용과 레이아웃을 결정하는 것이다. 프로젝트와 과제 설명 당신의 작업은 MODUS를 위한 웹사이트와 로고의 디자인을 제작하는 것이다. 당신은 당신의 디자인에 사용될 텍스트와 이미지를 제공 받았다. 당신은 제공받은 이미지와 텍스트를 모두 사용할 필요는 없지만, 당신의 웹사이트가 전체적으로 좋은 이미지를 주기 위한 충분한 텍스트와 이미지가 있다는 것을 알아야 한다. 당신이 원한다면 다른 텍스트와 정보를 추가할 수 있다. 텍스트는 내용과 관계없이 디자인만 채점된다. 사이트 내용 구조 헤더 - 로고, 네비게이션, 검색버튼 메인 메뉴 - 7개의 링크 환영 - 환영 제목, 텍스트와 이미지 OUR TEAM - 이미지, 버튼과 강조된 항목 카테고리별 링크 버튼 - 2 -

푸터 - 회사 정보 + 카피라이트 텍스트 당신은 사이트 내용 구조 에서 정의된 대로 사이트의 각 내용 부분의 같은 이미지들을 사용해야만 한다. 파일 생성 사이트 디자인은 실제 픽셀 사이즈로 보여져야 한다. 각 이미지는 각 스크린에서 페이지 접힘을 암시하기 위해서 해당하는 스크린 해상도에 정확하게 보이는 테두리도 4 픽셀 보다 작은 넓이로 포함해야 한다. 로고타입을 제외한 원본 디자인의 디자인 아이템은 당신의 제출 작업에 사용되지 않을 수 있다. 선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.png - 태블릿: XXX_Tablet_mockup.png - 스마트폰: XXX_Smartphone_mockup.png 추가 이미지들은 웹사이트의 개발에 도움이 될 숨겨진 요소들, 애니메이션이나 다른 추가 정보를 강조하기 위해 생성될 수 있다. 이미지들의 소스파일을 XXX_Website_Design 폴더 내 XXX_source_files 폴더에 저장하시오. 소스파일들은 레이어들을 포함하는 파일이다. - 3 -

Website Design 과제 채점표 번호 구분 평가내용 배점 1 주관 로고는 웹사이트 이름인 EnviroFund 정체성을 갖고, 제공된 웹사이 트의 테마와 연관된다. 2.00 2 주관 디자인은 이미지와 텍스트의 좋은 균형을 보여준다. 2.00 3 주관 공백이 디자인의 명료함을 증진시키기 위해 사용되었다. 2.00 4 주관 디자인들은 정의된 타겟 청중에게 매력적이다. 2.00 5 주관 디자인의 품질과 요소들의 독창성이 디자인 내에 사용되었다.. 2.00 6 객관 파일과 소스파일이 알맞은 파일 포맷으로 제출되었다. 1.00 7 객관 사이트 내용 구조에 정의된 대로 디자인 레이아웃이 완성되었다. 14.00 계 25-4 -

Website Design 과제 최종 작품 - 5 -

Website Layout 과제 과제 소개 Siyelo는 IT 상품 판매 가상 웹사이트이다. Siyelo는 당신의 디자인이 반응형이길 바란다. 반응형 웹사이트는 사용자가 웹사이트에 컴퓨터, 태블릿이나 스마트폰으로 접속하기 위한 최적의 보기 경험을 제공하는 것이다. Siyelo 웹사이트의 새로운 디자인을 개발하고 세 가지 디바이스들에서 보여질 내용과 레이아웃을 결정하는 것이다. 프로젝트와 과제 설명 새로운 디자인 샘플들은 정의된 디바이스와 해상도에서 작동하도록 개발되어야 한다. 컴퓨터 (1440 가로 x 900 세로) 태블릿 (768 가로 x 1024 세로) 스마트폰 (320 가로 x 480 세로) 회사 설명 이름 : Siyelo 사업: 쇼핑몰 색상 : #dfe3e2, #c43c01 와 #8ccbd2 사이트 내용 구조 헤더 - 로고, 탑 메뉴 (home, sitemap, contact us), 텍스트와 이미지 검색 텍스트 입력과 검색 버튼 메인 메뉴 - 4개의 링크 (work team community contact) 환영 - 환영 제목, 텍스트와 2 개 이미지 새 상품 - 이미지, 가격, 텍스트, 지금 구입 버튼과 강조된 NEW 주요 상품 - 이미지, 가격, 텍스트와 지금 구입 버튼 카테고리별 상점 - 링크 소셜 미디어 - 3개의 소셜 버튼 (Facebook, Twitter, YouTube) 푸터 - 회사 정보 + 카피라이트 텍스트 - 6 -

고객은 아래 파일들을 당신에게 제공했다. 현재 웹사이트 샘플(HTML) 회사 로고(벡터와 레스터) 고 해상도 이미지(요청된다면 사용할 대체 이미지) 아이콘 소셜(요청된다면 사용할 대체 이미지) 당신은 사이트 내용 구조 에서 정의된 대로 사이트의 각 내용 부분의 같은 이미지들을 사용해야만 한다. 파일 생성 사이트 디자인은 실제 픽셀 사이즈로 보여져야 한다. 각 이미지는 각 스크린에서 페이지 접힘을 암시하기 위해서 해당하는 스크린 해상도에 정확하게 보이는 테두리도 4 픽셀 보다 작은 넓이로 포함해야 한다. 로고타입을 제외한 원본 디자인의 디자인 아이템은 당신의 제출 작업에 사용되지 않을 수 있다. 선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.png - 태블릿: XXX_Tablet_mockup.png - 스마트폰: XXX_Smartphone_mockup.png 추가 이미지들은 웹사이트의 개발에 도움이 될 숨겨진 요소들, 애니메이션이나 다른 추가 정보를 강조하기 위해 생성될 수 있다. 이미지들의 소스파일을 XXX_Website_Layout 폴더 내 XXX_source_files 폴더에 저장하시오. 소스파일들은 레이어들을 포함하는 파일이다. - 7 -

Website Layout 과제 채점표 번호 구분 평가내용 배점 1 주관 2 주관 요청된 세 개 모든 해상도/디바이스에 대한 디자인의 전체인상과 느 낌은 훌륭한가? 디자인은 가독성, 네비게이션, 리사이징, 스크롤링 등에 대해 적절하 고 참신하게 창작되었는가? 1.00 2.00 3 주관 디자인과 색상이 제공된 것처럼 회사 테마에 맞는다. 1.00 4 주관 보여지는 콘텐츠와 화면 해상도에 따른 변화가 균형이 맞는가? 1.00 5 주관 태블릿과 스마트폰이 터치 기반 디바이스에 최적화되었다. 대화형 기 능과 버튼 사이즈들. 2.00 6 객관 파일과 소스파일이 알맞은 파일 포맷으로 제출되었다. 1.00 7 객관 사이트 내용 구조에 정의된 대로 컴퓨터 레이아웃이 완성되었다. 2.00 8 객관 사이트 내용 구조에 정의된 대로 태블릿 레이아웃이 완성되었다. 2.00 9 객관 사이트 내용 구조에 정의된 대로 스마트폰 레이아웃이 완성되었다. 2.00 10 객관 HTML과 CSS에 사용된 코드를 설명하기 위한 내부 주석이 있다. 1.00 11 객관 12 객관 CSS가 W3C validator를 사용하여 3.0에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 코드가 W3C validator를 이용하여 HTML 5에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 1.00 1.00 13 객관 넓은 스크린 레이아웃(1280px 가로)은 제공된 스크린 이미지와 구글 크롬에 서 매치된다. 발견되는 각 에러마다 (0.25) 감점 1.00 14 객관 15 객관 16 객관 17 객관 18 객관 19 객관 좁은 스크린 레이아웃(720px)은 제공된 스크린 이미지와 구글 크롬에서 매 치된다. 발견되는 각 에러마다 (0.25) 감점 좁은 스크린 레이아웃(480px)은 제공된 스크린 이미지와 구글 크롬에서 매치된다. 발견되는 각 에러마다 (0.25) 감점 사이즈를 800px 로 줄이는 동안 스크린이 좁은 스크린 사이즈에 맞게 변경 된다. 발견되는 각 에러마다 (0.25) 감점 HTML 과 CSS 의 내부에 코드 사용을 설명하기 위해 코멘트 되었다. HTML 에 최소 5 개 이상 코멘트, CSS 에 최소 5 개 이상 코멘트. CSS 가 W3C 유효성 검사기를 사용하여 레벨 3 에 검증되었다. 발견되는 각 에러 타입 당 (0.25) 감점. HTML 가 W3C 유효성 검사기를 사용하여 HTML5 에 검증되었다. 발견되는 각 에러 타입 당 (0.25) 감점. 1.00 1.00 1.00 1.00 1.00 2.00 계 25-8 -

Website Layout 과제 최종 작품 - 9 -

Client Side 과제 1. 과제 소개 당신의 작업은 다음의 주요 기능(또는 내용)을 포함하는 어플리케이션을 만들어야 한다. Drag & Drop 또는 클릭하여 이미지 파일 선택 기능으로 차트를 표시한다. 제공된 템플릿은 다음과 같이 두 영역으로 구분되어 있다. 1. 차트 영역 : 이 영역 에는 데이터를 차트 형태로 표시한다 2. 바 영역 : 바를 왼쪽으로 드래그하면 원형 차트가 나타나고 오른쪽으로 드래그하면 삼각형 차 트가 나타난다. 3. 버튼 영역 : 버튼을 클릭하면 선택된 년도에 해당하는 데이터로 차트의 모양이 바뀐다. 과제의 요구사항을 완성하기 위한 다른 요소들은 선수 스스로 만들어야 한다. 선수는 필요하다면 영역들을 위한 새로운 그래픽 디자인 요소를 만들 수도 있고 사용성과 사용자 경험을 충족시키기 위한 스크립트를 추가할 수도 있다. 선수는 모든 이미지, 또는 정보는 Server가 아닌 Client Side에서 Local storage에 저장되어야 함 을 반드시 이해하고 작업해야 한다. 본 과제에 포함된 이미지는 과제를 시각적으로 표시하는 예시이므로 선수는 예시를 참고하여 과 제를 완성하되 반드시 예시와 똑같은 화면으로 구성할 필요는 없다. 선수 이행사항 1. 당신의 작업 파일을 XXX_Client_Side 폴더에 저장하시오. XXX는 당신의 등번호이다. - 10 -

2. 선수는 필요하다면 제공된 HTML과 CSS를 변경할 수 있다. 또한 필요하다면 그래픽 요소를 직접 제작하여 사용할 수 있다. 3. 애니메이션을 위해서 JavaScript 또는 CSS3 모두 사용할 수 있다. 4. 당신은 이 작업을 위해서 공통으로 제공된 JavaScript Library를 당신의 선택에 따라 자유롭게 사용할 수 있다. 단, 이 과제는 Client Side 과제이므로 Server Side 코딩(PHP, MySql 등)을 사용한 경우 과제 전체 또는 해당 부분을 평가 대상에서 제외할 것이다. 5. 이 작업은 3시간 안에 종료되어야 한다. 6. 이 과제는 Google Chrome 브라우저에서만 평가될 것이다. - 11 -

Client Side 과제 채점표 번호 구분 평가내용 배점 1 주관 어플리케이션의 Look & Feel이 훌륭한가? 2.00 2 주관 제공된 이미지와 동일하게 작성되었는가? 2.00 3 객관 이미지와 동일하게 그래프가 나타난다. 5.00 4 객관 바를 왼쪽으로 드래그하면 원형 차트가 나타나고 5.00 5 객관 바를 오른쪽으로 드래그하면 삼각형 차트가 나타난다. 5.00 6 객관 각 버튼을 클릭하면 선택된 년도에 해당하는 데이터로 차트의 모양 이 바뀐다. 6.00 계 25-12 -

Server Side 과제 과제 소개 국제기능올림픽대회조직위원회는 이전 대회의 결과를 분석하고 비교하고자 한다. 그들은 그들이 가 진 데이터를 이용하여 상호작용적인 웹 어플리케이션을 만들어 분석 결과를 관심 있는 사용자들에 게 제공하고자 한다. 이 웹 어플리케이션을 통해 사용자들은 이전 대회의 결과를 보다 시각적이고 다른 관점에서 데이터를 볼 수 있다. 당신의 작업은 국제기능올림픽대회조직위원회의 의뢰에 따라 이와 같은 목적의 서버사이드 웹 어플 리케이션을 제작하는 것이다. 프로젝트와 과제 설명 당신에게는 이전 대회의 자료가 XML 파일로 제공되었다. 사용자는 필요한 데이터를 XML에서 추출하여 화면에 표시할 수 있어야 한다. 화면에 표시할 데이터는 두 가지이다. 1. 국가별 직종 별 연도 별 메달 현황 표 국가별 직종 별 연도 별 메달 현황표는 선택된 국가의 2007년, 2009년, 2011년 3개 년도의 직종별 메달 종류를 표시하는 표이다. 이 표의 모양은 아래와 같다. 이 표에의 상단에는 XML 파일에 포함된 모든 국가 리스트가 콤보박스 형태로 표시되어야 한다. 국가리스트에 표시되는 국가 이름은 국가코드 - 국가이름 형식의 영문으로 한다(예, KR - Korea). - 13 -

표의 첫 줄에는 Trade, 2007, 2009, 2011 이 표시된다. Trade는 직종을, 나머지 숫자는 데이 터를 추출할 년도를 나타낸다. 첫 줄을 제외한 나머지 줄들에는 순서대로 직종번호와 직종명, 연도 별로 선택한 나라가 획 득한 메달 종류가 위의 표 예시와 같은 방식으로 표시되어야 한다. 제목 표시줄을 제외한 각 줄들의 정렬 순서는 직종 번호 순이다. 직종명은 17 Webdesign 과 같이 XML로부터 직종의 번호와 영문 명칭을 추출하여 표시 한다. 연도 별 데이터는 표 상단의 콤보박스에서 선택한 나라의 각 연도 별 메달 종류가 표시되어 야 한다. 메달을 획득하지 못한 년도의 칸은 빈 칸으로 표시된다. 이와 같은 방식으로 모든 나라의 모든 직종의 정보를 표에 표시한다. 국가가 선택되지 않은 경우 표는 첫 줄(칼럼의 타이틀 줄)을 제외하고는 다른 줄들은 표시되 지 않아야 한다. 국가선택 콤보박스는 선택이 변경될 때마다 자동으로 반영되어 표가 페이지 이동 없이 변경 되어야 한다. XML 코드를 읽고, 분석하고 화면에 표시할 표를 생성하는 코드는 반드시 서버사이드 코드 (PHP)로 작성되어야 한다. 즉, XML의 분석 및 분석 결과를 표시하는 코딩이 클라이언트 사 이드에서 이루어지면 안 된다. 단, 선택 시 AJAX를 활용하여 PHP 파일을 호출하고 결과 값 을 화면에 표시하는 것은 허용된다. JavaScript는 반드시 PHP 파일을 호출하고 PHP 파일로 부터 생성된 결과를 화면에 그대로 표시하는 역할만 한다. 2. 직종 별 연도 별 국가 별 점수 현황 그래프 이 그래프는 직종 별로, 연도별로 선택한 국가의 획득 점수를 아래 그림과 같이 꺾은선 그 래프 형식으로 보여준다. 그래프 표시 영역 위에는 직종(직종번호 직종명)과 국가(국가코드-국가명)를 선택할 수 있 는 콤보박스가 존재하여 선택이 변경됨에 따라 즉시 그래프를 변경한다. 직종, 국가 모두 빈값이 선택된 경우에는 그래프에 x축의 연도 표시와 y축의 눈금 외에 아 무 것도 그려지지 않는다. 직종만 선택되고 국가가 선택되지 않은 경우에는 선택된 직종의 2007, 2008, 2011년 전체국 가의 평균점수가 그래프에 표시되어야 한다. 직종과 국가가 선택된 경우에는 선택된 직종에서 선택된 국가가 연도별로 획득한 점수를 그 래프에 표시하여야 한다. 또한 선택한 국가의 선택한 직종의 연도 별 점수와 함께 전체 참 여 국가의 평균 점수가 다른 색으로 구분하여 표시되어야 한다. 그래프 우측에는 색깔별로 국가, 평균 등의 범례가 표시되어야 한다. 그래프는 x 축에 그림 예와 같이 2007, 2009, 2011 연도가 표시되어야 하며, y 축에 점수가 10 단위로 구분되어 표시되어야 한다. 숫자의 범위(최저점과 최고점)는 모든 숫자를 표시할 수 있는 것으로 개발자가 판단하여 정한다. XML 코드를 읽고, 분석하고 화면에 표시할 그래프를 생성하는 코드는 반드시 서버사이드 코드(PHP)로 작성되어야 한다(예, PHP의 GD를 이용한 그래프 그리기). 즉, XML의 분석 및 분석 결과를 표시하는 코딩이 클라이언트 사이드에서 이루어지면 안 된다. 단, 선택 시 AJAX를 활용하여 PHP 파일을 호출하고 PHP로부터 생성된 그래프 이미지를 화면에 표시하 - 14 -

는 것은 허용된다. JavaScript는 반드시 PHP 파일을 호출하고 PHP 파일로부터 생성된 결과 (그래프 이미지)를 화면에 그대로 표시하는 역할만 한다. 그래프 예시 * 위 그래프에서 3개의 선이 보이고 있으나 이는 예시일 뿐이고 실제로는 직종만 선택되고 국가는 선택되지 않았을 때는 녹색의 평균점수(Average)만 보여야 하고, 직종과 국가 모두 선택되었을 때는 선택된 국가의 그래프와 평균점수 그래프 두 개만 보여야 한다. 선수 이행사항 1. 이 과제의 수행시간은 3시간이며, 당신은 당신이 작업한 결과물을 XXX_Server_Side 폴더에 저장하여야 한다. XXX는 당신의 등번호이다. 3. 템플릿(레이아웃)은 과제의 media 폴더(디렉토리)에 저장되어 있으며 당신은 공통으로 제공된 PHP 또는 JavaScript 라이브러리들은 필요한 경우 자유롭게 사용할 수 있다. 4. 이 과제는 Google Chrome에서 평가될 것이다. - 15 -

Server Side 과제 채점표 번호 구분 평가내용 배점 1 주관 XML 데이터를 추출하고 처리하는 코드는 전문가다운가? 1.00 2 주관 어플리케이션을 구성하는 서버 측 코드들은 잘 조직되었는가? 1.00 3 객관 4 객관 5 객관 6 객관 7 객관 8 객관 9 객관 10 객관 어플리케이션을 열면 국가별 직종 별 연도 별 메달 현황표 가 제목과 함께 화면에 표시되고 표가 나타난다. 최초에는 선택된 직종이 없어 표의 타이틀 만 표시된다. 어플리케이션을 열면 직종 별 연도 별 국가 별 점수 현황 그래프 가 제목 과 함께 화면에 표시되고 최초에는 선택된 직종이 없어 눈금과 연도만 표시 된 빈 차트가 표시된다. 국가별 직종 별 연도 별 메달 현황표 위의 국가선택 콤보박스에는 XML에 포함된 모든 국가 목록이 국가 코드 오름차순 정렬로 국가코드-국가명 형 식으로 목록화 되었다. 이 데이터는 반드시 제공된 XML 파일로부터 추출되 어야 한다. 국가별 직종 별 연도 별 메달 현황표 위의 국가선택 콤보박스에서 국가를 선택하면 즉시 해당 국가의 직종별, 연도별 획득 메달이 과제 설명과 같이 XML에서 추출하여 표시된다. 국가별 직종 별 연도 별 메달 현황표 에 표시되는 직종은 직종번호-직종 명칭 형식으로 직종번호 기준 오름차순 정렬되었다. 직종 별 연도 별 국가 별 점수 현황 그래프 위의 콤보박스 중 국가는 선 택하지 않고 직종만을 선택하면 해당 직종의 평균 점수가 과제 설명에 따라 PHP 코드를 통해 꺽은선 그래프로 그려진다. 직종 별 연도 별 국가 별 점수 현황 그래프 위의 콤보박스에서 직종과 국 가를 모두 선택하면 과제 설명에 따라 해당 직종의 평균 점수와 해당 국가 의 해당 직종 연도 별 점수가 PHP 코드를 통해 꺽은선 그래프로 그려진다. 꺽은선 그래프의 각 선들은 서로 다른 색으로 구분되었고 우측으로는 각 선 의 색에 따른 범례가 표시되었다. 3.00 3.00 2.00 5.00 1.00 2.00 5.00 2.00 계 25-16 -

지급재료 목록 직 종 명 일련 번호 재 료 명 규 격(치 수) 단 위 1인당 소요량 공 동 소요량 1 CD 650MB 이상 장 1 1 비 고 선수 당 1장씩 (참고자료 CD는 경기장당 1개씩 지급해야 하므로 별도 구입) 2 CD라벨 114.5mm Diameter 개 1 선수 당 1개씩 3 CD케이스 개 1 선수 당 1개씩 4 복사용지 A4 장 10 선수 당 10장씩 5 복사용지 A3 장 10 선수 당 10장씩 6 XAMPP XAMPP 5.6.8 Portable for Windows 장 1 7 외장형 HDD 80GB 이상 대 1 8 9 10 11 12 13 14 15 16 17 18 19 20 경기장 당 1장씩 (참고자료 CD 에 함 께 수록) 경기장 당 1 대씩 (심사위원용) 선수들의 작품(비번호 폴더)저장 0-0 - 17 -

경기자 지참공구 목록 직 종 명 일련 번호 지 참 공 구 명 규 격 단 위 수 량 비 고 1 흑색 사인펜 개 1 필수 2 흑색 유성 네임펜 개 1 필수 3 마커 또는 색연필 색상은 자유 세트 1 필요시 4 키보드 컴퓨터용 개 1 필요시 5 마우스 컴퓨터용 개 1 필요시 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28-18 -

경기장 시설목록 직 종 명 웹 디자인 및 개발 일련 번호 1 시 설 및 장 비 명 규 격(치 수) 단위 수량 비 고 선수PC (최신사양) 2 Linux Server(웹용) IBM호환 최신기종 (RAM 8G이상), 사운드카드, 스피커 또는 헤드셋, 키보드, 마우스 등이 포함된 PC 최신 APM, FTP, SAMBA 서버 S/W 설치 대 1 대 1 3 스위치허브 50포트 이상(VLAN) 대 1 4 LAN 공사 5 컴퓨터 모니터 선수 PC-허브-서버 연결(선수PC는 인터넷 연결 차단) 24인치 이상(wide형) 듀얼모니터 식 1 6 컴퓨터책상 800mm 1200mm 이상 개 1 7 의자 사무용(등받이,바퀴) 개 1 8 경기장프로젝터 또는 대형TV 경기운영용 개 1 9 채점실프로젝터 또는 대형TV 경기장과 채점실이 다를 시 개 1 10 심사위원PC/모니터 11 12 13 14 15 16 17 18 19 20 프린터 (또는 복합기) 선수PC와 동일 규격 및 동일 S/W 설치 선수용 (공동수량은 예비용) 결과물 제출 및 심사용 대 2 1인당 모니터 2대 대 1 과제 등 출력용 대 1-19 -

과제출제 기준재료 단 1인당 공동 구분 재료명 규격(치수) 위 수량 수량 OS Windows 10 64bit 한글 개 1 5 비고 S/W XAMPP v5.6.19 Window Portalbe 개 1 xampp-portable-win32-5.6. 19-0-VC11-installer.exe S/W Dreamweaver CC 영어버전 개 1 필요시 낮은 버전 정품 개별설치 가능 S/W Photoshop CC 영어버전 개 1 S/W Illustrator CC 영어버전 개 1 S/W EditPlus 4.0 개 1 평가판 가능 S/W Notepad++ 6.9.1 개 1 무료 S/W Sublime Text 2 Portable + Plugin 개 1 평가판 가능 S/W Sublime Text 3 Portable + Plugin 개 1 평가판 가능 S/W PhpStorm 2016.1 개 1 평가판 가능 S/W WebStorm 2016.1.1 개 1 평가판 가능 S/W Brackets 1.6.Extract + Plugin 개 1 무료 S/W MS IE 11 개 1 무료 S/W MS Edge 개 1 무료 S/W FireFox Developer Edition 48.0a2 (2016-05-01) 개 1 무료 S/W Chrome v50.0.2661.94 m (64-bit) 개 1 무료 S/W Filezilla Client 3.16.1 개 1 무료 LIB jquery 1.12.3 개 1 무료 LIB jquery UI 1.11.4 개 1 무료(모든 테마 )포함 LIB bootstrap 3.3.6 개 1 무료 LIB prefixfree.min.js 개 1 https://leaverou.github.i o/prefixfree/ F/W Laravel 5.2 개 1 PHP Framework F/W CodeIgniter 3.0.6 개 1 PHP Framework DOC manual PHP, MySql 개 1-20 -