Du 16 Janvier au 24 Février 2017

Animations Flash et animations en CSS3 !

En CSS3, Je découvre toutes sortes d’animations tel que le flip3D:

capture-decran-2017-03-01-a-22-00-05

mais l’essentiel de mon travail d’animation aura été durant mon stage avec le site  ccomceline.fr

 

Au niveau de l’animation Flash, je découvre les différents outils du logiciel. Je créé donc un petit train en mouvement (roues qui tournent, train qui avance et sursaute…) et apprends à l’ intégrer en .SWF à l’aide de la balise « object ».

 

semaine 51 à … (du 4 Septembre 2016 au 12 janvier 2017)

On change d’année et les semaines commencent devenir nombreuses donc je cesse de compter. Au final, j’aurais 1 an de formation et 6 mois de stage.

Je suis en stage à Besançon et élabore un site pour une graphiste indépendante. Je trie et retouche des centaines d’images.

Le but est de présenter et mettre en valeur son activité professionnelle. Via Bootstrap, je lui ai donc créé un site web:

ccomceline.fr

semaine 48 (du 16 au 19 Aout)

Cette semaine, je découvre le fonctionnement de Javascript. Le but n’est pas de faire de moi un développeur, mais de comprendre suffisamment son fonctionnement pour pouvoir modifier ou intervenir sur un script le cas échéant.

Le principes de fonctionnement et quelques « événements » sont aborder;

C’est ainsi que je découvre les variables « var », les « id » ainsi que « getElementById », les « alert », « prompt », les boucles « while », « if », « else if », « do », « onchange », « onkeyup », « onmouseover », « isNaN »,………Bref j’ai découvert « Javascript ».

semaine 41-42 (du 20 Juin au 1er Juillet)

Durant ces deux semaines je vais explorer SASS.

Dans un premier temps, il faut maitriser un minimum le terminal.

De nombreuses manipulations sont effectuées pour passer d’un dossier à un autre. Apprendre le fonctionnement du terminal a une finalité principale: taper la fameuse commande qui me permettra de convertir les fichiés SASS en CSS automatiquement.

Une fois le teminal ouvert à même le dossier concerné, la commande est donc: sass –watch scss:css

Par la suite, je met en forme, selon des consignes précise une page web en responsive design, via SASS:

Capture d'écran 2016-07-05 à 12.03.54

Capture d’écran 2016-07-05 à 12.08.36

semaine 35 à 39 (du 9 Mai au 10 Juin)

Durant ce mois, nous aborderons le PHP.

Des brides de php avaient été entrevues pour pouvoir modifier les templates à notre guise, mais cette fois ci nous allons un peu plus loin.

Une dizaine de petits exercices me sont proposé pour découvrir les bases du php. C’est aussi l’occasion de découvrir le fonctionnement d’un formulaire. En voici quelques exemples:

Capture d’écran 2016-07-05 à 09.12.08

Capture d’écran 2016-07-05 à 09.14.02

Capture d’écran 2016-07-05 à 09.15.44

Capture d’écran 2016-07-05 à 09.19.09

Capture d’écran 2016-07-04 à 14.58.10

Capture d’écran 2016-07-04 à 15.27.42

Capture d’écran 2016-07-05 à 09.26.33

Capture d’écran 2016-07-04 à 15.31.03

Capture d’écran 2016-07-05 à 09.24.17

semaine 33 (du 25 Avril au 29 Avril)

Cette semaine, j’aborde les Templates WordPress

Dans un premier temps, différents thèmes de base sont à disposition.

Je choisis donc ‘twentysixteen’, le thème le plus récent qui me permettra de l’adapter et de le modifier à ma guise.

 

Connaitre la hiérarchie établie des Templates me permet de modifié mon thème en y ajoutant par exemple un plugin.

Pour ceci, j’utilise le tableau ci-dessous et je duplique mon thème ‘twentysixteen’ pour créer un thème enfant. (mon thème parent doit rester intact).

 

Template_Hierarchy_2015

 

semaine 28 à 31 (du 21 Mars au 15 Avril)

Le dossier Einstein est une grosse partie de notre apprentissage HTML-CSS, par le biais de deux mise en page;

Cet exercice sera long et laborieux car chaque étape sera disséqué, effectué et corrigé; le tous sera entrecoupé de cours et de petit exercices basique pour mettre en application ces nouveaux acquis.

L’essentiel des différents cas de figure que je pourrais rencontrer dans le HTML et CSS va ainsi m’être enseigné.

