Feat: modifie le cours microbit et début les bases de programmation
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
e611e5c152
commit
51ce98c32d
Binary file not shown.
@ -21,17 +21,29 @@
|
|||||||
\includegraphics[scale=0.5]{./fig/micro-bit}
|
\includegraphics[scale=0.5]{./fig/micro-bit}
|
||||||
\end{center}
|
\end{center}
|
||||||
|
|
||||||
Quelques unes de ses capacités
|
\paragraph{Les capteurs:}
|
||||||
\begin{itemize}
|
\begin{itemize}
|
||||||
\item 25 LEDs programmables individuellement
|
\item 2 boutons A et B \dotfill
|
||||||
\item 2 boutons programmables
|
\item Capteurs de lumière \dotfill
|
||||||
|
\item Capteurs de température
|
||||||
\item Broches de connexion (pin ou GPIO)
|
\item Broches de connexion (pin ou GPIO)
|
||||||
\item Capteurs de lumière et de température
|
\item Une boussole \dotfill
|
||||||
\item Capteurs de mouvements (accéléromètre et boussole)
|
\item Capteurs de mouvements (accéléromètre et boussole) \dotfill
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\paragraph{Les actionneurs:}
|
||||||
|
\begin{itemize}
|
||||||
|
\item 25 LEDs programmables individuellement \dotfill
|
||||||
|
\item Broches de connexion (pin ou GPIO)
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
|
\paragraph{Autres:}
|
||||||
|
\begin{itemize}
|
||||||
\item Communication sans fil, via Radio et Bluetooth
|
\item Communication sans fil, via Radio et Bluetooth
|
||||||
\item Interface USB
|
\item Interface USB
|
||||||
\end{itemize}
|
\end{itemize}
|
||||||
|
|
||||||
\end{definition}
|
\end{definition}
|
||||||
|
|
||||||
|
\afaire{Indiquer les commandes qui permettent d'accéder aux éléments}
|
||||||
|
|
||||||
\end{document}
|
\end{document}
|
||||||
|
Binary file not shown.
@ -1,8 +1,9 @@
|
|||||||
\documentclass[a4paper,10pt]{article}
|
\documentclass[a4paper,10pt]{article}
|
||||||
\usepackage{myXsim}
|
\usepackage{myXsim}
|
||||||
|
\usepackage{minted}
|
||||||
|
|
||||||
\author{Benjamin Bertrand}
|
\author{Benjamin Bertrand}
|
||||||
\title{Web HTML CSS - Cours}
|
\title{Python et micro:bit - Cours}
|
||||||
\date{Septembre 2022}
|
\date{Septembre 2022}
|
||||||
|
|
||||||
\pagestyle{empty}
|
\pagestyle{empty}
|
||||||
@ -11,98 +12,33 @@
|
|||||||
|
|
||||||
\maketitle
|
\maketitle
|
||||||
|
|
||||||
\section{Le web}
|
\setcounter{section}{1}
|
||||||
|
\section{Corpus élémentaire}
|
||||||
|
|
||||||
\begin{definition}[ Le web ]
|
\subsection{Types de bases}
|
||||||
Le World Wide Web (littéralement la « toile (d’araignée) mondiale », abrégé www ou le Web), la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages web entre elles.
|
|
||||||
|
|
||||||
\flushright{Source: Wikipedia}
|
Vous serez amené à utiliser essentiellement 4 types de base:
|
||||||
\end{definition}
|
|
||||||
|
|
||||||
\subsection*{Les navigateurs web}
|
|
||||||
|
|
||||||
\afaire{Lister 5 navigateurs web}
|
|
||||||
|
|
||||||
\vspace{2cm}
|
|
||||||
|
|
||||||
\subsection*{Les languages du web}
|
|
||||||
|
|
||||||
On utilise classiquement 3 langages pour programmer des pages web. C'est 3 langages se complètent et ont un rôle distinct dans le rendu final.
|
|
||||||
\begin{center}
|
\begin{center}
|
||||||
\begin{tabular}{ccc}
|
\begin{tabular}{p{2cm}cccc}
|
||||||
\includegraphics[scale=0.4]{./fig/CSS3_logo}
|
Nom & Les entiers signés & Les flottants & Les strings & Les booléens \\
|
||||||
&
|
Type & int & float & str & bool \\
|
||||||
\includegraphics[scale=0.9]{./fig/HTML5_logo}
|
Affectation &
|
||||||
&
|
\mintinline[bgcolor=base3]{python}{variable = 2} &
|
||||||
\includegraphics[scale=0.3]{./fig/JavaScript_logo}
|
\mintinline[bgcolor=base3]{python}{variable = 2.2} &
|
||||||
\\
|
\mintinline[bgcolor=base3]{python}{variable = "2"} &
|
||||||
Décoration & Contenu & Interaction
|
\mintinline[bgcolor=base3]{python}{variable = True} \\
|
||||||
|
|
||||||
|
Opérateurs &
|
||||||
|
\texttt{+ - * // \% **}&
|
||||||
|
\texttt{+ - * / **}&
|
||||||
|
\texttt{+ *}&
|
||||||
|
\texttt{or and not} \\
|
||||||
\end{tabular}
|
\end{tabular}
|
||||||
\end{center}
|
\end{center}
|
||||||
|
|
||||||
\section{HTML}
|
\textbf{L'affectation}, représenté en python par le symbole \texttt{=}, est l'opération qui va associé
|
||||||
|
|
||||||
\begin{definition}[ Le HTML ]
|
|
||||||
Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web.
|
|
||||||
|
|
||||||
\flushright{Source: Wikipedia}
|
|
||||||
\end{definition}
|
|
||||||
|
|
||||||
\subsection*{Les balises}
|
|
||||||
|
|
||||||
Les balises permettent de \textbf{structurer} le contenu d'une page HTML.
|
|
||||||
|
|
||||||
\begin{center}
|
|
||||||
\includegraphics[scale=2]{./fig/anatomie-element-html}
|
|
||||||
\end{center}
|
|
||||||
|
|
||||||
Quelques balises:
|
|
||||||
\afaire{Reprendre la liste des balises vues en classe et expliquer leur utilité}
|
|
||||||
\vspace{2cm}
|
|
||||||
|
|
||||||
On peut ajouter à cette liste deux balises génériques qui jouent le role de conteneur pour la décoration CSS:
|
|
||||||
\begin{itemize}
|
|
||||||
\item \texttt{<span>...</span>}: balise \textbf{sans} retour à la ligne avant utilisé pour le mise en forme d'une partie d'un texte.
|
|
||||||
\item \texttt{<div>...</div>}: balise \textbf{avec} retour à la ligne avant utilisé pour la mise en forme d'une partie de la page.
|
|
||||||
\end{itemize}
|
|
||||||
|
|
||||||
\bigskip
|
|
||||||
|
|
||||||
Les balises doivent être bien imbriquée. C'est à dire qu'il faut fermer la dernière balise ouverte avant les autres.
|
|
||||||
|
|
||||||
\begin{multicols}{2}
|
|
||||||
Balises bien imbriquées
|
|
||||||
\begin{lstlisting}
|
|
||||||
<div>
|
|
||||||
Conversation
|
|
||||||
<p>
|
|
||||||
Bonjour
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
|
|
||||||
Balises mal imbriquées
|
|
||||||
\begin{lstlisting}
|
|
||||||
<div>
|
|
||||||
Conversation
|
|
||||||
<p>
|
|
||||||
Bonjour
|
|
||||||
</div>
|
|
||||||
</p>
|
|
||||||
\end{lstlisting}
|
|
||||||
\end{multicols}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
\subsection*{Validation}
|
|
||||||
|
|
||||||
Même si le rendu d'une page web peut sembler correcte, cela ne signifie pas que le code respecte les normes du HTML. En effet, les navigateurs sont en général très permissifs sur la qualité du code qui leur est fourni.
|
|
||||||
|
|
||||||
Ces normes sont définis pas le W3C (World Wide Web Consortium). Cet organisme propose un validateur:
|
|
||||||
\begin{center}
|
|
||||||
\url{https://validator.w3.org/#validate_by_upload}
|
|
||||||
\end{center}
|
|
||||||
|
|
||||||
|
|
||||||
\end{document}
|
\end{document}
|
||||||
|
Loading…
Reference in New Issue
Block a user