조쪼쪼와 김짹짹의 SW 교육 이야기: 2020

2020년 9월 19일 토요일

2020 0919 부산교육연구정보원 정보영재원 수업 자료

2020 0919 부산교육연구정보원 정보영재원 수업 자료

동영상 편집 사이트

https://online-video-cutter.com
무료 서비스
웹 브라우저 화면에서 동영상 파일을 바로 자르고 해상도를 변경하여 저장
잘라내기 가능한 동영상의 크기는 최대 500MB
https://21-edu.blogspot.com/2020/04/e-ebs-20-15-480p-202049.html

무료 이미지, 동영상 다운로드

https://pixabay.com/ko/
영어로 검색

2020년 8월 29일 토요일

2020 0829 부산교육연구정보원 정보영재원 수업 자료

2020 0829 부산교육연구정보원 정보영재원 수업 자료

크롬설치

https://google.com/chrome

구글 사이트로 이동

https://www.google.com/

구글 자기 계정으로 로그인

앱 인벤터 사이트로 이동

http://appinventor.mit.edu/

사용 가능한 센서

https://blog.uplus.co.kr/1860

2020년 3월 16일 월요일

자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 프로그래밍하기 VS 크롬 확장 프로그램 Disable JavaScript를 이용하여 자바스크립트 비활성화시키기

자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 프로그래밍하기 VS 크롬 확장 프로그램 Disable JavaScript를 이용하여 자바스크립트 비활성화시키기

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 보통 자바스크립트를 이용하여 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택 금지 등의 작업을 합니다.

oncontextmenu=’return false’ : 마우스 오른쪽 클릭 금지
ondragstart=return false : 드래그 금지
onselectstart=’return false’ : 블록 선택 금지

게시판의 html 소스에 아래의 내용을 추가하면 마우스 오른쪽 클릭 금지, 드래그 금지, 블록 선택이 금지됩니다.
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>

한편, 크롬 확장 프로그램 Disable JavaScript를 이용하면 특정 사이트에서 자바스크립트를 비활성화시킬 수 있습니다.

1. 크롬 웹 브라우저에서 아래의 주소 클릭
https://chrome.google.com/webstore/detail/disable-javascript/jfpdlihdedhlmhlbgooailmfhahieoem

2. [Chrome 에 추가] 클릭

3. [확장 프로그램 추가] 클릭

* 연습 페이지 주소 : https://21-edu.blogspot.com/2020/03/blog-post_31.html

2020년 3월 8일 일요일

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(1) : 합성되었다고 의심되는 이미지를 이미지로 검색하여 해당 이미지가 인터넷에 있는지를 찾아보기

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(1) : 합성되었다고 의심되는 이미지를 이미지로 검색하여 해당 이미지가 인터넷에 있는지를 찾아보기

이미지 검색 알고리즘을 설명하실 때, 출처가 불분명한 사진 또는 이미지의 출처를 찾을 때, 합성되었다고 의심되는 이미지의 원본을 찾을 때, 미디어 리터러시를 지도하실 때 활용하실 수 있습니다.

http://fotoforensics.com
여기에서는 https://tineye.com/ 검색 엔진을 이용하여 검색했습니다.

이 이미지는 아래의 방법으로 합성하였습니다.
https://21-edu.blogspot.com/2020/03/pixlr-pixlr.html

http://fotoforensics.com 을 이용하여 이미지 포렌식하기(2) : 합성되었다고 의심되는 이미지의 에러 레벨 분석(Error Level Analysis)하여 합성 여부 찾아내기

JPEG 는 Joint Photographic Experts Group의 약자로 그림 파일 형식의 하나입니다. 정지 화상을 구현하기 위해서 만들어진 손실 압축 방법 표준입니다. JEPG 포맷으로 하나의 이미지를 만들면 이미지 전체의 압축 레벨이 거의 같아야 합니다.
한 이미지에 다른 이미지를 합성하면 하나의 이미지 내에서 서로 다른 압축 레벨이 나타날 수 있습니다. 이를 활용하여 이미지의 합성 여부를 찾아내는 방법을 에러 레벨 분석(Error Level Analysis, ELA) 이라고 합니다.
에러 레벨 분석(Error Level Analysis, ELA) 은 학생들에게 JPEG 포맷을 설명하실 때, 합성되었다고 의심되는 이미지의 합성 여부를 검사할 때, 미디어 리터러시를 지도하실 때 활용하실 수 있습니다.

