Les Grilles et le Responsive Webdesign

Il est temps de structurer votre site et de le rendre compatible tous supports !

[vc_row type=”full_width_background” bg_position=”left top” bg_repeat=”no-repeat” parallax_bg_speed=”slow” scene_position=”center” text_color=”dark” text_align=”left” bg_type=”no_bg” bg_grad=”background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E3E3E3));background: -moz-linear-gradient(top,#E3E3E3 0%);background: -webkit-linear-gradient(top,#E3E3E3 0%);background: -o-linear-gradient(top,#E3E3E3 0%);background: -ms-linear-gradient(top,#E3E3E3 0%);background: linear-gradient(top,#E3E3E3 0%);” parallax_style=”vcpb-default” bg_image_repeat=”repeat” bg_image_size=”cover” bg_img_attach=”scroll” parallax_sense=”30″ animation_direction=”left-animation” animation_repeat=”repeat” viewport_vdo=”off” enable_controls=”off” bg_override=”0″ parallax_content_sense=”30″ fadeout_start_effect=”30″ overlay_pattern_opacity=”80″ overlay_pattern_attachment=”fixed” multi_color_overlay_opacity=”60″ seperator_type=”none_seperator” seperator_position=”top_seperator” seperator_shape_size=”40″ seperator_svg_height=”60″ seperator_shape_background=”#ffffff” seperator_shape_border=”none” seperator_shape_border_width=”1″ icon_type=”no_icon” icon_size=”32″ icon_style=”none” icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ img_width=”48″ ult_hide_row_large_screen=”off” ult_hide_row_desktop=”off” ult_hide_row_tablet=”off” ult_hide_row_tablet_small=”off” ult_hide_row_mobile=”off” ult_hide_row_mobile_large=”off”][vc_column width=”1/3″ animation=”fade-in” delay=”5000″ boxed=”true” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″]

[social_buttons full_width_icons=”true” hide_share_count=”true” nectar_love=”true” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” pinterest=”true”] [/vc_column][vc_column width=”2/3″ animation=”none” column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″]
[tabbed_section][tab title=”Présentation” id=”1441984111968-9″ tab_id=”1448379555718-5″][vc_text_separator title=”Infos pratiques” title_align=”separator_align_center” color=”grey”][vc_row_inner][vc_column_inner width=”1/6″]
[bsf-info-box icon_type=”selector” icon=”Defaults-time” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”2 jours” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

soit 14 heures de formation

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-euro” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”680€ HT” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

par personne en inter

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-download-alt” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Le programme” read_more=”box” read_text=”Read More” hover_effect=”style_1″ pos=”top” link=”url:http%3A%2F%2Fwww.kaligram.com%2Fprogrammes-formations%2Fweb%2Fformation-grille-frameworks-rwd.pdf|title:T%C3%A9l%C3%A9charger%20le%20programme%20de%20formation%20Grilles%2C%20Frameworks%20et%20Responsive%20Design|target:%20_blank”]

en version PDF

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-mobile” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Plus d’infos” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top”]

au (03).20.54.09.06.

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]

[bsf-info-box icon_type=”selector” icon=”Defaults-edit” img_width=”48″ icon_size=”32″ icon_color=”#ffffff” icon_style=”circle” icon_color_bg=”#c92a39″ icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ title=”Inscrivez-vous” read_more=”none” read_text=”Read More” hover_effect=”style_1″ pos=”top” icon_animation=”swing”]

avec le formulaire PDF

[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″]
[/vc_column_inner][/vc_row_inner][vc_text_separator title=”Descriptif” title_align=”separator_align_center” color=”grey”][vc_column_text]

Depuis les débuts du web, le métier de webdesigner est en constante évolution. Cependant depuis l’usage du web sur les périphériques nomades, ses compétences sont mises à rude épreuve. Il doit désormais déployer rapidement des sites internet adaptatifs. Et heureusement, des outils bien adaptés sont facilement accessibles: grilles et frameworks.

[/vc_column_text]

[vc_row_inner][vc_column_inner width=”1/3″]
[text-with-icon icon_type=”font_icon” icon=”icon-rocket” color=”Accent-Color”]

Objectifs

À l’issue de cette formation, le webdesigner est en mesure de mettre en place une nouvelle stratégie de production web s’appuyant sur ces nouvelles technologies.[/text-with-icon][/vc_column_inner][vc_column_inner width=”1/3″]

[text-with-icon icon_type=”font_icon” icon=”icon-certificate” color=”Accent-Color”]

Prérequis

Connaitre les langages HTML/CSS[/text-with-icon][/vc_column_inner][vc_column_inner width=”1/3″]

[text-with-icon icon_type=”font_icon” icon=”icon-user” color=”Accent-Color”]

Public

Webmaster/webdesigner[/text-with-icon][/vc_column_inner][/vc_row_inner]

[vc_text_separator title=”Formateur” title_align=”separator_align_center” color=”grey”][vc_row_inner][vc_column_inner width=”1/4″]
[indeed-my-team team=”web” limit=”1″ order_by=”name” order=”ASC” show=”name,photo,description,job,social_icon,website,email” theme=”theme_3″ color_scheme=”ee3733″ hide_small_icons=”0″ align_center=”0″ columns=”1″ slider_set=”0″ items_per_slide=”3″ slide_speed=”5000″ slide_pagination_speed=”500″ slide_opt=”bullets,nav_button,autoplay,responsive,loop” pagination_theme=”pag-theme1″ animation_in=”none” animation_out=”none” filter_set=”0″ filter_select_t=”small_text” filter_align=”left” layout_mode=”masonry” page_inside=”0″ inside_template=”IMT_PAGE_TEMPLATE” tm_custom_href=”0″][/vc_column_inner][/vc_row_inner][/tab][tab title=”Programme” id=”1441984112011-0″ tab_id=”1448379556145-1″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

Introduction
  • Quelques définitions utiles sur le jargon: Framework, boilerplate, Bootstrap, Foundation et responsive webdesign.
Les grilles
  • Principes et intérêt des grilles.
  • Les systèmes de grilles plébiscitées.
  • Utiliser un système de grilles lors du prototypage (mockup) et lors de la conception de la maquette graphique.
  • Comprendre la structure CSS d’un système de grilles.
  • Système de grilles imbriquées.
  • Les grilles et le responsive design.
Les Frameworks
  • Définition des frameworks et boilerplates.
  • Les différents types de frameworks
Choix du Framework
  • Critères à prendre en compte.
  • Préparer son site pour les différents terminaux.
  • Construire son propre framework.
Paramétrer un framework
  • Télécharger et installer un framework.
  • Adapter les fichiers nécessaires.
  • Découvrir les fonctionnalités d’un framework.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

Adaptabilité du contenant
  • Gracefull Degradation.
  • Responsive Design.
  • Mediaqueries et détection des résolutions.
  • Détecter les fonctionnalités.
  • Lisibilité et ergonomie
Adaptabilité du contenu
  • Pensez mobile !
  • Contenu unique et adaptif.
  • Gestion des nouvelles résolutions d’écran (retina)
Ressources utiles
  • Sites incontournables (veille, ressources graphiques, code,…).
  • Bibliographie de référence

[/vc_column_text][/vc_column_inner][/vc_row_inner][/tab][tab title=”Dates” id=”1441984112034-2″ tab_id=”1448379556284-9″][vc_column_text]

Aucune formation inter-entreprises planifiée. Pour une formation personnalisée, merci de nous contacter au 03.20.54.09.06.

[/vc_column_text][/tab][/tabbed_section][/vc_column][/vc_row]

X