Si le positionnenement à l’aide du « float » et les différentes positions (absolute, relative et fixed) ont déjà été évoquées, cet exercice me permet d’approfondir et de réviser mes acquis.

Pour la première mise en page, ces connaissances sont nécessaire et suffisantes

J’ai donc à ma disposition un texte, des images, et une image papier du résultat à obtenir.

L’image va ainsi être créé pas à pas avec de multiples consignes.

Dans un premier temps, la mise en page est assez basic car seul le fichier HTML est créé.

C’est ainsi qu’il faut sectionner convenablement le fichier à l’aide de balises « body », « section », « img », « caption », « figcaption », « div »,…. tout en y incorporant des listes à puces, des « id », des « class », des « ancres »,…. et un tableau.

Voici quelques lignes du code HTML structuré et finalisé:

Capture d’écran 2016-04-11 à 11.05.18

Capture d’écran 2016-04-11 à 11.07.07

Ainsi que la page exempte de tout CSS:

Capture d'écran 2016-04-11 à 11.12.35

 

Puis, j’entame la mise en page à l’aide du CSS:

-les différents liens doivent changer d’état au survole (couleur de texte, couleur de fond, suppression du soulignement)

-le menu de navigation dans la colonne de gauche doit être en position fixe, et la barre noir la plus épaisse devient rouge au survole des liens

-l’image dans la bannière et le fond, sont des images incorporées via le CSS

-le bouton « retour » redirige en haut de la page, et les titres du menu de navigation redirigent à chaqu’un des titres identique de la page

Le reste est visible sur le document papier.

 

C’est ainsi que je réalise cette page en additionnant un code CSS:

Capture d'écran 2016-04-11 à 10.43.40

 

La deuxième mise en page va par la suite être créé.

Les nouveautés sont:

-la création d’un dégradé en fond

-la création de lettrine en début de certains paragraphe

-un menu se déroulant au survole, avec une flèche qui change de sens

-un tableau et des figcaption se déroulant au survole

-une gestion de la vitesse de déroulement en incorporant du « javascript » générer automatiquement

Le reste est visible sur le document papier.

 

Les pseudo-éléments prennent alors tout leurs sens; j’utilise aussi la propriété « clearfix », très utile pour englober des éléments flottant.

De multiples astuces me sont enseignés tel que l’utilisation des bordures d’un rectangle pour créer des flèches, les générateur de codes pour dégradés, l’importance de laisser un titre h1 pour le référencement même si il est en « display:none » ou « color:transparent »….

Bref j’obtiens ceci à l’aide du résultat final:

Capture d'écran 2016-04-18 à 10.19.54

semaine 24 (du 22 Février au 26 Février)

Cette semaine, j’approfondis l’utilisation de listes, ainsi que l’utilisation de la numérotation automatique:
Capture d’écran 2016-02-29 à 11.56.42

 

Grace à ce code, j’obtiens ainsi ces 2 pages:

Table des matières

Table des matières2

 

En milieu de semaine, j’utilise les adresses relatives (précédemment, je ne connaissais que les adresses absolues).

J’ai donc un fichier à ma disposition avec une multitude de sous dossiers, composés notamment de pages numérotés et d’un sommaire:

Capture d’écran 2016-02-29 à 11.06.06

 

Chaque page doit avoir un lien vers le sommaire, et le sommaire doit avoir un lien vers chaque page (le tout en chemin relatif):

Capture d’écran 2016-02-29 à 11.04.57

 

Puis, la page « Einstein » continu. Dans un premier temps, je sectionne mes différente partis en insérant des « class », des « id » et un maximum de balises différentes, utiles à ma mise en page:

Capture d’écran 2016-02-29 à 11.26.17

 

Puis mon CSS vient compartimenter tout ceci:

Albert Einstein - Biographie

 

Par la suite, le CSS réel commence et je sélectionne ma typo, impose une taille, remet à zéro mes marges et personnalise mes liens actifs:

Capture d’écran 2016-02-29 à 11.36.44

Ainsi s’achève cette semaine…

semaine 23 (du 15 Février au 20 Février)

Cette semaine, nous attaquons HTML5 avec un peu de CSS.

Le premier exercice est un texte de Einstein. Je dois faire une mise page basic du texte en utilisant uniquement du HTML5. Puis trois images nous sont fournit et nous devons les insérer à l’aide du html. J’obtiens donc 2 pages:

 

La biographie d'Albert EinsteinLa biographie d'Albert Einstein2

 

