스마트 프로덕트 프로젝트 10/4 IP카메라 웹기반 설정

IP카메라 웹기반 설정

실습 목표:

Python-Flask 기반의 웹 서버를 이용하여 IP카메라 설정을 변경하고, 캡쳐된 사진을 웹 브라우져로 가져와서 보여준다.

필요 기술:

웹: HTML5, Javascript, jQuery, Ajax, Flask
OS: 시그널

참고: 

쉘에서 시그널 보내기
$ kill -s SIGUSR1 PID

파이선에서 시그널 보내기
os.kill(PID, signal.SIGUSR1)

여기에서 PID는 프로세스ID

예제 코드

https://gist.github.com/jyheo/2bfba7a45cafff1c811a5c11c53160d4

2016년 1학기 중간/기말 성적

중간/기말 시험 결과입니다. 최종 등급은 종합정보시스템에서 확인 가능합니다.
본 게시물은 한달 후에 삭제예정입니다.

웹 프로그래밍 6/7 - Bootstrap Example

Bootstrap Example

Template

http://www.w3schools.com/bootstrap/bootstrap_templates.asp

Example (Simply Me)

http://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

실습

Simply Me를 자신 소개 페이지로 바꿔보기.

기말 시험 시간/장소 공지

웹 프로그래밍 B반

6월 9일(목) 오후12시공학관 405호

자바 B반

6월 13일(월) 오후2시 탐구관 506호

임베디드OS A/N합반

6월 14일(화) 오전11시 탐구관 506호

 

웹 프로그래밍 6/2 - Bootstrap 기본(계속)

Bootstrap 기본(계속)

Badges/Labels - http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
Progress Bar - http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Collapse - http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
Carousel - http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Scrollspy - http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

실습:

이전에 만든 포트폴리오 페이지(index_bootstrap.html)에
Scrollspy 적용하기
Carousel을 이용하여 간단한 슬라이드 쇼를 만들어 넣기. 슬라이드 내용은 각자 알아서.

웹 프로그래밍 5/24 - Bootstrap 기본

Bootstrap 기본

Get Started - http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Grid Basic - http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Jumbotron - http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp

Alert - http://www.w3schools.com/bootstrap/bootstrap_alerts.asp
Button groups - http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

Glyphicons - http://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
참고: Font Awesome http://fontawesome.io/icons/

Dropdowns - http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
Navigation bar - http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Modal - http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Tooltip - http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

실습

아래와 같이 자신의 포트폴리오 페이지를 바꿔보자.

기존에 index.html을 복사해서 index_bootstrap.html 이라고 만들어서 github에 올린다.

http://아이디.github.io/index_bootstrap.html 로 접속 가능해야 함.

grid를 잘 설계하여 자신의 포트폴리오 내용을 잘 배치해보기

navbar, jumbotron, glyphicon을 적절히 사용, 다른 bootstrap 요소들을 추가로 이용하여 꾸며도 좋음

힌트: 아래와 같은 CSS가 필요할 것임, 적용전후에 어떤 차이가 있는지 잘 비교해보고 이해해볼 것!

     <style>

        .navbar {

            background: rgb(255, 200, 255);

            margin-bottom: 0;

            border: 0;

        }

        .jumbotron {

            background: rgb(255, 200, 255);

        }

    </style>

웹 프로그래밍 5/19 - CSS3 media

CSS3 media 

종합예제

CSS3 media

<style>
        @media screen and (max-width: 499px) {
            body { background: red; }
        }

        @media screen and (min-width: 500px) and (max-width: 799px) {
            body { background: green; }
        }

        @media screen and (min-width: 800px) {
            body { background: blue; }
        }
</style>

media type

• all
• print
• screen
• speech

<link rel="stylesheet" media="print and (max-width: 499px)" href="print.css">

실습

