WEB1 부록.웹사이트 방문자 분석기

웹싸이트 방문자의 수, 유입경로, 이동경로, 어떤 환경에서 웹사이트를 탐색하는지 등 알려주는 서비스

이 중 구글 애널리틱스를 알아볼 것

 google analytics

지금은 UI나 기능들 추가등 많이 바뀌었으므로 사용할 때 알아보자!!

간단하지 않음

WEB1 부록.채팅 기능 추가

이런 채팅 기능

방문자와 채팅 가능하게하는 서비스

www.tawk.to

로그인하고 설정화면에서 widget code를 복붙 사용

html파일로 바로 쓰면 에러나고 웹서버를 통해서 사용해야함

WEB1 부록.댓글 기능 추가

지금 우리의 웹사이트는 방문자들에게 자료를 제공할 수 있게 되었지만 방문자들이 우리에게 정보를 제공하진 못하는 상태. 즉, 상호작용은 불가능한 상태.

방문자와 교류 가능한 수단, 댓글

html로 직접 구현하는 것은 불가능하고, 백엔드(php,django,jsp,python 등)을 배워야한다.

이외에도 다양한 기술을 배워야하는데 예를들면, 기계가 스팸 댓글을 달기에 사람이 하나씩 다하기에는 불가능하며 기계인지 아닌지를 기계가 구별할 수 있게하는 스팸차단 기능이 필요하고 또 사용자들이 이미지를 업로드하는 기능이나 페북,구글+같은 서비스 연동했으면 좋겠는등 많은 기능성들이 필요로함

댓글 직접 구현하는 것은 아주아주 어려운 일

개발을 직접하기 전에 남들이 만든 댓글을 우리 웹사이트에 포함시키면 직접 구현하지 않고도 댓글 구현이 가능

디스커스(disqus)라는 서비스라는 기능을 사용하여 웹페이지 하단에 댓글을 추가해볼 예정

https://disqus.com/

이외에도 livre라는 서비스도 좋다

디스커스에서 주는 코드를 붙여넣으면 되는데 만든 웹페이지에 코드적용시켜보면 로드할 수 없다고 나온다. 보안상의 이유 때문.

로컬호스트(127.0.0.1)

127.0.0.1/index.html를 주소창에 입력하면 됨.

댓글에 이미지 삽입도 되고 무료!

WEB1 부록.동영상 삽입

유튜브 동영상 삽입

embed 클릭

<iframe> 태그

아래처럼 <p>tag 같은걸 이용해서 붙여주면 동영상 삽입됨

결과화면

다른 사람들의 많은 자본이나 시간,노력의 결과물들을 한줄의 코드로 우리의 웹페이지에 합성할 수 있게됨.

이것이 코드의 힘

web1-20.수업을 마치며 1/3

지금까지 웹의 본질,핵심 개념을 배웠음

교양을 위한 코딩 여기까지. 무리하지말고 천천히 미래에 다시

web1-20.수업을 마치며 2/3

기초적인 내용을 가지고

복잡함에 대한 얘기(주제)

2의 50제곱의 경우의 수와 이 모두를 테스트(디버깅)해야하는 상황 - 복잡성

배운 것들이 너무 많아지면서 머리가 복잡해지고 이것들을 잘 사용하지 못하게됨

더 예쁘게 더 생산적으로 더 편리하게 웹을 사용하고 싶은 욕구,필요성을 느낀다면 이때가 새로운 것(진도)을 배울 때.

뭔가 만들기 위해 벽,절망에 부딪혔을 때 새로운 것을 배우기 위해 다시 찾아오십시오.

web1-20.수업을 마치며 3/3

앞으로의 수업 방향

웹사이트를 멋지게 하고 싶다면? WEB2 CSS

   - 관련 직업 : 웹퍼블리셔,웹디자이너

사용자와 상호작용하는 웹페이지를 만들고 싶다면? WEB2 JS

   - 관련직업 : 웹 프론트엔지니어,웹 인터렉티브 디자이너

만약 1억개의 웹사이트를 운영하고 있는데 1억개의 이 웹사이트의 코드를 하나씩 변경해야한다면? WEB2 PHP,JSP

PHP,JSP,Node js,파이썬의 장고,루비의 루비온레일즈,ASP닷넷등

  - 관련 직업 : 벡엔드 엔지니어

만약 웹사이트로 돈을 벌고 싶다면? 광고 노출을 통해 돈을 벌 수 있다 WEB2 광고수업

web1-19.웹서버 운영하기

하나의 문제해결을 위해 몇일이 걸릴 수 있지만 이를 통해 수많은 지식과 경험을 쌓을 수 있음

웹브라우저는 제품명이 아니라 제품군

웹서버도 동일

웹서버 프로그램 : Apach, IIS, Nginx

Apach 무료, 점유율1등

web1-19.1. 웹서버 설치(windows)

(추천검색어 : how to install apache http server os)

bitnami wamp : 통합설치 프로그램

WAMP

W : Windows

