Ma reconversion pro

Du bâtiment au développement web

Mois : juin 2017

Les transitions en CSS

Salut, Les transitions en CSS

J’aurais pu intituler cet article « Javascript pour les feignants » c’est d’ailleurs ce que j’avais prévu avant de changer. Les transitions en CSS sont ont été ajoutées depuis CSS3. Avant, pour faire ces types d’effets sur une page web, il fallait coder en Javascript.

Avec l’ajout de ces nouvelles propriétés, on va vraiment pouvoir aller plus loin dans l’animation de nos pages de débutant, sans avoir à écrire une seule ligne de jQuery ou de Javascript!

Je découvre ces propriétés en même temps que toi, donc je n’ai pas idée de ce qui m’attends. Je partage donc avec toi mon apprentissage en suivant le cours d’Openclassrooms, sur les propriétés CSS avancées. La seule animation que je connaisse est celle qui consiste à modifier certaines propriétés au survol en utilisant le selecteur CSS :hover. Je vais utiliser ce sélecteur pour qu’une fois sur Codepen, tu puisses voir la différence dès que tu passes ta souris au dessus de l’exemple qui t’intéresse. J’avais fait un peu le même principe dans mon précédent article sur les propriétés avancées en CSS.

Continue reading

 

La pagination avec Bootstrap

Salut, La pagination avec Bootstrap

Dernier article de la longue série sur le framework de Twitter. Aujourd’hui on va voir comment mettre en place la pagination avec Bootstrap. Cette fonction va permettre à tes utilisateurs de pouvoir changer de page et de poursuivre leur navigation dans une même thématique. Tu peux retrouver un exemple de pagination dans ce blog dans l’onglet ARTICLE en bas de page. Il faudrait d’ailleurs que je prenne le temps de rechercher dans les fichiers PHP comment remplacer les textes en anglais pour les mettre en français.

Si tu me lis depuis quelques articles, je procèderais de la même façon, tous les exemples de code seront visibles depuis cet article ou depuis un projet Codepen.

Pour mettre ta pagination en place, on va encore et toujours ajouter des classes CSS, et Bootstrap s’occupe du reste!

Continue reading

 

Faire une navbar avec Bootstrap

La navigation avec Bootstrap – Partie 2Faire une navbar avec Bootstrap

Suite du tour des possibilités qu’offre le framework qui nous intéresse depuis plusieurs articles, cette fois nous allons voir comment faire une navbar avec Bootstrap.

Une navbar est un des éléments les plus importants d’une page web. C’est une des raisons qui font que tes utilisateurs visitent ton site ou le quittent. Les titres d’onglets leurs couleurs, leurs animations, son aspect général, etc doivent être choisis avec précision et susciter l’intérêt. Mais autre aspect important, la navbar doit aussi être accessible sur mobile.

Bootstrap est un framework pensé mobile first, donc le code qui suivra tiendra compte de l’aspect responsive que devra avoir une navbar. Pour cela Bootstrap a pensé à tout! Comme pour l’article précédent sur la navigation, certaines de ces fonctions auront besoin de jQuery et de Javascript pour fonctionner. N’étant pas encore formé à ces deux langages, je ne parlerai pas de ça pour le moment.

Continue reading

 

La navigation avec Bootstrap

La navigation avec Bootstrap – Partie 1

Salut, la navigation avec bootstrap

Dernier sujet sur Bootstrap, à propos de la façon de construire la navigation de ton site. Comme d’habitude, il faudra ajouter des classes particulières, et pour que certaines techniques fonctionnent il faudra ajouter du code jQrery et/ou JavaScript, choses que je ne connais pas encore. Je reviendrai donc sur l’animation de ces navigations plus tard lorsque j’aurai maîtrisé ces deux choses là.

Bootstrap propose donc plusieurs façons d’organiser et de réaliser la navigation de ta page. Chacune de ces solutions est différentes visuellement, donc à toi de savoir laquelle utiliser.