인쇄할 때만 Confidential 워터마크를 출력하기.
워터마크는 HTML 본문에는
<div id="watermark">
<h1>Confidential</h1>
</div>
CSS는
#watermark {
display: block;
color: red;
position: absolute;
left: 50%;
top: 50%;
width: 300px;
margin-left: -150px;
border: 2px red solid;
text-align: center;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}

웹 프로그래밍 5/17 - 11장 자바스크립트와 jQuery 응용 예제 (계속)

11장 자바스크립트와 jQuery 응용 예제 (계속)

• 문서 객체 설정하기
• 무한 스크롤
• LightBox 플러그인
• Masonry 플러그인
• 갤러리 구현하기

실습

무한 스크롤 예제에서 스크롤바가 나타날만큼 컨텐트가 없다면 무한 스크롤이 동작하지 않음. 즉 아래와 같이 2개 정도의 <h1>태그만 만들면 스크롤바가 없기 때문에 무한 스크롤이 동작하지 않음.
var appendDocument = function () {
   for (var i = 0; i < 2; i++) {
   // 문서 객체를 생성합니다.
      $('<h1>Infinity Scroll</h1>').appendTo('body');
   }
};

스크롤바가 나타날 만큼 화면을 채우기 위해서는 어떻게 해야할까?
힌트: $(window).height()보다 $( 무엇 ).height()가 커질 때까지 컨텐트를 추가한다.

웹 프로그래밍 5/12 - 11장 자바스크립트와 jQuery 응용 예제

11장 자바스크립트와 jQuery 응용 예제

입력 양식 자동 초점 조절하기

프레임 애니메이션 만들기

실습

입력 양식 자동 초점 조절하기 예제를 jQuery를 쓰도록 고쳐보기
힌트: $('xxxx').keydown( function () { } );

프레임 애니메이션 만들기 예제를 고쳐보기
1. jQuery 라이브러리를 쓰도록 고치기
2. 이미지를 매 프레임마다 오른쪽으로 5px씩 움직이게 고치기
3. 이미지를 클릭하면 처음 위치(left=0)로 이동하게 하기

웹 프로그래밍 5/10 - 10장 jQuery(계속)

10장 jQuery (계속)

Effect

• show/hide/toggle
• slideDown/slideUp/slideToggle
• fadeIn/fadeOut/fadeToggle

Animation

• animate()
• delay()
• stop()

실습

목차 만들기

http://jyheo.github.io/javascript/toc.html

1. 수정하여 아래 그림과 같이 만들기(목차에서 제목과 차례는 빼기, 목록으로 보여주기)

2. 차례를 누르면 목차가 slideDown/slideUp이 토글 되도록 고치기

힌트: click()과 slideToggle()을 이용

웹 프로그래밍 5/3 - 10장 jQuery

10장 jQuery

jQuery 사용, http://code.jquery.com/

<script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

DOM 선택

$('선택자')

DOM 조작

$('선택자').attr()
$('선택자').css()

$('선택자').text()
$('선택자').html()

$('선택자').addClass(), removeClass(), toggleClass()

이벤트

$('선택자').hover()
$('선택자').click()
$('선택자').on()

실습

지난번 실습에서 자바스크립트로 만든 계산기를 jquery를 사용하여 수정하시오. 아래 파일을 참고

http://jyheo.github.io/javascript/calc_jquery.html

웹 프로그래밍 4/28 - DOM 실습

DOM 실습

http://jyheo.github.io/javascript/exercise3.html

추가 버튼을 눌렀을 때 이미 동일한 이름의 동물이 존재하면 alert('동일한 이름이 존재합니다!')라고 경고창을 나타내고 추가하지 않도록 코드 추가

목록을 선택하면 아래와 같이 나타다도록 코드 추가

웹 프로그래밍 4/26 9장 문서 객체 모델(DOM)

9장 문서 객체 모델(Document Object Model, DOM)

실습+과제: 간단한 계산기 만들기

http://jyheo.github.io/javascript/calc.html