A : Apach

M: MySQL (데이타베이스 프로그램)

P : php (middleware 미들웨어)

web1-19.2. 웹서버 http

Internet Protocol Address (IP address)

127.0.0.1/index.html

127.0.0.1  : 웹브라이저가 설치되어 있는 컴퓨터를 가리키는 약속되어있는 특수한 주소

 - 주소를 치는 것은 웹브라우저가 설치 되어있는 각자의 컴퓨터의 웹서버를 가리키는 것

127.0.0.1 이 주소에 /index.html이라는 경로를 입력하면,

웹브라우저가 자신이 설치되어잇는 웹서버에 접속해서 index.html 파일을 원해라고 얘기하는 것이며, 웹서버는 htdocs라는 디렉토리에서 파일을 찾도록 설정이 기본적으로 되어있는 상태임(변경가능).

그럼 웹서버는 그 설정대로 htdocs디렉토리에서 index.html파일을 읽어와서 이 파일을 웹브라우저로 보내주고 웹브라이저는 이 파일을 읽고 해석해서 화면으로 출력해주는 것

이 htdocs에 html파일을 넣으면 그 파일이 내 웹페이지가 되는 것

127.0.0.1과 file:///c:/Bitnami/wampstack-7.1.10-1/apache2/htdocs/1.html 차이

file은 html파일에 있는걸 직접 오픈하는 것이고

http는 웹브라이저와 웹서버가 서로 통신할 때 사용하는 통신규약(http : Hyper Text Transfer Protocol)을 이용해서 데이터를 가져옴.

한대의 컴퓨터에 웹브라우져와 웹서버가 같이 설치 되어있어 결과로 출력된 웹페이지만 보면 차이가 없지만,

 서로 다른 컴퓨터에 있는 웹브라우저와 웹서버가 통신하기 위해서는 반드시 http를 사용해야함

 *http란?

웹페이지를 웹브라우저와 웹서버가 서로 주고 받기 위한 약속

web1-19.3. 웹서버와 웹브라우저의 통신

두대의 컴퓨터에서 서로 웹페이지를 주고 받는 방식을 알아보자        

한대의 컴에는 웹서버가 설치되어 있고 이 컴 하드디스크에 index.html 파일이 있는 상황

우리는 웹브라우저를 통해서 저 웹서버에 접속하해서 index.html파일을 전송 받아서 화면에 띄우고 싶은 상태

친구한테 전화해서 뭘 좀 받을려면 그 친구 전화번호를 알아야하는 것처럼 인터넷에서는 이 전화번호가 IP address임

컴이 두대 있어야 하는데 스마트폰으로 메인컴 웹서버에 접속가능

파일이 있는 웹서버의 IP 확인방법

 - 제어판-네트워크 공유센터-인터넷상태-자세히-IPv4 address 확인

접속할 웹서버 IP address를 입력하면 접속가능하게 됨

127.0.0.1을 입력한다면…?

(전세계적으로 자기자신의 주소를 127.0.0.1로 하기로 약속됨)

주소창에 127.0.0.1을 입력한다면 자기 자신을 의미하는 것

두대의 컴퓨터(or스마트폰1대와 메인컴)가

같은 무선인터넷이나 공유기에 접속해 있어야 연결가능(같은 네트워크 안에 있어야함)

web1-17.인터넷을 여는 열쇠 : 서버와 클라이언트

인터넷이 동작하기 위해서는 최소 2대가 필요

최초 웹사이트를 개발한 팀 버너스리는 웹브라우저와 웹서버를 개발함

이 두대는 인터넷에 연결되어있음.

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch에 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

Web Server : 인터넷연결상태 하드디스크에 index.html파일 저장된상태

<절차 설명>

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch에 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

그럼 웹서버는 하드디스크에서 index.html파일을 찾아서 웹브라우저가 설치된 컴퓨터에 전기적 신호로 바꿔서 정보를 쏴준다. 이 신호 안에는 index.html파일에 있는 코드가 담겨있음.

웹브라우저에는 웹서버에서 보낸 index.html의 정보(코드)가 도착하고 이 코드를 웹브라우저가 읽어서 해석한 다음 화면에 표시해줌. 이 일련의 과정이 우리가 아는 웹사이트가 동작하게 되는 과정

*웹브라우저와 웹서버가 서로 정보를 주고 받음

웹브라우저의 역할 : 정보 요청(request) // 웹 클라이언트라고 부를 수도 있음

웹서버의 역할 : 정보 응답(response)

게임으로 치면 게임 클라이언트와 게임서버

웹서버 두가지방법

자신의 컴퓨터에 웹서버를 직접 깔아서 사용

이런 일을 대행해주는 업체에 맡기는 것

생활코딩 추천 배움방법

웹호스팅으로 가볍고 쉽게 시작해서 해보고, 웹서버를 통해서 원리를 파악하는 방향을 추천

좀 어렵게 느껴지거나 시간이 없다면 웹호스팅만 보고갈 것

