WEB网站网页前台开发HTML5+CSS3+JS简介

讲到WEB网站网页,先提下浏览器(Browser),PC电脑、PAD平板、智能手机一般都会安装浏览器来打开网站看信息,比如谷歌浏览器( Chrome)、微软的IE和edge、火狐浏览器(firefox)、QQ浏览器、360浏览器等。一些PC电脑的软件程序还有一些智能手机的APP应用是用B/S(浏览器/服务器)架构制作的,原理类似浏览器只是一般不能打开其它的链接。

Web服务器以前介绍过LAMP(Web应用软件组合),除了linux+apache,其他一般还有linux+nginx,windows+IIS,python的flask等。浏览器和Web服务器之间的通信协议一般就是HTTP通信协议(超文本传输协议),建立在TCP/IP基础之上,用于传输浏览器到服务器之间的HTTP请求和响应。它不仅需要保证传输网络文档的正确性,同时还确定文档显示的先后顺序 。现在大多数浏览器都有开发者工具模式,查看Web网站服务器发给浏览器执行的前台网页代码。

这里浏览器里执行的就是HTML+CSS+JS代码
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

一、HTML
HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML5 是 HyperText Markup Language 5 的缩写,简称“H5”,HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图像、动画以及与设备的交互都进行了规范。