Puis la semaine se poursuit avec la création de tableaux en HTML:

 

 

Contenu Contenu
Contenu Contenu
Contenu Contenu
Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu
Contenu Contenu
Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu
Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu
Contenu
Contenu
Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu
Contenu Contenu
Contenu Contenu
Contenu
Contenu Contenu Contenu
Contenu Contenu
Utilisation des navigateurs
2015 Firefox Chrome IE
44 43 42 49 48 47 11 10 9
2015 44 43 42 49 48 47 11 10 9
Firefox Chrome IE
décembre 23% 23% 23% 23% 23% 23% 23% 23% 23%
novembre 23% 23% 23% 23% 23% 23% 23% 23% 23%

 

Par la suite, j’ai à ma disposition cinq images à assembler sur le même principe qu’un tableau. Le résultat à obtenir est une image de la Joconde avec un oeil qui cligne. Le fichier doit être composé de HTML et de règle CSS incorporé. La difficulté est de supprimer les marges:

slices1
slices2_1 slices2_2 slices2_3
slices3

(Pour supprimer les marges:

border-spacing: 0; border:none; padding:0; display:block)

 

Puis je dois reproduire un tableau en incorporant des couleurs uniquement avec des CSS. Je découvre donc de nouveaux sélecteurs tel que pair (even) et impair(odd), ainsi que les « colgroup »:

Capture d’écran 2016-02-22 à 14.05.35

 

Et ainsi:

Capture d’écran 2016-02-22 à 13.54.23

semaine 21 (du 1 Février au 5 Février)

Cette semaine, le premier travail effectué est de modifié le design de mon blog.

Puis la semaine se poursuit avec des EFA blanc le mardi et officiel le jeudi, alterné de correction pour analysé nos erreurs.

Le mardi, deux exercices sur Photoshop, ainsi que deux sur Illustrator nous sont demandé.

Sur Illustrator, muni d’un plan avec des côtes précises, je dois reproduire une montre à l’extrême précision:

montre_03

Puis, l’ancien logo « Twitter » est fourni en bitmap et je dois le reproduire en effectuant un tracé à la plume avec une couleur donnée:

logo_twitter

 

Puis, sur Photoshop, je dois reproduire du Pixelart à partir d’un document papier:

pixelart

Par la suite, une image bitmap m’ est fourni:

b2objects014

 

Je dois par la suite reproduire un photomontage fournit sur papier(en utilisant au maximum les calques dynamique et le non destructif):

boules

 

La pré-évaluation s’achève donc ainsi.

 

Puis, le jeudi, les choses sérieuses commencent:

Il faut reproduire une page web à l’aide d’un modèle papier et du code fourni. Dans cette page, il faut y insérer quatre images:

la première est du Pixelart à reproduire à partir d’un modèle papier et de côte:

pixelart

 

La deuxième est un photomontage; j’ai donc à ma disposition deux images bitmap (ainsi que le résultat à obtenir en version papier avec des indications précises):

364003.TIF

364028.TIF

Différents effets tel que le changement de teinte, le passage en noir et blanc par des calques, l’utilisation de calques dynamique, l’utilisation de règles pour une mise en place au pixel près….. Et voici donc l’image final:

photomontage

 

La troisième image est un tracé à la plume sur un motif, un remplissage de couleur donné ainsi que l’utilisation d’une typo:

courbes

 

Puis la dernière image est une reproduction d’un radio-réveil à des côtes extrêmement précise, dupliqué dans une autre couleur, puis mis en page avec une typo donné:

precision

 

Toutes ces images sont évidemment enregistrées dans un format optimum et adapté pour le web. En finalité, ma page aura cette apparence:

Capture d’écran 2016-02-05 à 12.05.56

semaine 20 (du 25 Janvier au 29 Janvier)

 

J’ai à ma disposition une affiche papier, avec des angles à 45 degrés, que je dois reproduire. Toutes les connaissances enseignées sont mises à profit pour cette création: déformation, mise à l’échelle, rotation, transformation manuelle, ainsi que des outils plus courant d’Illustrator. J’utilise de même les différentes fonctions de la typo et de la mise en page du texte: captif, curviligne, ajustement des espacements, sens d’écriture….

 

affiche

 

 

La semaine se poursuit, avec la reproduction via Illustrator, d’une couverture papier de livre.

La nouveauté est l’utilisation du masque d’écrêtage pour le mot « CRASH », ainsi que la déformation de la typo et l’insertion d’une image en fond:

316016420_26519b532b_o
image fournit

 

