분류 전체보기 (159) 썸네일형 리스트형 프레임 구조에 대한 이해 개념은 Flex에서 출발했다. 요즘 부트스트랩등등에서 지원하는 구조적인 네임드로 header, nav, section, aside등의 태그는 구조적인 네임드를 아래와같은 구조로 가지고 있다. - 다를수 있지만, 그틀은 이게 기본이다. 이런 네임드의 구조를 가지게 되는 이유는 광고이다 생각해보자 광고를 아무 위치, 아무 크기, 아무 구조등등을 무시한채 올렸다고 생각하면 정보와 광고가 뒤썩여 뭐가 뭔지 이상한 페이지들이 난무할것이다. 그래서, 요즘은 정보와 광고를 분리하기 위한 구조적 프레임들을, UI플렜폼에서 제공하는데 기본은 아래와 같은 구조에 따라 어디에 붙여도 되는지를 고민하게 만들고 있다. 하지만, 이런 구조적 프레임은 웹이라는 업무/정보 플렛폼 공간에서도 그효율성을 발휘한다. 우리가 운영하는 사이.. 시그니쳐 사인패드(signature_pad.js) 예제 https://github.com/szimek/signature_pad - 데모site http://szimek.github.io/signature_pad/ * 참고할것 - 기간계 적용된 비슷한 예제 프로그램 . LogisALL APP > UCPS > 검품 > 제작처 : 900252 > 유형 : MS108 > 조회 > 맨아래 하단 > 결재확인 클릭 > 사인결재 * 첨부파일은 sample 사인패드 예제파일 구글 폼/설문 사용 관련 조사 ■구글 폼(서베이) 사용. 1. 접속 URL(구글 계정 필요) : https://www.google.com/intl/ko_kr/forms/about/ 2. 새 양식(설문) 만들기 3. 설문지 내용 작성 4. 공유할 설문지 링크 URL 생성 또는 아이프레임 태그 생성 5.웹페이지 설문지 링크 연결 또는 아이프레임 태그를 추가할 수 있다.(첨부 HTML 파일 참고) 6. 응답결과 확인 7. 결과 다운로드(csv) 8. CSV 파일 확인 ------------------- 구글FORMs와 MS-FORMS가 있음 기능은 비슷하고, 외부URL Link지원이 가능함 외부URL링크를 이용해서, 웹사이트링크, 메일링크에 설문을 포함할수 있음. PWA 및 SPA 관한 쉬운이해 ■ PWA란 모바일 앱과 웹 기술의 장점을 결합한 것.(웹앱) 모바일 앱과 같은 경험을 주는 최신 웹 앱 앱 아이콘, 앱 아이콘 설치 배너, ?모바일 푸시, 오프라인 경험을 제공 HTML, CSS, JS로 구현하는 웹 어플리케이션 프로그레시브 웹 앱은 브라우저 탭에서 실행할 수 있지만 설치할 수도 있음. Service worker를 사용하여 연결 독립적이다.(오프라인이나 느린 네트워크에서 동작) * 비주얼 스튜디오 2015 이상에서 ASP.NET CORE APPLICATION에서 개발 가능 * Manifest File 설정 필요.(JSON 파일이며, 사이트의 메타 information을 정의 한다.) * Service worker 필요.(Script 파일 형식) - 서비스워커는 브라우저가 백그라운드에서 .. 네이버 Analytics ■ 네이버 Analytics 사용하기 1. 네이버 계정으로 로그인 후 프로젝트 생성 https://analytics.naver.com/ 2. 프로젝트 생성 및 사이트 정보 추가 샘플 사이트: http://pacom.logisall.net/map/analytics.html *첨부파일 확인 3. 사용법 : 생성된 스크립트를 HTML 페이지에 추가 또는 해당 스크립트를 따로 작성하여 import 한다. 4. 네이버 Analytics에서 확인 5. 권한부여 * 다른 계정에 권한을 부여하여 여러 계정으로 확인 할 수 있도록 한다. 참조 : https://blog.naver.com/podoclock/221362032138 웹 스크래핑 웹 스크래핑(진행중..) ■ 다른 웹사이트의 HTML 태그를 읽어 필요로 하는 정보만을 파싱하여 얻는 기술 ■ 현재 다른 웹사이트와의 서버 http통신을 통해 HTML 태그는 긁어와서 String 타입으로 변환후, 그것을 스크립트단에서 파싱하려고 했으나, 스크립트단에서 HTML dom 태그를 정상적으로 인식못하고 바로 출력되어 버리는 이슈가 있음. 추후 classic asp가 아닌 C#으로 html 태그를 긁어와 스크립단이 아닌 서버단에서 파싱하도록 테스트할 예정. ■ 실행 URL : http://pacom.logisall.net/map/scrap.asp New Document pacom.logisall.net 네이버지도, 다음지도 카카오navi- API 활용 조사 ■ 네이버, 다음 지도 활용 1. 미리 생성된 지도의 마커에서 클릭시 좌표 alert 2. 지도 클릭할때, 마킹 생성 3. 신규 마킹생성시에 좌표정보를 클릭이벤트, 레이아웃에 포함시켜야 함 -> 적용 완료 4. 브라우져 호환성 적용이 필요함 -> 게시판 edit안에서 동작 안함, 뉴탭에서 실행 필요 5. 카카오 네비 Invoke 연동 추가. (휴대폰에서만 동작) 6. T map 네비 연동.(휴대폰에서만 동작) ■ 실행 결과(* 새탭에서 아래주소를 붙여넣기해서 실행해 주세요.) - 네이버 : http://pacom.logisall.net/map/naverMap.html - 다음 : http://pacom.logisall.net/map/daumMap.html ■ 네이버, 다음(카카오) 지도 Open API를.. 구글 차트 API 활용 및 샘플 ■ Google 차트 API : https://developers.google.com/chart/interactive/docs/gallery?hl=ko 주요차트 1. Area Chart 2. Bar Chart 3. Column Chart 4. Combo Chart 5. Donut(Pie) Chart 6. Line Chart 7. Table Chart : 간단한 Grid 8. Miscellaneous Examples(기타예제) 추가 구글chart > Print PNG Chars (이미지 변환처리) : https://developers.google.com/chart/interactive/docs/printing * 예) GEO Country 차트 PNG 차트 인쇄 | Charts | Google Develo.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 20 다음