实例解析:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>辰匠科技(v-craftsman.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二、CSS
CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的,只是在之前的版本中没有得到广泛的应用。如果想尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的,它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。

在HTML里使用CSS
实例解析:

1、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style=”color:blue;margin-left:20px;”>这是一个段落。</p>
页面里<p>的内容样式设置为:颜色为蓝色,左边边距20个像素。

2、内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表
<head>
<style type=”text/css”>
body {background-color:yellow;}
h1 {color:red;}
</style>
</head>
页面里的<body>的内容样式设置为:背景色为黄色。
页面里的<h1>的内容样式设置为:颜色为红色

3、外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

三、JS
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
实例解析:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落</p>
<button type=”button” onclick=”myFunction()”>尝试一下</button>
</body>
</html>

页面打开后,当鼠标点击“尝试一下”按钮,页面会执行myFunction()函数,
页面里原来id=”demo”的<p>里的内容“一个段落”会变成“我的第一个 JavaScript 函数”。

引用外部JS的方法案例:
<!DOCTYPE html>
<html>
<body>
<script src=”myScript.js”></script>
</body>
</html>

最后,给大家推荐相关学习网站:
www.runoob.com
www.w3school.com.cn

辰匠科技:树莓派视觉图像识别信息物联网方案简介

讲到视觉识别系统,输入端按类型分一般是感光的传感器,还有是摄像头等。感光的传感器有光敏电阻、普通的红外人体感应传感器等这些电子元器件可以将周围环境里的所需的光学信号转换成电信号,可接入树莓派的GPIO接口再编程处理,这种案例以前已介绍过了。这里将稍详细讲解下的是摄像头,树莓派一般可用的摄像头一般按接口分类有二种:一种是USB摄像头、一种是树莓派自身的CAMERA排线接口摄像头。摄像头按识别的对象种类分有可见光的普通摄像头还有红外摄像头。

使用树莓派+摄像头的硬件组合结合python代码编程来实现获取现场事务的图像信息做识别分析后可用来联网处理。

这里的视觉图像识别信息方案,按信息类型分2类:
1、识别图像本身参数数据;
2、将图像内物体或图案识别成文本信息。

讲到视觉图像识别这里不得不提OpenCV,OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux、Windows、Android和Mac OS操作系统上。它轻量级而且高效由一系列 C 函数和少量 C++ 类构成,同时提供了Python、Ruby、MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法。

之前相关文章介绍过利用树莓派python的openCV结合RTMP和tkinter界面来做视频流监控。

这里用树莓派Raspberry Pi OS的linux系统和Python编程语言。

树莓派安装python3的openCV指令:
sudo apt-get install python3-opencv

 

一、图像本身参数数据的分析和处理

首先得了解下图像在计算机中存储形式:
对于只有黑白颜色的灰度图,为单通道,一个像素块对应矩阵中一个数字,数值为0到255, 其中0表示最暗(黑色) ,255表示最亮(白色)。对于采用RGB模式的彩色图片,为三通道图,Red、Green、Blue三原色,按不同比例相加,一个像素块对应矩阵中的一个向量, 如[24,180, 50],分别表示三种颜色的比列, 即对应深度上的数字,如下图所示:

需要注意的是,由于历史遗留问题,openCV采用BGR模式,而不是RGB,编程时按所需利用代码转换即可。

这里结合NumPy(Numerical Python 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。)对图像的数组做分析处理,比如提取像素颜色数据、计算统计颜色数值等。结合openCV内部的函数算法,还可将图像转灰度后提取图像里的轮廓等信息,如下图。

二、将图像内物体或图案识别成文本信息然后分析和处理

1、二维码识别案例
二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。

这里用python的pyzbar来识别图像的二维码,反馈图像二维码里的信息和二维码在图像里的位置。

2、文字识别OCR案例
OCR (Optical Character Recognition,光学字符识别)
这里用python3的pytesseract,安装指令:
sudo apt install tesseract-ocr
sudo apt install libtesseract-dev
sudo pip3 install pytesseract

从官网下载中文语言包文件:chi_sim.traineddata,
文件放置位置:
/usr/share/tesseract-ocr/4.00/tessdata

运行python程序,识别图像里的文字。

3、机器学习-人脸识别案例
用openCV的CascadeClassifier(级联分类器)
使用现成的人脸特征机器学习的训练数据:haarcascade_frontalface_alt.xml

除了人脸识别,openCV官网里还有其他的多种识别分类器。

4、利用云平台的图像识别
这里以百度AI开放平台为例:

编程往其产品端口发送图像的base64编码。
然后,平台返回,图片里识别出的物体名称、置信度、位置大小。

最后,这些识别出的信息数据可以做分析、保存、或联网传输处理。
还有其他很多树莓派图像识别的方案案例,欢迎大家一同探讨。

 

 

 

 

树莓派识别ID\IC卡的RFID联网案例简介

射频识别(RFID)是 Radio Frequency Identification 的缩写。其原理为阅读器与标签之间进行非接触式的数据通信,达到识别目标的目的。RFID 的应用非常广泛,典型应用有动物晶片、汽车晶片防盗器、门禁管制、停车场管制、生产线自动化、物料管理。日常生活工作中,常见的RFID标签就有:ID、IC感应卡或钥匙圈

ID 卡全称身份识别卡(Identification Card),是一种不可写入的感应卡,含固定的编号,一般会标注在卡片上。ID 卡属于低频卡,工作频率一般是 125KHz-1000Khz。

IC 卡全称集成电路卡(Integrated Circuit Card),又称智能卡(Smart Card),可读写,容量大,有加密功能,数据记录方便。IC 卡一般是 13.56MHz 的高频卡,跟手机 NFC 工作频率一样。所以手机 NFC 可以模拟未加密的 IC 卡,不能模拟 ID 卡。

这里树莓派识别ID\IC卡利用RFID射频感应模块:
ID卡识别利用STC15模块;IC卡识别利用的是PN532模块

RFID射频感应模块与树莓派通信采用TTL串口,TX与RX交错相接即可。

然后对树莓派运行的python编程,原理是往串口发送读卡指令,接收感应模块从串口发来的消息,并对消息进行分析得到ID\IC卡号。

如果获取到卡号信息后,之后可以做数据传输操作比如MQTT发布消息或写入MYSQL数据库等。

最后可以按项目情况做成各种应用,比如:在手机里查看刷卡记录。

关于RFID或是树莓派的其他玩法,大家可以一起来交流。

树莓派的阿⾥巴巴普惠字体使用方法简介

2021年5 月 14 日,阿里巴巴官方发布,阿里普惠体 2.0 。

阿⾥巴巴普惠体(中⽂字体,指定5款字重),Alibaba Sans(⻄⽂字体,指定11款字 重),以下合称阿⾥巴巴字体,允许任何个⼈和企业免费使⽤,包括商⽤⽤途,但禁⽌⽤于 违法⽤途。

阿⾥巴巴字体文件可以从其官网下载。

下载后打开就可以先给电脑PC安装。

在树莓派里使用阿⾥巴巴字体的方法:

这里树莓派系统用官方带桌面系统:Raspberry Pi OS with desktop

先给树莓派安装中文输入法,安装命令:

sudo apt install fcitx fcitx-googlepinyin fcitx-module-cloudpinyin fcitx-sunpinyin

在工具栏里可看到输入法的设置了。

将阿⾥巴巴字体文件夹和文件放置在树莓派的:/usr/share/fonts

这样阿⾥巴巴字体就安装好了。

打开LibreOffice Writer,就可以看到刚安装的阿⾥巴巴字体,然后输入内容并可以使用了。

有了中文字体,其实也可以解决了树莓派运行python的opencv中cv2.putText() 只能显示英文字符、显示中文乱码的问题。

python案例代码:

# -*- coding: utf-8 -*-
import cv2
import numpy as np
from PIL import Image, ImageDraw, ImageFont

#图像设置
width = 800
height = 600
pixel = np.array([50,0,0],np.uint8)
w = np.array([pixel]*width,np.uint8)
newImg = np.array([w]*height,np.uint8)

# 图像从OpenCV格式转换成PIL格式
img_PIL = Image.fromarray(cv2.cvtColor(newImg, cv2.COLOR_BGR2RGB))
#字体设置
font = ImageFont.truetype(‘Alibaba-PuHuiTi-Regular.ttf’, 40)
# 文字输出位置
position = (100, 100)
# 输出内容
str = ‘在图片上输出中文,阿里巴巴普惠体’
draw = ImageDraw.Draw(img_PIL)
draw.text(position, str, font=font, fill=(0, 255, 0))
# 转换回OpenCV格式
img_OpenCV = cv2.cvtColor(np.asarray(img_PIL), cv2.COLOR_RGB2BGR)
cv2.imshow(“print chinese to image”, img_OpenCV)
cv2.waitKey()

运行后如下图:

成功输出的图像里显示了阿里巴巴字体的中文。

关于阿⾥巴巴字体的用法或是树莓派的其他玩法,大家可以一起来交流。

树莓派4B简介及一个玩法介绍

树莓派(Raspberry Pi)基金会,2019年6月24日正式发布了Raspberry Pi 4 Model B。树莓派4代基于 BCM2711 构建,完全重新实现了 28nm 的 BCM283X。使用更强大的 Cortex-A72 内核取代 Cortex-A53,从而使性能较树莓派3B+提高了2到4倍(具体取决于测试基准)。

以下是 Raspberry Pi 4 Model B 的亮点:

  • 1.5GHz 4核心64位 ARM Cortex-A72 CPU (~3×倍性能)
  • 1GB/2GB/4GB LPDDR4 SDRAM 内存
  • 全吞吐量千兆以太网
  • 双频 802.11ac 无线网络
  • 蓝牙 5.0
  • 两个 USB 3.0 和两个 USB 2.0 接口
  • 双显示器支持,分辨率高达 4K
  • VideoCore VI 显卡,支持 OpenGL ES 3.x
  • HEVC 视频 4Kp60 硬解码
  • 完全兼容早期的树莓派产品

电源

新版本已经用 USB-C 接口替换了之前的 USB micro-B 电源接口,这将支持更大的功率。而且新增了 USB OTG Boot 功能。

视频

为了在现有的电路板尺寸小支持双显示器输出,新版本使用了两个 HDMI D 型接口(micro DHMI)取代之前的 HDMI A 型接口。

这次玩法说明:

在树莓派4上安装一个3.5inch RPi LCD触摸屏,系统就用最新的官方桌面系统:Raspberry Pi OS。

这个玩法解决问题:当树莓派所处在的网络环境变化时如需远程联接时需要寻找树莓派的IP地址。

以前的处理办法是一般是用PC连接入网络后用ip扫描软件工具或查看路由器记录找树莓派的IP或者使用树莓派的HDMI接显示屏直接看树莓派的IP,因此还有有些不方便。

这个玩法的做法是在这个3.5寸屏上开机后如果树莓派是联网状态就显示出树莓派的IP地址。这样还可以在界面里方便地重启和安全关闭树莓派。

点击界面里的“网络 IFconfig”按钮还可以查看到系统命令:ifconfig显示树莓派网络设备详细信息。

在首页界面里点击“IP 二维码”,会显示带有树莓派IP信息的二维码。这样可以方便地用手机里的微信或浏览器等就可以扫码进入到树莓派WEB应用服务。

这个玩法编程实现主要是利用python的flask微型的WEB框架,还有制作各个html界面,然后设置让树莓派开机自启程序即可。

大家也来可以多多交流树莓派各种玩法,或是提供建议意见。