Ayant une échelle et quelques mesures sur le papier, je mesure pour être au plus près de mon modèle et ainsi:

crash_03

 

semaine 19 (du 18 Janvier au 22 Janvier)

Cette semaine, la fausse 3D se poursuit par le biais d’une pince Facom. J’ai à ma disposition un modèle:

pinces---copie

 

J’utilise donc les filets de dégradé pour le manche, ainsi que la peinture dynamique associée à l’outil « dégradé de couleurs »pour la partie métallique:

Capture d’écran 2016-01-25 à 11.11.38pince

 

« Facom » en jaune est tracé à la plume, ainsi que la cale du ressort.

Les rayures sur le métal sont un trait noir répété

Le « Facom » sur le métal est un logo récupéré sur internet récupéré, retravaillé (duplication en gris et noir décalé pour l’effet de volume) et déformé à l’aide de l’outil « transformation manuel ».

J’obtiens en finalité ceci:

pince

 

Puis pour reproduire à l’identique l’image, deux contours grossier sont tracés (un en blanc et un en noir). Puis avec « objet-créer un filet de dégradé » je termine mon contour demandé:

pince

 

 

semaine 18 (du 11 Janvier au 15 Janvier)

Cette semaine débute par la reproduction de l’image d’une roue crantée aux côtes très précise.

J’utilise donc l’outil rotation et le pathfinder pour obtenir ceci:

roue_crante_03

 

Puis, nous décidons d’attaquer un nouveau chapitre: la fausse 3D via Illustrator.

Avant d’attaquer des formes complexe, des motifs simples à reproduire nous sont fournis. Ceci à pour objectif de nous faire découvrir de nouveaux outils: « mise à l’échelle » et « déformation ».

3D_decouverte

La 3D peut alors commencer: je dois reproduire une boite avec une isométrie de 60° et 45°.

L’ utilisation du cosinus de l’angle en degrés est alors indispensable:

cigarette

 

Puis, nous devons reproduire un robot en 3D, et lui créer un camarade. Ce robot doit être composé de cylindres et de cubes d’une iso à 120°, tout en y ajoutant des dégradés de couleurs. La première étape est de créer des formes géométrique simple d’un iso à 120 que je transformerais à ma guise. J’utilise des repères commentés auquel j’attribue moi-même l’angle.

volumes_3d

D’autre techniques seront survolé tel que « grille de perspective », ainsi que « extrusion et biseautage » dans « effet 3D »

 

Une fois ceci effectué, je reproduis le robot demandé:

robot

 

Puis je crée mon robot. Pour ce visuel, je suis obligé d’utiliser en plus des formes simple déformées, la technique « extrusion et biseautage ». En effet, le motif sur les roues est impossible à reproduire avec la première technique:

robot_perso

 

 

 

 

semaine 17 (du 4 Janvier au 8 Janvier)

Cette semaine, nous allons utiliser Illustrator pour faire de la cartographie.

Trois modèles me sont fournit:

Print - copiePrint - copie

quartier_latin

 

Et voici ce que j’obtiens:

cartographie10_03

cartographie13_03

 

cartographie_par_ilots_03

Et voici ma reproduction:

 

 

Puis, une un dessin papier d’une unité central m’est fournit. Je dois la reproduire en taille réelle avec une précision absolue, de la tour au logo, en passant par les prises usb et les filets de dégradés:

unite_centrale

La semaine s’achève ainsi…

semaine 15-16 (du 14 Décembre au 23 Décembre)

Cette semaine, je crée un alphabet complet, de style manuscrit, à l’aide d’Illustrator, composé de majuscules, de minuscules, de nombres et de quelques signes de ponctuation. (L’entrainement à la plume continue…)

Les lettres sont ensuite exportées en SVG (format vectoriel) sur des plans de travail différents:

RVB de base RVB de base RVB de base

 

Puis, une image de BD m’est fournit:

vec_bd

 

Je dois là vectoriser, et lui appliquer des couleurs (plume – pot de peinture dynamique – épaisseur de trait).

J’obtiens ceci:

vectorisation_bd-01

 

Puis, après l’ajout de motifs:

 

vectorisation_bd_03

semaine 13-14 (du 30 Novembre au 11 Décembre)

 

Cette semaine débute par le travail intensif de la plume.

Des photographies de feuilles d’arbres me sont fournis:

cerisier chene erable oranger saule

 

Je dois les détourer à la plume pour créer des formes pleines et ainsi reproduire une mise en page précise:

botanique

 

Le travail à la plume devient alors de plus en plus minutieux l’ors de la reproduction de circuits de formules 1 à partir de modèles déjà tracés:

Voici donc les modèles:

Catalunya Monaco Suzuka

 

Et voici mes tracés avec la mise en page exigé:

formule-1

 

Le tracé à la plume se poursuit sous illustrator avec un portrait de Sylvie Vartan à reproduire:

le modèle:

vec_profil

Ce que  j’obtiens:

vartan-01

Puis, je renouvèle l’expérience avec la photographie d’une amie:

Et j’obtiens ceci:

celine_popart-01

 

semaine 12 (du 23 au 27 Novembre)

En ce début de semaine, le but est de créer des pictogrammes et de les insérer dans une page web.

j’ utilise donc Illustrator pour reproduire 3 pictos transparent sur fond noir, ainsi qu’un quatrième que je crée moi-même (un avion):

pictos-01pictos-02pictos-03 pictos-04

Puis, à l’aide du site « Icomoon » je génère une police de caractères en forme de pictos, à l’aide des fichiers SVG de mes créations vectorielles.

Il m’est ensuite demandé de reproduire une page fictive pour y insérer mes icônes. Je dois donc entièrement créer le code HTML et CSS:

Capture d’écran 2015-11-30 à 10.22.02

Nouvel exercice: Tangram:

A partir de formes découpés dans un carré, les déplacer pour obtenir différents motifs avec et sans marge.

J’obtiens ceci:

tangram

Par la suite, des pictogrammes audio me sont fournit sur document papier et je dois les reproduire; j’obtiens donc ceci:

picto_audio

Puis, il m’est demandé de créer 3 logos avec trois formes pleine: un rectangle, un triangle et un cercle,puis d’y insérer la raison sociale avec une typo adapté. Les thèmes aux choix sont:

Air-Bretagne, Radio Bayonne, Mutuelle du Calvados, Transport rapide de Mayenne, Cabinet Dupont&associés, avocats.

Après de nombreux essais, quelques idées ce dégagent:

création-de-logos

J’en sélectionne donc cinq et y ajoute une typo:

creation-de-logos

Si je n’en avais sélectionné que trois, ceux-ci aurait été « Air-Bretagne »,  « Mutuelle du Calvados »et Cabinet Dupont&associés, avocats

semaine 11 (du 16 au 20 Novembre)

Cette semaine, nous allons travailler sur la typographie.

A partir d’un modèle, nous devons réaliser un carré séparé en quatre et contenant à chaque fois une lettre de « TYPO » avec un effet différent. Un modèle papier nous est fournit et nous devons réaliser une image similaire. Voici le résultat:

typo photoshop

 

Puis il nous est demandé de réaliser nous même notre typo. Après un travail acharné à la plume et différents effets de calques:

alphabet

 

Un nouveau chapitre s’ouvre: La fusion d’image.

Nous avons deux images:ARBRE105portrait

Et voici le résultat:

femme_arbre

 

Puis, l’image d’une petite fille nous est fournis avec l’original et le résultat à obtenir:

enfant
image fournit
calques4
résultat à obtenir

 

A l’aide d’un flou radial et quelques effets, j’obtiens cette image:

enfant

 

En fin de semaine, un exercice pour évaluer nos acquis nous est proposés. Nous avons un modèle et nous devons le reproduire à l’aide des images original. Il est donc nécessaire de cumuler les techniques et les savoir pour obtenir une image similaire.

 

Images fournies:

483843384_f969ca7fbd_b2304684899_a21d155c42_o3345032647_d685bfbb93_o - copieb10vehicles_water037

fond_ecran

 

Après de nombreux efforts, j’obtiens ceci:

jerome_morizot

La semaine s’achève ainsi sur ce montage photo.

semaine 9-10 (du 02 au 13 Novembre)

Cette semaine, l’épreuve à passer est le détourage de cheveux.

Deux images sont fournit:

image brutimage brut

 

Je dois en extraire le fond pour en insérer un nouveau, créé par mes soins en tenant compte des ombres. De plus, il faut que les différents calques Photoshop permettent un changement de couleurs rapide de la robe.

Avec l’aide de l’outil « sélection rapide », de la plume, et en jouant sur les différentes couches de couleurs (et accessoirement en optimisant les réglages de la sélection du masque de fusion), voici le résultat:

femme_verte femme_rose

Puis l’incrustation se poursuit:

J’ai donc différentes images à associer. L’idée est d’insérer une image dans une autre sans que ceci soit visible, en estompant un maximum les anomalies. Toutes les techniques enseignées précédemment me seront donc utile.

Images fournis:

fillett WINDOW

 

Résultats:

fille à la fenetre 1fille à la fenetre 2

 

Pour l’image suivante, voici donc le résultat à obtenir:

modele

et les images d’origine:

ef0023 - copie im-a-pc-time-square

et mon résultat:

im-a-pc-time-square

 

 

Lions
image d’origine
Elephant
image d’origine

ce que j’obtiens:

lions+elephant

 

image d'origine
image d’origine
modèle
modèle
résultat
résultat

 

 

Puis je dois incruster un ours polaire dans un jardin aquatique. La difficulté est de donner de la transparence à l’eau. l’outil « sélection d’une plage de couleur » m’est alors très utile. Les images de départ sont:

Jardin_aquatique

‚5iØ
‚

Et le résultat est:

Jardin_aquatique

 

 

L’incrustation, c’est aussi changer une matière donc:

sculpture

bois

Vous devinez la suite…

sculpture bois

Puis, il faut l’ habiller d’or, de chrome et de cuivre:

sculpture orsculpture chromesculpture cuivre

Par la suite, nous avons quartier libre; je m’aventure dans des idées totalement improbable, voir dérangeante, mais toujours très original:

sculpture fourruresculpture peausculpture aquarium

Ceci permet de jongler avec un maximum d’outils, de tester et de réviser ces connaissances. Le résultat est crédible donc mon but est atteint.

semaine 8 (du 26 au 30 Octobre)

Et si un jour, Mobalpa me contactait pour présenter les différents coloris de ces cuisines, comment ferais-je?

(voici en substance le premier travail de la semaine)

J’ai à ma disposition une image de base de la cuisine, la page-modèle à reproduire, et le code préparé. il me reste donc à créer et insérer les images.

cuisinemodele page cuisine

De plus, il nous est demandé de créer nous aussi un colorie pour chaque élément et de l’insérer dans la page

Beaucoup de détourages et de nombreux calques sont nécessaire…

Capture cuisine photoshop

Et après un travail laborieux:

mon modèle cuisine

 

 

Puis, je dois créer des motifs sans coupure dans la logique du papier peint; j’utilise donc l’outil « Translation »:

mur roses moquette vert brique

 

Et voici donc les images intégrées dans un site:

page web motifspage web motif 2page web motif 3page web motif 4

semaine 3-4 (14 au 25 septembre)

Nouvelle semaine, premier site Web à créer;

Je débute ainsi par la page architecture:

Capture d’écran 2015-10-21 à 08.52.11 1
Résultat à obtenir

En premier, des images fournies sont insérés sur une page web, l’une après l’autre. Quelques recadrages, la création de vignettes des originaux et et l’enregistrement au format web sont nécessaire.

Et  peu  à peu la page prend forme…

Capture d’écran 2015-10-21 à 09.48.38

 

Avec l’aide du CSS et malgré quelques erreurs….

Capture d’écran 2015-10-21 à 09.39.51

 

Et enfin:

Capture d’écran 2015-10-21 à 09.34.57

 

Les pages s’enchaînent et se ressemblent…

Capture d’écran 2015-10-21 à 09.55.35Capture d’écran 2015-10-21 à 09.54.56Capture d’écran 2015-10-21 à 09.53.57

une page se distinguera par sa création: PixelArt:

Capture d’écran 2015-10-21 à 09.54.28

Les règles sont très différentes pour la mise en page car on ne peut modifier sa taille initiale. Le risque est d’altérer la qualité liée à la forme carré des pixels. Après de méticuleux recadrages pour en extraire des images au format initial, nous poursuivons le PixelArt via des icônes:

dessinphotopixel-arttechniquevecteurs

architectureeffets-speciauxportraits

semaine 1-2 (1 au 11 septembre)

Le premier exercice consiste à faire un exposé écrit et préparer un oral sur les thèmes:

-Comparatif des hébergeurs français

-Comparatif des CMS open source les plus utilisé

-Qu’est ce qu’un Framework

-Qu’est ce que l’Inbound Marketing

Après des débuts laborieux ornés de mots mystérieux, l’organisation se met en place et le travail prend forme.

Capture d’écran 2015-10-21 à 08.59.09Capture d’écran 2015-10-21 à 09.06.59Capture d’écran 2015-10-21 à 09.09.13Capture d’écran 2015-10-21 à 09.10.31