web1-18.웹호스팅 : github page

host : 인터넷이 연결되어 있는 컴퓨터 한대 한대를 호스트라 부름.

 - 웹서버를 운영하기 위한 컴퓨터

 - 웹을 목표로 host를 빌려주는 사업을 한다면 웹호스팅 업체(대표적 회사 : github)

 - 대부분 전문적인 웹호스팅 업체에 맡김

웹호스팅 종류

static web hosting : 일정사용량이 넘으면 유료전환 되는 서비스

free static web hosting : 무료

추천 웹호스팅 업체

 - bitballoon.com

 - neocities.org

 - amazon s3

 - google cloud strage

 - azure blob

(시간이 지남에 따라 성장&도태되는 업체가 생기니 검색으로 알아볼 것)

깃에 업로드한 파일들을 계속 재업하면서 버전관리를 할 수 있음☆

깃허브를 통해 싸이트 오픈. 만약 안될경우 주소 뒤에 파일명 붙여볼 것(ex : index.html)

(아무리 많은 사람들이 들어와서 무료)

web1-11. 최후의 문법 속성 & img

태그의 이름만으로는 정보가 부족할 수 있다

<img src=“이미지파일명.jpg” width=“100%>

Attribute 속성

Src = source

*Unslash 저작권 상관없이 이미지를 쓸 수 있는 싸이트!

web1-12. 부모자식과 목록

부모(parent) : 다른 태그를 포함하는 태그

자식(child) : 다른 태그에 속하는 태그

<parent>

<child></child>

</parent>

<br> 줄바꿈 태그

<li><li> : List, 목차태그

<ul></ul>  : 순서x, Unordered List

<ol></ol> : 순서있는 리스트, Ordered List

li : 자식 태그로써 반드시 부모태그가 필요

• 어디서부터 어디까지 연관된 항목인지 구분 짓는다(grouping)

ul : 부모태그로써 반드시 자식 태그가 필요

<ul>

<li>egoing</li>

<li>youbin</li>

</ui>

(위는 배울과목 아래는 참여자. 이렇게 나눌 때 li,ul사용)

*콘트롤+클릭(윈도우즈) : 다중으로 클로즈태그 작성가능

web1-13. 문서의 구조와 슈퍼스타들

사용빈도수가 가장 높은

<!doctype html> 관용적으로 서두에 html문서를 나타내는 의미로 씀

<html></html> 최고위 태그

<head></head>

<body></body>

<title></title> : 웹페이지 제목. 인터넷창의 탭에 보이는 제목. 본문 설명

<meta></meta> : 본문

<meta charset=“utf-8”>

• uft-8로 열어라는 의미
• uft-8로 만들었으면 uft-8로 열어야 안깨짐
• 컴퓨터가 0과1만 인식가능하고 데이터를 최종적으로 0과1로저장함
•  0과1을 어떻게 저장할지 여러가지 약속들이 존재하는데 그 중 하나가 uft-8 
• Cha : character 문자라는 의미
• Set : 규칙이라는 의미

위에 코드들은 본문을 설명

아래있는 코드들은 본문

Html의 모든 코드들은 <head>나 <body>둘 중 하나에 반드시 놓이게된다

이 두 태그 위에 <html>를 쓴다

web1-8. 통계에 기반한 학습

html에 150개 이상의 태그가 존재하나 다 외울 필요 없이, 주요 몇개와 이해만 있다면 검색으로 모두 가능

<strong>,<u>,<h1-6>  이미 8가지 태그를 알고있음

html 사용 빈도수

web1-9. 줄바꿈 : br vs p

CSS맛보기

가독성을 위한 줄바꿈 필요 - 검색해보기 : html new line tag

<br> : 줄바꿈, 시각적 효과만 존재, 닫는 태그없음

<p></p>: 단락 나누는 태그.

*위의 두 태그는 시각적으로 같지만, p태그를 쓰는게 더 좋다. 웹페이지를 더 정보있는 가치로 만들어줌. 단락을 표현하므로 의미 있게 만듬

 *둘의 차이

<p>는 정해진 여백이 있어 제한이 있으나 css로 정교하게 스타일링가능.

<br>는 원하는 만큼 써서 공백을 만들 수 있음

<p style="margin-top:45px;">

margin 태그!

web1-10. html이 중요한 이유

인터넷 글쓰는 쓰는 것은 내부적으로 html코드를 작성하는 행위였음

편집기에서 h3태그로 감싼 글자와 볼드,글자크기를 조정한 시각적인 효과만 있는 글씨와는 검색시에 엄청난 차이가 난다

검색에서 유리한 태그들로 우선 구성해라

검색엔진들은 인터넷에서 수천수만의 검색어 관련 자료를 분석하는데 위의 h태그인 것과 아닌 것은 검색 우선순위에서 엄청난 차이가난다. 검색은 되지만 100-200페이지 뒤에 나온다면 누가볼까?

시각장애인을 위한 배려도 태그를 알면 가능!