Publishing Output Guide Document

Written : 2014-09-05, 작성자 : 지성봉
1. 프로젝트명 아시안게임 모바일 웹
2. 인코딩 방식 utf-8
3. DTD 사용 HTML5
4. 크로스 브라우징 테스트 chrome, iOS8 기본브라우저, Android KitKat (4.4) 기본브라우저, Android Jelly Bean (4.3) 기본브라우저
5. Responsive 여부 O
480px >= ( device width ) : 폰
768px >= ( device width ) : 해상도 큰 폰 & 미니 태블릿
1024px >= ( device width ) : 태블릿
6. 웹 접근성 적용 여부

CSS, JavaScript Resources

type 1 Depth 2 Depth Directory FileName Memo
CSS 공통 CSS /css common.css RESET CSS - for CrossBrowsing, 공통 CSS
JS jQuery /js jquery-1.11.1.min.js
Infinit Scroll Plugin /js plugins.js with manual-trigger Plugin
공통 JS /js common.js
JSON 클립 · 하이라이트 영상 / items.json JSON data - 차후 실제 API로 변경
PC 버전과 동일
중계일정 · 편성표 / schedule.json JSON data - 차후 실제 API로 변경
PC 버전과 동일

HTML Resources

미작업 작업 중 작업 완료
1 Depth 2 Depth 3 Depth Directory FileName Memo
클립 · 하이라이트 영상 클립 영상 리스트 / index.html
태그 리스트 / tagList.html
중계일정 · 편성표 / schedule.html
경기일정 / gameSchedule.html
메달순위 / score.html

Developed Script

미작업 작업 중 작업 완료
관련 영역 기능 파일 위치 Memo
공통 check Android Version /js/common.js @function chkAndVer
@return {number || string} - Android Ver. || 'noAnd'
공통 top Navigation SlideToggle /js/common.js Use CSS3 Animation
공통 BroadCast Navigation SlideToggle /js/common.js Use CSS3 Animation

안드로이드 4.3 이하 버전에서 오류 발생
animate 스크립트 작성 필요
- 완료

클립 · 하이라이트 영상 1st ajax data load /js/common.js @see http://api.jquery.com/jQuery.ajax/
첫 List 역시 Ajax 로 Get
  1. parsing & processing JSON Data (use function parseClipJSON)
  2. add infinitescroll
클립 영상 json data로 부터 마크업 build 및 관련 data 기록 /js/common.js @function parseClipJSON
@param {object} jsonData
@param {obejct} appendTarget
@param {number} step

추가 데이터 여부 확인하여 infinite scroll destory

아이템 클릭 이벤트 바인딩 /js/common.js type( img / banner / video )에 따라 동작
  • ■ img / banner 의 경우

    링크 기본 동작

  • ■ video 의 경우

    동영상 재생 Process로 전달

추가 개발 필요 사항 :
각 타입별 Flurry log 남기기 - 완료

tag Cloud Buttons /js/common.js
  1. 전체 보기 시 페이지 갱신
중계일정 · 편성표 Date 객체 메서드 확장
( toYMDString / tommorow / yesterday / toDayString / toYMDhypenString )
/js/schedule.js @method toYMDString
@return {string}
@description export YYYYMMDD type string
@method tommorow
@return {date object}
@description get next day
@method yesterday
@return {date object}
@description get previous day
@method toDayString
@return {string}
@description export mm.dd dayStr type
@method toYMDhypenString
@return {string}
@description export YYYY-MM-DD type string
편성 시간 vs 현재 시간 확인 /js/schedule.js @function chkCurrTime
@returns {bool}
@param {string} stTime
	
{string} endTime
시간 → 문자 변환
(1300 → 오후 01:00 )
/js/schedule.js @function timeToStr
@param {string} time
@returns {string}
Parse Querystring from URL (쿼리스트링으로부터 채널 값 획득) /js/schedule.js @function QueryString
@return {object}
스케쥴표 마크업 build /js/schedule.js @function buildSchdArticle
@return {HTMLObject}
@param {object} - {header : channel, today : YYYY-MM-DD }
편성표 Ajax Procss /js/common.js @function schdlAjaxProcess
@param {string} _date // YYYYMMDD 형태로 받음 @description get program schedule data by ajax request, and parse json data
날짜 컨트롤 클릭 이벤트 /js/schedule.js
  1. 이벤트 위임 처리
  2. schdlAjaxProcess 처리