• 뺄셈 버튼 동작하게 만들기
• display_debug() 함수를 수정하여 debug_area의 스타일을 꾸며보기(보더, 배경색, 폰트 등을 지정해본다.)
• 기타 다른 기능(예를 들어 곱하기, 나누기 등) 추가하기
• 이런 저런 동작을 하다보면 버그가 있는데, 이 버그를 찾아서 수정해보기.

결과물 제출

1. 실습 결과는 자신의 github.io 페이지에 calc.html로 넣어두기. 즉 ID.github.io/calc.html 로 접속 가능해야 함.

2. 아래 목차로 실습 보고서(hwp, doc, pdf, html 모두 가능)를 작성하여 jyheo.report@gmail.com으로 보내기

목차

- 실습 개요

- 각 실습 지시에 대한 해결 방법 코드와 설명

- 결론(요약)

2016년 1학기 중간시험 안내.

2016년 1학기 중간시험 안내.

Java B반: 4월19일 화요일 5교시(오후1시) 공학관A 405호

임베디드OS A반: 4월19일 화요일 3교시(오후11시) 수업 강의실(공학관A 403호)
임베디드OS N반: 4월19일 화요일 야2교시(오후6시55분) 수업 강의실(학과사무실 옆)

웹프로그래밍 B반: 4월21일 목요일 4교시(오후12시) 공학관A 405호

웹 프로그래밍 4/14 - 자바스크립트(객체)

자바스크립트(객체)

자바스크립트에서 객체는 원소마다 이름을 붙여 놓은 집합

원소는 이름:값 의 쌍으로 되어 있음.

배열은 인덱스로 접근하나 객체는 이름으로 접근

var Array = [1, 2, 3, 4];

Array[0]

var Object = {first:1, second:2, third:3, fourth:4};

Object['first']

또는

Object.first

http://jyheo.github.io/javascript/object.html

실습

http://jyheo.github.io/javascript/exercise2.html

obj_list를 아래와 같이 테이블로 나타나도록 바꾸기.

웹 프로그래밍 4/12 - 8장 자바스크립트(배열과 함수)

8장 자바스크립트(배열과 함수)

배열(Array)이란?

수학에서 배운 집합을 생각하면 되겠음.
단, 집합과 다른점이라면 중복 원소도 허용한다는 정도.

집합은 A = { 1, 2, 3, 4} 와 같이 쓴다면,
자바스크립트의 배열은
var A = [1, 2, 3, 4];
var a0 = A[0];    // 배열 A의 첫 번째 원소
var a1 = A[1];    // 두 번째 원소

예제)
http://jyheo.github.io/javascript/array.html

참고: 배열 다루기
http://www.w3schools.com/js/js_array_methods.asp

함수(function)란?

수학에서는...
f(x) = x + 3
f(2)는 5가 되고, f(3)은 6이 됨.

자바스크립트에서는...
function fname(x) {
    return x + 3;
}

var y = fname(2);

예제)
http://jyheo.github.io/javascript/function.html

실습

문자열 원소로 주어진 배열에서 특정 문자(대소문자 구분 없이)로 시작하는 단어를 골라서 리턴하는 함수를 작성한다.

http://jyheo.github.io/javascript/exercise1.html

getAwords(words) 함수는 words배열에서 'a'나 'A'로 시작하는 단어를 골라서 배열로 리턴.
getWordsBeginWith(words, begin_char) 함수는 words배열에서 begin_char로 시작하는 단어를 골라서 배열로 리턴. 단, begin_char가 'b'라고 하더라도 'b'와 'B'로 시작하는 모든 단어를 배열에 넣어서 리턴.

완성한 exercise1.html은 자신의 github 페이지에 넣어 둘 것.
ID.github.io/exercise1.html 로 접속 가능하도록

웹 프로그래밍 4/7 - 8장 자바스크립트 기본

8장 자바스크립트 기본

자료형(type)
변수(variable)

문자열