출처) http://fotoforensics.com/tutorial-ela.php

합성되었다고 의심되는 이미지를 예제 파일을 이용하여 에러 레벨 분석(Error Level Analysis)하는 방법을 소개드립니다.
분석 싸이트 : http://fotoforensics.com

이 이미지는 아래의 방법으로 온라인 상에서 합성하였습니다.
https://21-edu.blogspot.com/2020/03/pixlr-pixlr-2.html

2020년 2월 29일 토요일

웹 프로그래밍을 할 때 GET 방식과 POST 방식의 공통점과 차이점 설명 예시 : 크롬/오페라/파이어폭스 웹 브라우저 확장 기능을 이용하여 보이지 않는 게시판 게시물의 링크 주소 찾기

웹 프로그래밍을 할 때 GET 방식과 POST 방식의 공통점과 차이점 설명 예시 : 크롬/오페라/파이어폭스 웹 브라우저 확장 기능을 이용하여 보이지 않는 게시판 게시물의 링크 주소 찾기

웹 프로그래밍을 할 때 클라이언트가 서버로 요청을 보내는 방법에는 GET 방식과 POST 방식이 있습니다. 학생들에게 GET 방식과 POST 방식의 공통점과 차이점을 설명할 때 제가 예시로 사용하는 방법입니다.
1. POST 방식으로 짠 게시판 목록 열기 2. 게시판에서 게시물 하나 선택하여 보기 3. 주소창에서 선택한 게시물의 주소 찾아보기 4. 다시 게시판 목록으로 이동 5. 툴을 이용하여 POST 방식을 GET 방식으로 변환하기
6. 게시판에서 게시물 하나 선택하여 보기 7. 주소창에서 선택한 게시물의 주소 찾아보고 차이점 찾기
아래는 파이어폭스 웹 브라우저의 확장기능을 이용하여 POST 방식을 GET 방식으로 변환하는 방법입니다. 이 방법을 이용하면 보이지 않는 게시판 게시물의 링크 주소를 찾을 수 있습니다.
크롬 웹 브라우저를 사용하고 있다면 아래의 링크 주소를 클릭한 후 'Chrome 에 추가' 를 클릭하여 'Web Developer' 를 설치하시면 됩니다.
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
오페라 웹 브라우저를 사용하고 있다면 아래의 링크 주소를 클릭한 후 'Add to Opera' 를 클릭하여 'Web Developer' 를 설치하시면 됩니다.
https://addons.opera.com/en/extensions/details/web-developer

<파이어폭스 웹 브라우저 설치 및 'Web Developer' 사용 방법>
1. https://www.mozilla.org/ko/firefox 에서 Firefox 다운로드 클릭 2. Firefox Installer 설치 및 실행 3. 파이어폭스 주소 창에 https://addons.mozilla.org/en-US/firefox/ 입력 후 오른쪽 검색 창에 'Web Developer' 로 검색 - 또는 파이어폭스 주소 창에 https://addons.mozilla.org/en-US/firefox/addon/web-developer 입력 4. Add to Firefox 클릭 > 추가 클릭 5. POST 방식으로 짠 게시판 목록 열기
- 예) 한국교육과정평가원에서 운영하는 국가교육과정정보센터의 [2015 개정 교육과정] 공지사항 게시판 목록 주소
http://www.ncic.re.kr/mobile.revise.board.list.do?degreeCd=RVG01&boardNo=1001 6. 게시판에서 게시물 하나 선택하여 보기 7. 주소창에서 선택한 게시물의 주소 찾아보기 8. 다시 [2015 개정 교육과정] 공지사항 게시판 목록 주소로 이동 9. 파이어폭스 확장 기능을 이용하여 GET 방식으로 변환하기 - 주소창 오른쪽 끝에 있는 'Web Developer' 아이콘 클릭 > Forms 클릭 > Convert Form POSTs To GETs 클릭

10. 게시판에서 게시물 하나 선택하여 보기 11. 주소창에서 선택한 게시물의 주소 찾아보고 차이점 찾기

