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

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