디버그 콘솔에 출력하기
console.log("출력 내용");

실습:

구구단 출력하기
<script>
var i;
for (i = 2; i < 10; i++) {
    for (j = 2; j < 10; j++) {
        console.log(i + "x" + j + "=" + (i*j));
    }
}
</script>

웹 프로그래밍 4/5 - 7장 CSS응용과 레이아웃(계속)

7장 CSS응용과 레이아웃

종합 예제

드랍메뉴 추가하기(CSS만으로)
.outer-menu-item:hover .inner-menu {
    display: block;
}

github에 자신의 홈페이지 만들기

1. github.com에 계정 만들기
2. 자신의ID.github.io 저장소(repository) 만들기
3. 저장소에 index.html 만들기

실습

github에 홈페이지 만들고 자신의 포트폴리오 페이지를 만들어 보자.
예제)
http://chrispederick.com/
http://zachhoefler.com/

실습 후 자신의 github 아이디를 jyheo@hansung.ac.kr로 다음과 같이 보내기.

제목: 웹 프로그래밍 github 아이디
내용:
안녕하세요. IT응용시스템공학과 1학년 홍길동 입니다.
웹 프로그래밍 수업 실습과 관련한 아래 정보를 보내드립니다.
홍길동/ 학번 /github아이디

홍길동 드림

웹 프로그래밍 3/31 - 7장 CSS 응용과 레이아웃

7장 CSS 응용과 레이아웃

실습

• 상단 메뉴바는 고정(fixed) 임.
• 메뉴 아이템의 크기는 100px로 지정하였고, 메뉴 텍스트의 내용이 커지면 ...으로 표시하도록 하였음(메뉴 - 1334... 와 같이)
• 본문 내용의 가로 길이는 500px, 바탕색은 orange, 그리고 중앙 정렬하였고, padding은 20px을 주었음.

웹 프로그래밍 3/29 6장 CSS 속성

6장 CSS 속성

• 5장에서 배운 CSS 선택자를 이용하여 HTML 요소를 선택하고, 그 선택한 요소에 대해 속성을 부여함
• 속성에는 여러가지 속성들이 존재하며, 각 속성마다 명목형, 크기, 색, URL 등의 값을 줄 수 있음

속성의 값

• 명목형(교재에는 키워드 라고 나와 있음): 속성 이름과 콜론을 쓰고 Webstorm에서 Ctrl+Space를 누르면 선택 가능한 값이 나열됨
• 크기: %, em, px 등
• 색: 색 이름, rgb(r, g, b), rgba(r, g, b, a), #RRGGBB
• URL: url('/back.jpg') 

속성 들

• 박스 속성: margin, border, padding, width, height
• 박스 테두리 속성: border-width, border-style, border-color, border-radius http://www.cssmatic.com/border-radius
• 표시 속성: display 
• 배경 속성: background-image, background-size, background-repeat, background-attachment, background-position, background-color
• 글자 속성: font-size, font-family, font-style, font-weight, text-align, line-height
• 위치 속성: position, overflow
• float 속성: float
• 그림자 속성: text-shadow, box-shadow http://www.cssmatic.com/box-shadow
• 그레디언트: css gradient generator http://www.cssmatic.com/gradient-generator

실습

• 자기소개서 페이지의 항목을 플로팅 박스로 만들기

    .floating-box {

            display: inline-block;

            width: 300px;

            margin: 10px;

            border: 3px solid deepskyblue;

            float: left;

    }

• 박스에 그림자 적용하기
• <h1>에 그레디언트 컬러와 둥근 모서리를 적용하고, 글자를 중앙에 위치시키기
• 특정 박스에 대해 스크롤바 적용하기(height를 지정하고, overflow-y 속성 이용), 아래 예시에는 '허준영' 박스에 대해 적용한 것임

예시)
브라우져 크기에 따라 2열로 표시되기도하고 3열로 표시되기도 함. inline-block의 응용