texte
|, \verb=\begin{center} texte \end{center}=, etc. + +\smallskip +\emph{Internet, long documents, documentation.} +\end{itemize} +\end{frame} + +\begin{frame}{Scribus} +\begin{description} +\item[Domaine :] arts graphiques, affiches, revues, journaux. +\item[Idée :] aide au positionnement des images, répartition du texte dans des blocs dépendants. +\end{description} +\begin{columns} +\begin{column}{0.5\textwidth} +\centering \includegraphics[width=5.5cm]{Scribus.eps} +\end{column} +\begin{column}{0.5\textwidth} +\centering \includegraphics[width=5.5cm]{aqua.eps} +\end{column} +\end{columns} +\end{frame} + +\begin{frame}{LibreOffice\hypertarget{LOstylesretour}{}} +Traitement de texte classique. Bien que \dots{} + +\begin{center} +\includegraphics[width=6cm]{writerLO} +\end{center} + +Gestion avancée des styles, références, bibliographie, index, \dots{} +\begin{flushright} +\hyperlink{LOstyles}{\beamerbutton{LibreOffice avec styles}} +\end{flushright} +\end{frame} + +\begin{frame}{Latex} +Traitement de texte haute qualité : + +gestion professionnelle automatique de la typographie. + +\smallskip +\begin{columns} +\begin{column}{0.55\textwidth} +\includegraphics[width=6cm]{kile.eps} +\end{column} +\begin{column}{0.45\textwidth} +Exemples : + +\smallskip +\emph{\tiny ``L'astrolabe, histoire théorie et pratique'' et\\ "Loxodromie et projection de Mercator``}. + +\smallskip +\includegraphics[width=2cm]{Loxodromie.eps}\qquad \includegraphics[width=2cm]{Astrolabe.eps} +\end{column} + +\end{columns} +Autre exemple connu : votre``formulaire et tables''... +\end{frame} + +\begin{frame}{Xhtml et Css} +\begin{center}Orientation web -- séparation du contenu et de la forme.\end{center} + +\small Langages balisés sans boucles, fortement normalisés et strict. + +\smallskip +\begin{columns} +\begin{column}{0.5\textwidth} +\centering \includegraphics[width=5cm]{Xhtml.eps} +\end{column} +\begin{column}{0.5\textwidth} +\centering \includegraphics[width=5cm]{css.eps} +\end{column} +\end{columns} +\end{frame} + +\begin{frame}{Publication multi-support} +Aujourd'hui les supports d'édition sont multiples. + +\smallskip +\includegraphics[width=10cm]{DiagTexte.eps} +\end{frame} + +\begin{frame}{Publication multi-support} +Et les langages nécessaires aussi (\small{\LaTeX et MySQL ne sont pas XML}). + +\smallskip +\includegraphics[width=10cm]{DiagTexteLang.eps} +\end{frame} + +\begin{frame}{XML (eXtensible Markup Language)} + +{\centering Idée : structurer du contenu à l'aide de balises : {\color{red}<} et {\color{red}>}. + +\smallskip +{\scriptsize Exemple : {\color{red}#
+\verb=Ma première
page WML=
+\verb=
Texte
+\end{lstlisting} +\end{block} +\begin{columns} +\begin{column}{0.5\textwidth} +\begin{block}{Feuille interne} +\begin{lstlisting}[language=HTML,basicstyle=\scriptsize,breaklines=true] + + + +\end{lstlisting} +\end{block} +\end{column} +\begin{column}{0.5\textwidth} +\begin{block}{Feuille externe} +\begin{lstlisting}[language=HTML,basicstyle=\small,breaklines=true] + + + +\end{lstlisting} +\end{block} +\end{column} +\end{columns} +\end{frame} + +\begin{frame}{Feuilles de styles : CSS} +Idée : séparer le contenu de la forme. Syntaxe : + +\begin{center} +\fbox{sélecteur \{propriété:valeur\}} +\end{center} + +\begin{columns} +\begin{column}{0.4\textwidth} +\small +\textbf{Exemples :} + +\medskip +h1 \{font-size:120;\} + +\smallskip +p \{font-family:``sans serif''; font-size:90\%; color:red\} +\end{column} +\begin{column}{0.6\textwidth} +\small +\textbf{Meilleure indentation :} + +\smallskip +h1, h2 \{ +\begin{tabbing} + font-family: ``sans serif'';\\ + color: red; +\end{tabbing} +\} +\end{column} +\end{columns} +\end{frame} + +\begin{frame}{Feuilles de styles : sélecteurs} + +\begin{columns} +\begin{column}{0.5\textwidth} +\small +\textbf{Sélecteurs imbriqués :} + +Toutes les sélections (span) de chaque paragraphes (p) sont passées en rouge. + +\bigskip +La voiture est très petite
+ +\medskip +p span \{color: red;\} + +\smallskip +La voiture est {\color{red} très} petite +\end{column} +\begin{column}{0.5\textwidth} +\small +\textbf{Sélecteur identifié :} + +Attention le sélecteur identifié est unique ! En d'autres termes, on ne peut mettre plusieurs identifiants identiques. + +\bigskip +Un pti texte
+ +\medskip +\#cetexte \{color: red\} + +\smallskip +{\color{red} Un ptit texte} +\end{column} +\end{columns} +\end{frame} + +\begin{frame}{Feuilles de styles : CSS} +\begin{columns} +\begin{column}{0.5\textwidth} +\small +\textbf{Sélecteurs de classe :} +Il s'agit d'appliquer un style à un ensemble d'éléments donnés. + +\bigskip +La
+ +deux chevaux, + +sa puissance
+ +c'est la lenteur.
+ +\medskip +.laclass \{color:red\} + +\medskip +{\color{red}\smallskip +\textbf{La } +\emph{deux chevaux, } +sa puissance} +c'est la lenteur. +\end{column} +\begin{column}{0.5\textwidth} +\small +\textbf{Sélecteur contextuel :} +Il s'agit d'appliquer un style suivant le contexte. + +\bigskip +Le vélo, c'est bien
+
+\medskip
+div:hover \{background-color: red;\}
+
+\medskip
+Ici, en passant la souris sur le div, il devient rouge.
+\end{column}
+\end{columns}
+\end{frame}
+
+\begin{frame}{Feuilles de styles : CSS}
+\begin{columns}
+\begin{column}{0.5\textwidth}
+\small
+\textbf{Plusieurs sélecteurs :}
+Il s'agit d'appliquer le même style à plusieurs sélecteurs différents.
+
+\bigskip
+La
+ +deux chevaux, + +sa puissance
+ +c'est la lenteur.
+ +\medskip +h1, em, p \{color:red\} + +\medskip +{\color{red}\smallskip +\textbf{La } +\emph{deux chevaux, } +sa puissance +c'est la lenteur.} +\end{column} +\begin{column}{0.5\textwidth} +\small +\textbf{Et d'autre encore \dots} +A découvrir. +\end{column} +\end{columns} +\end{frame} + +\begin{comment} +%\begin{frame}[containsverbatim]{Structure générale} +\begin{frame}{Ancienne structure générale} +%\lstset{keywordstyle=\color{red},emph={body},emphstyle=\color{pink},emph=[2]head,emphstyle=[2]\color{yellow},emph=[3]html,emphstyle=[3]\color{blue}} +%\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true] +%\end{lstlisting} +\begin{footnotesize} +\begin{itemize} +\item \only<1>{Prologue XML, nécessaire que pour une utilisation XML de XHTML.\\}\only<1>{\color{red}}\only<2->{} +\item \only<2>{Déclaration de DOCTYPE ou DTD (Définition de Type de Document) : vocabulaire, grammaire et règles de mise en forme.\\}\only<2>{\color{red}}\only<3->{} +\item \only<3>{Espaces de nommage : XML name space et evt. langue.\\}\only<3>{\color{red}}\only<4->{} +\item \only<4>{Entête : titre, informations, déclaration de styles, scripts javascript \dots{}\\}\only<4>{\color{red} +
+\end{lstlisting}
+\end{block}
+\begin{block}{... avec un gif animé ...}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.6\textwidth}
+\begin{block}{Déplacement du gif animé en javascript}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+function deplace(){
+ identification = document.getElementById('robot')
+ position = parseInt(identification.style.left)
+ position = position + 10
+ identification.style.left = position+"px"
+ }
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+\begin{center}
+\href{run:Javascript/AnimationJavascript1.html}{\beamerbutton{RĂ©sultat}}
+
+\href{run:Javascript/AnimationJavascript1.txt}{\beamerbutton{Code}}
+\end{center}
+\end{frame}
+
+\begin{frame}[containsverbatim]{Animation javascript 2 : tableau d'images}
+\begin{columns}
+\begin{column}{0.5\textwidth}
+On crée un tablau de références d'images :
+\begin{block}{Tableau}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+var imgFiles = new Array (
+ "Cours/Cours_e0000.gif",
+ "Cours/Cours_e0001.gif",
+ "Cours/Cours_e0002.gif",
+ "Cours/Cours_e0003.gif",
+ "Cours/Cours_e0004.gif",
+ "Cours/Cours_e0005.gif",
+ "Cours/Cours_e0006.gif",
+ "Cours/Cours_e0007.gif"
+ )
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.5\textwidth}
+On appelle à intervalle régulier la fonction :
+\begin{block}{Animation}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+function animate(){
+ frame += 1
+ if (frame > imgFiles.length){
+ frame = 0
+ }
+ spriteImage.src = imgFiles[frame]
+ }
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+\begin{center}
+\href{run:Javascript/AnimationJavascript2.html}{\beamerbutton{RĂ©sultat}}
+
+\href{run:Javascript/AnimationJavascript2.txt}{\beamerbutton{Code}}
+\end{center}
+\end{frame}
+
+\begin{frame}[containsverbatim]{Animation javascript 3 : une seule image}
+\begin{columns}
+\begin{column}{0.5\textwidth}
+\begin{block}{Frames juxtaposées en css}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+ #contenant {
+ background-image: url("Cours/Cours_8.gif");
+ height: 128px;
+ width: 128px;
+ background-position: 0px 0px;}
+\end{lstlisting}
+\end{block}
+\begin{block}{Tableau des décalages}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+ var offsetList = new Array(0, -128, -256, -384, -512, -640, -768, -896)
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.5\textwidth}
+\begin{block}{Parcours de l'image}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+function cours(){
+ frame++
+ if (frame >= offsetList.length){
+ frame = 0
+ }
+ offset = offsetList[frame] + "px 0px"
+ contenant.style.backgroundPosition = offset
+ }
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+\begin{center}
+\href{run:Javascript/AnimationJavascript3.html}{\beamerbutton{RĂ©sultat}}
+
+\href{run:Javascript/AnimationJavascript3.txt}{\beamerbutton{Code}}
+\end{center}
+\end{frame}
+
+\begin{frame}[containsverbatim]{Animation javascript 4 : le déplacement}
+\begin{columns}
+\begin{column}{0.5\textwidth}
+\begin{block}{Gestion du clavier}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+document.onkeypress = keyListener
+\end{lstlisting}
+\end{block}
+\begin{block}{DĂ©tection des touches}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+function keyListener(e){
+ if (e.keyCode == 37){
+ moveContenant(-10, 0)
+ } // gauche
+ if (e.keyCode == 38){
+ moveContenant(0, -10)
+ } // haut ... }
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.5\textwidth}
+\begin{block}{DĂ©placement de l'image}
+\begin{lstlisting}[language=HTML,basicstyle=\tiny,breaklines=true]
+function moveContenant(dx, dy){
+ x = parseInt(contenant.style.left)
+ y = parseInt(contenant.style.top)
+ x += dx
+ y += dy
+ contenant.style.left = x + "px"
+ contenant.style.top = y + "px"
+ }
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+\begin{center}
+\href{run:Javascript/AnimationJavascript4.html}{\beamerbutton{RĂ©sultat}}
+
+\href{run:Javascript/AnimationJavascript4.txt}{\beamerbutton{Code}}
+\end{center}
+\end{frame}
+
+\begin{frame}[containsverbatim]{Animation javascript 5 : le tout}
+\begin{columns}
+\begin{column}{0.5\textwidth}
+\begin{block}{Un joli résultat}
+\href{run:Javascript/AnimationJavascript5.html}{\beamerbutton{RĂ©sultat}}
+\end{block}
+\end{column}
+\begin{column}{0.5\textwidth}
+\begin{block}{Un joli ``petit'' programme}
+\href{run:Javascript/AnimationJavascript5.txt}{\beamerbutton{Code}}
+\end{block}
+\end{column}
+\end{columns}
+\end{frame}
+
+\appendix
+\section*{Références}
+\begin{frame}[allowframebreaks]{Crédits photographiques}\label{notes}
+\tiny{L'ensemble des illustrations utilisées dans cette présentation sont publiées sur le net soit sous licence GFDL, soit dans le domaine publique. Ci-dessous se trouvent les liens permettant de vérifier les licences. Ils donnent aussi accès aux auteurs que je remercie tout particulièrement pour leur travail sans lequel cette présentation n'aurait pas pu exister.}
+
+\medskip
+\theendnotes
+\end{frame}
+
+\end{document}