Au risque de faire un article très long, je le découpe en au moins 3 parties, peut-être même 4…

Continue reading

 

Mettre ma reconversion professionnelle sur les rails

Mettre ma reconversion professionnelle sur les railsCet article ne parlera pas de code, mais je voulais faire un point sur la suite de mes échanges avec Pôle Emploi. A ce jour, je peine un peu à mettre ma reconversion professionnelle sur les rails puisqu’il est très compliqué de se faire aider de manière simple par Pôle emploi. J’ai une conseillère très à l’écoute et je sais qu’elle m’aide, j’ai des entretiens téléphoniques ou des échanges par mails réguliers, donc pas de soucis. Le problème majeur, c’est la lourdeur de la machine Pôle Emploi et la difficulté à avoir les infos rapidement.

Après soyons clair, je n’ai absolument pas besoin de Pôle Emploi pour me former, tellement il y a de ressources de qualité en ligne, mais bon nous sommes en France, et il est toujours apprécié, je pense, de présenter un diplôme lors d’un entretien d’embauche. Je suis toujours inscrit en Premium solo sur OpenClassrooms, donc je me débrouille très bien tout seul, il ne me manque plus qu’un mentor pour aller plus vite et profiter de son expérience…

Continue reading

 

Les transformations 2D

Bonjour, 

J’ai personnellement pas connu les anciennes versions de CSS, mais CSS3 apporte à priori de réelles nouveautés en terme d’animations et de possibilités pour les développeurs et les designers. Je vais donc découvrir en même temps que toi cette nouvelle fonctionnalité, Les transformations 2D. Je n’ai jamais manipulé cette propriété, mes premiers tests sont donc ceux que tu verras dans le fichier Codepen. Il va être désormais possible de modifier la position des éléments de notre page, les déplacer, les faire tourner, les déformer, etc…

On va pouvoir torturer un peu le contenu de notre pagemais il faudra veiller à ne pas le noyer dans des animations, et que l’utilisation de notre site devienne anarchique. Exemple très concret, je n’aime pas du tout l’animation des liens de la rubrique « Articles préférés » de ma page d’accueil. Elle n’apporte rien et je la trouve assez moche. C’est une animation qui est directement ajoutée avec le plugin, je vais donc chercher un moyen de la retirer.

Continue reading

 

Le Multi-colonne en CSS

Salut, le multi-colonne en css logo css3

Retour sur le CSS3 mais cette fois avec des propriétés avancées.  Ces propriétés vont nous permettre de réaliser plusieurs choses assez amusantes! La première n’est pas la plus « fun », mais vos utilisateurs vous remercieront de l’avoir employée, puisqu’il s’agit du multi-colonne. Cette propriété va nous permettre de répartir comme sur un journal, notre contenu sur plusieurs colonnes sans avoir besoin de coder quelque chose de compliqué avec des blocs distincts, qu’il va falloir positionner, etc.

Vos lecteurs ne s’en porteront donc que mieux puisqu’il est plus simple de lire sur des lignes courtes que sur des pages trop larges.

C’est parti pour la première partie des propriétés avancées en CSS!

Continue reading

 

Les boutons de Bootstrap

Salut, les boutons de bootstrap logo

Nouvel article aujourd’hui concernant une autre option qui s’offre à nous, les boutons de Bootstrap. En effet comme pour toutes les autres possibilités qu’offre ce framework, il suffira d’ajouter des classes spécifiques pour réaliser la mise en formes des boutons.

Cet article va être assez court aujourd’hui, pour trois raisons:

  • celui de mardi était vraiment long,
  • c’est assez simple de faire des boutons dans Bootstrap,
  • J’ai pas trop de temps, je vais à Roland Garros demain! Ok rien à voir mais j’y suis jamais allé, alors oui je me la pête un peu avec ça…

Bref, allons y pour le dernier article de la semaine…

Continue reading

 

© 2019 Ma reconversion pro

Theme by Anders NorenUp ↑