2020년 2월 17일 월요일

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 감정 인식하기

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 감정 인식하기

* 프로그래밍 화면

2020년 2월 16일 일요일

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 나이 인식하기

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 나이 인식하기

* 프로그래밍 화면

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 문자 인식하기

mBlock을 활용한 인공지능 교육 : mBlock 의 인공지능 확장 블록을 이용하여 문자 인식하기

* 프로그래밍 화면

2020년 2월 14일 금요일

mBlock을 통한 데이터 사이언스 교육 : mBlock 의 데이터 차트 확장 블록을 이용하여 데이터 시각화 구현하기 > 사인 그래프 그리기

mBlock을 통한 데이터 사이언스 교육 : mBlock 의 데이터 차트 확장 블록을 이용하여 데이터 시각화 구현하기 > 사인 그래프 그리기

* 프로그래밍 화면

* 실행 화면

2020년 2월 7일 금요일

인공지능 > 컴퓨터 비전 기술을 설명하는 CS Unplugged 학습 자료, 학습지, 파워포인트, 참고 영상

인공지능 > 컴퓨터 비전 기술을 설명하는 CS Unplugged 학습 자료, 학습지, 파워포인트, 참고 영상입니다.

자료 주소
- http://csunplugged.mines.edu/activity-computer_vision.html?fbclid=IwAR3DaqxGuyHY1QcM0nHpcXnLIHbi0RPXhLbsNgbiDFi4M-SDw7Zl7w_bI3I

주제 : 컴퓨터 비전

학습지
- 에지 감지 : 별, 고양이
- 형상 탐지 : 캥거루

슬라이드 - 컴퓨터 비전 슬라이드
- 에지 감지 고양이 슬라이드

컴퓨터 비전 참고영상

앱 인벤터의 확장 기능을 이용하여 AWS 의 인공지능 블록 추가하기

앱 인벤터의 확장 기능을 이용하여 AWS 의 인공지능 블록 추가하기

* AWS 란?

- Amazon Web Services; AWS
- 아마존닷컴의 클라우드 컴퓨팅 사업부
- 개발자가 사용 가능한 기능을 제공하는 플랫폼을 제공

1. AWS 계정등록

- 12개월 프리 티어 액세스 포함 // 1년 무료
- https://portal.aws.amazon.com/billing/signup#/start

2. 사용할 AWS 의 인공지능 서비스
- Amazon Translate : 언어 번역
- Amazon Rekognition : 이미지 및 동영상 인식

* 앱 인벤터용 AWS 의 인공지능 서비스 확장 블록 개발자
- Ceyhun Özgün
- 확장 블록 소개 : https://github.com/ceyhunozgun/awsAIServicesAppInventorExtension/wiki

3. 앱 인벤터 http://appinventor.mit.edu 열기- Create Apps! 클릭
- 로그인
- 한국어 설정

4. 확장기능 > 확장기능 추가하기 클릭

5. 프로젝트에 확장 프로그램 불러오기 > URL 클릭 > 아래의 주소를 복사해서 URL 입력 > Import 클릭
- https://ceyhunozgun.github.io/awsAIServicesAppInventorExtension/tr.com.ceyhunozgun.appinventor.aws.aix

- (또는 위의 주소 클릭 > 파일 다운로드 > '컴퓨터에서 불러오기 선택' > Import 선택)

6. 확장기능 > AWS 의 인공지능 블록이 추가된 모습

5. 블록 화면 > AWS 의 인공지능 블록 명령어가 추가된 모습

* AWSPolly 블록은 AWS 인증을 위한 블록임

2020년 2월 5일 수요일

앱 인벤터의 확장 기능을 이용하여 머신 러닝 > 이미지 분류하기 블록 추가하기

앱 인벤터의 확장 기능을 이용하여 머신 러닝 > 이미지 분류하기 블록 추가하기

1. 앱 인벤터 http://appinventor.mit.edu 열기- Create Apps! 클릭
- 로그인
- 한국어 설정

2. 확장기능 > 확장기능 추가하기 클릭

3. 프로젝트에 확장 프로그램 불러오기 > URL 클릭 > 아래의 주소를 복사해서 URL 입력 > Import 클릭
- https://mit-cml.github.io/extensions/data/extensions/LookExtension-20181124.aix