{"id":1957,"date":"2024-03-16T16:20:50","date_gmt":"2024-03-16T16:20:50","guid":{"rendered":"https:\/\/storytic.upf.edu\/?page_id=1957"},"modified":"2024-10-17T12:57:21","modified_gmt":"2024-10-17T12:57:21","slug":"aula-sessio-1-dibuixos-05","status":"publish","type":"page","link":"https:\/\/storytic.upf.edu\/es\/aula-sessio-1-dibuixos\/aula-sessio-1-dibuixos-05\/","title":{"rendered":"AULA &#8211; SESSI\u00d3 1 &#8211; Dibuixos-05"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#fadc50&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;#ffffff 0%|#fadc50 81%|#fadc50 100%&#8221; min_height=&#8221;966.5px&#8221; height=&#8221;1253px&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;1_5,3_5,1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; z_index=&#8221;5&#8243; width=&#8221;100%&#8221; max_width=&#8221;2560px&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;Code&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<script><!-- [et_pb_line_break_holder] -->document.addEventListener(\"DOMContentLoaded\", function() {<!-- [et_pb_line_break_holder] -->    const playImage = document.querySelector(\".play img\"); \/\/ Capturamos el play<!-- [et_pb_line_break_holder] -->    const videoElement = document.querySelector(\"video\"); \/\/ Capturamos el v\u00c3\u00addeo<!-- [et_pb_line_break_holder] -->  \/\/  const contacontesImage = document.querySelector(\".presentation .img-video\"); \/\/ Capturamos la imagen que se ha de cambiar por el video<!-- [et_pb_line_break_holder] -->    let play = false; \/\/ Creamos una variable para saber si est\u00c3\u00a1 en play el video o no<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    playImage.addEventListener(\"click\", function() {<!-- [et_pb_line_break_holder] -->        videoElement.style.display = \"block\";  \/\/ Show the video<!-- [et_pb_line_break_holder] -->     \/\/   contacontesImage.style.display = \"none\";  \/\/ Hide the image<!-- [et_pb_line_break_holder] -->        if(!play){ <!-- [et_pb_line_break_holder] -->           jQuery<!-- [et_pb_line_break_holder] -->(\".et_pb_video_overlay\").css('opacity', 0).css('display', 'none');<!-- [et_pb_line_break_holder] -->       <!-- [et_pb_line_break_holder] -->            videoElement.play();\/\/Play the video<!-- [et_pb_line_break_holder] -->          <!-- [et_pb_line_break_holder] -->            playImage.src = ('https:\/\/storytic.upf.edu\/aula\/content\/img\/boto%20tv%20pausa.png');\/\/ Change image<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->playImage.srcset=\"\"<!-- [et_pb_line_break_holder] -->            play = true;<!-- [et_pb_line_break_holder] -->        }else{<!-- [et_pb_line_break_holder] -->            videoElement.pause();  \/\/ Pause the video<!-- [et_pb_line_break_holder] -->            playImage.src = ('https:\/\/storytic.upf.edu\/aula\/content\/img\/boto-tv-play.png');\/\/ Change image<!-- [et_pb_line_break_holder] -->          <!-- [et_pb_line_break_holder] -->          playImage.srcset=\"\"<!-- [et_pb_line_break_holder] -->            play = false;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    videoElement.addEventListener(\"ended\", function() {<!-- [et_pb_line_break_holder] -->        videoElement.style.display = \"none\";  \/\/ Hide the video<!-- [et_pb_line_break_holder] -->      \/\/  contacontesImage.style.display = \"flex\";  \/\/ Show the image<!-- [et_pb_line_break_holder] -->        playImage.src = ('https:\/\/storytic.upf.edu\/aula\/content\/img\/Play Circle.png');\/\/ Change image<!-- [et_pb_line_break_holder] -->        play = false;<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->document.addEventListener(\"DOMContentLoaded\", function() { \/\/ Cuando carga el DOM<!-- [et_pb_line_break_holder] -->    const videoElement = document.querySelector(\"video\"); \/\/ Capturamos el video<!-- [et_pb_line_break_holder] -->    const pauseButton = document.querySelector(\".play img\"); \/\/ Capturamos la imagen de play<!-- [et_pb_line_break_holder] -->    const fullscreenButton = document.querySelector(\".fullscreen\"); \/\/ Capturamos la imagen de ampliar<!-- [et_pb_line_break_holder] -->    let play = false; \/\/ Variable para saber si est\u00c3\u00a1 en play el v\u00c3\u00addeo<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Funci\u00c3\u00b3n para poner y parar el v\u00c3\u00addeo<!-- [et_pb_line_break_holder] -->    pauseButton.addEventListener(\"click\", function() { \/\/ A\u00c3\u00b1adimos el evento click<!-- [et_pb_line_break_holder] -->        if (!play) { \/\/ Si no est\u00c3\u00a1 en marcha el v\u00c3\u00addeo...<!-- [et_pb_line_break_holder] -->            videoElement.play(); \/\/ ...Pone en maercha el v\u00c3\u00addeo...<!-- [et_pb_line_break_holder] -->            pauseButton.src = 'https:\/\/storytic.upf.edu\/aula\/content\/img\/boto%20tv%20pausa.png'; \/\/ ... Y cambia la imagen de play por la de pausa...<!-- [et_pb_line_break_holder] -->            play = true; \/\/ ...Cambia el let a play<!-- [et_pb_line_break_holder] -->        } else { \/\/ Si est\u00c3\u00a1 en marcha el v\u00c3\u00addeo...<!-- [et_pb_line_break_holder] -->            videoElement.pause(); \/\/ ...Pausa el v\u00c3\u00addeo...<!-- [et_pb_line_break_holder] -->            pauseButton.src = 'https:\/\/storytic.upf.edu\/aula\/content\/img\/boto-tv-play.png'; \/\/ ... Cambia la imagen de pausa por la de play...<!-- [et_pb_line_break_holder] -->            play = false; \/\/ ... cambia la variable a false (no reproduciendo v\u00c3\u00addeo)<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->    videoElement.addEventListener(\"playing\", function() { \/\/ A\u00c3\u00b1ade el evento para cuando se reinicia el v\u00c3\u00addeo despu\u00c3\u00a9s de una pausa<!-- [et_pb_line_break_holder] -->        pauseButton.src = 'https:\/\/storytic.upf.edu\/aula\/content\/img\/boto%20tv%20pausa.png'; \/\/ Cambia la imagen de play a pausa<!-- [et_pb_line_break_holder] -->      \tpauseButton.srcset = '';<!-- [et_pb_line_break_holder] -->        pauseButton.setAttribute(\"alt\", \"pause\"); \/\/ cambia el alt de la imagen<!-- [et_pb_line_break_holder] -->        play = true; \/\/ Cambia el let de play a true (reproduciendo v\u00c3\u00addeo)<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    videoElement.addEventListener(\"pause\", function() { \/\/ A\u00c3\u00b1ade el evento para cuando se pausa el v\u00c3\u00addeo o se termina el v\u00c3\u00addeo<!-- [et_pb_line_break_holder] -->        pauseButton.src = 'https:\/\/storytic.upf.edu\/aula\/content\/img\/boto-tv-play.png'; \/\/ Cambiar la imagen de pausa a play<!-- [et_pb_line_break_holder] -->      \tpauseButton.srcset = '';<!-- [et_pb_line_break_holder] -->        pauseButton.setAttribute(\"alt\", \"play\"); \/\/ cambia el alt de la imagen<!-- [et_pb_line_break_holder] -->        play = false; \/\/ Cambia el let de play a false (no reproduciendo v\u00c3\u00addeo)<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->  if(fullscreenButton) {<!-- [et_pb_line_break_holder] -->    \/\/  Funci\u00c3\u00b3n para pantalla completa del video<!-- [et_pb_line_break_holder] -->    fullscreenButton.addEventListener(\"click\", function() { <!-- [et_pb_line_break_holder] -->        if (videoElement.requestFullscreen) {<!-- [et_pb_line_break_holder] -->            videoElement.requestFullscreen();<!-- [et_pb_line_break_holder] -->        } else if (videoElement.mozRequestFullScreen) {<!-- [et_pb_line_break_holder] -->            videoElement.mozRequestFullScreen();<!-- [et_pb_line_break_holder] -->        } else if (videoElement.webkitRequestFullscreen) {<!-- [et_pb_line_break_holder] -->            videoElement.webkitRequestFullscreen();<!-- [et_pb_line_break_holder] -->        } else if (videoElement.msRequestFullscreen) {<!-- [et_pb_line_break_holder] -->            videoElement.msRequestFullscreen();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][et_pb_column type=&#8221;3_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;En Meloix i la banyera&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font=&#8221;|||on|||||&#8221; title_text_align=&#8221;center&#8221; title_text_color=&#8221;#1a554e&#8221; custom_margin=&#8221;0px|0px|0px|0px|true|true&#8221; custom_padding=&#8221;0px|0px|0px|0px|true|true&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][\/et_pb_column][et_pb_column type=&#8221;1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_4,1_2,1_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; z_index=&#8221;1&#8243; width=&#8221;100%&#8221; max_width=&#8221;2560px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_video src=&#8221;https:\/\/storytic.upf.edu\/multimedia\/videos\/revisat_banyera.mp4&#8243; image_src=&#8221;https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/05\/port-videos-01-banyera-scaled.jpg&#8221; play_icon_color=&#8221;RGBA(255,255,255,0)&#8221; thumbnail_overlay_color=&#8221;RGBA(255,255,255,0)&#8221; module_class=&#8221;video-remove-controls&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;750px&#8221; module_alignment=&#8221;center&#8221; height=&#8221;434px&#8221; custom_margin=&#8221;|||-100px|false|false&#8221; custom_padding=&#8221;||||false|false&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;@media all and (min-width: 1900px) {||.et_pb_video_0 {||    border-width: 20px;||    border-color: #F7CA0D;||    width: 900px!important;||      height: auto!important;||}||.et_pb_video_box video {||      width: 900px!important;||      height: auto!important;||  }||}||||@media all and (min-width: 1405px) and (max-width: 1900px) {||||}||||@media all and (min-width: 1100px) and (max-width: 1405px) {||||}||\/*** Responsive Styles Tablet Only ***\/||@media all and (min-width: 768px) and (max-width: 1100px) {||.et_pb_video_0 {||    border-width: 20px;||    border-color: #F7CA0D;||    height: 434px;||    width: 750px;||}||}&#8221; border_radii=&#8221;on|20px|20px|20px|20px&#8221; border_width_all=&#8221;20px&#8221; border_color_all=&#8221;#F7CA0D&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_video][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text module_class=&#8221;text-cal&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Montserrat||||||||&#8221; text_text_color=&#8221;#1a554e&#8221; text_font_size=&#8221;20px&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; width=&#8221;250px&#8221; custom_margin=&#8221;10px|10px|10px|10px|false|false&#8221; custom_padding=&#8221;10px|10px|10px|10px|false|false&#8221; custom_css_free_form=&#8221;@media all and (min-width: 1900px) {||||}||||@media all and (min-width: 1405px) and (max-width: 1900px) {||||}||||@media all and (min-width: 980px) and (max-width: 1024px) {||||}||\/*** Responsive Styles Tablet Only ***\/||@media all and (min-width: 768px) and (max-width: 980px) {||  .side_text{||    padding-left: 50px!important;||    font-size: 16px!important;||  }||}&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"side_text\">\nAdaptado del cuento<\/br>&quot;Chig\u00fciro y el ba\u00f1o&quot;\n<\/div>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/03\/boto-tv-play@2x-150&#215;150-1.png&#8221; title_text=&#8221;boto-tv-play@2x&#8221; module_id=&#8221;play-button&#8221; module_class=&#8221;play&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;150px&#8221; module_alignment=&#8221;left&#8221; height=&#8221;100px&#8221; custom_margin=&#8221;|||0px|false|false&#8221; custom_padding=&#8221;|||50px|false|false&#8221; custom_css_free_form=&#8221;.et_pb_image_0 .et_pb_image_wrap img, .et_pb_image_1 .et_pb_image_wrap img {||    height: 100px;||  \twidth: 100px;||}||||@media all and (min-width: 1900px) {||||}||||@media all and (min-width: 1405px) and (max-width: 1900px) {||||}||||@media all and (min-width: 1100px) and (max-width: 1405px) {||||}||&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_image src=&#8221;https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/03\/boto-tv-amplia-150&#215;150-1.png&#8221; title_text=&#8221;boto tv amplia&#8221; module_class=&#8221;fullscreen&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;150px&#8221; module_alignment=&#8221;left&#8221; height=&#8221;100px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;|||50px|false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_6,1_6,1_6,1_6,1_6,1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; positioning=&#8221;fixed&#8221; position_origin_f=&#8221;bottom_center&#8221; z_index=&#8221;20&#8243; width=&#8221;90%&#8221; max_width=&#8221;2560px&#8221; height=&#8221;60px&#8221; custom_margin=&#8221;||20px||false|false&#8221; custom_padding=&#8221;3px|15px|0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#x34;||divi||400&#8243; icon_color=&#8221;#fadc50&#8243; icon_width=&#8221;32px&#8221; url=&#8221;https:\/\/storytic.upf.edu\/aula-tutorial\/aula-sessio-1-tutorial-04\/&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#1a554e&#8221; custom_padding=&#8221;10px|20px|10px|15px|true|false&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#x34;||divi||400&#8243; icon_color=&#8221;RGBA(255,255,255,0)&#8221; icon_width=&#8221;32px&#8221; admin_label=&#8221;Icon&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; custom_padding=&#8221;10px|20px|10px|15px|true|false&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_6&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_button button_url=&#8221;https:\/\/storytic.upf.edu\/aula-sessio-1-contacontes\/aula-sessio-1-contacontes-01\/&#8221; button_text=&#8221;Seg\u00fcent&#8221; button_alignment=&#8221;right&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#fadc50&#8243; button_bg_color=&#8221;#1a554e&#8221; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;10px&#8221; button_font=&#8221;|||on|on|||RGBA(255,255,255,0)|&#8221; button_use_icon=&#8221;off&#8221; background_layout=&#8221;dark&#8221; custom_padding=&#8221;10px|50px|10px|50px|true|true&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; button_bg_color__hover_enabled=&#8221;on|desktop&#8221; button_bg_color__hover=&#8221;#216860&#8243; button_bg_enable_color__hover=&#8221;on&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":"<p>Adaptat del conte&#8221;Chig\u00fciro y el ba\u00f1o\u201d<\/p>","protected":false},"author":3,"featured_media":0,"parent":2031,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1957","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/pages\/1957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/comments?post=1957"}],"version-history":[{"count":24,"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/pages\/1957\/revisions"}],"predecessor-version":[{"id":10398,"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/pages\/1957\/revisions\/10398"}],"up":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/pages\/2031"}],"wp:attachment":[{"href":"https:\/\/storytic.upf.edu\/es\/wp-json\/wp\/v2\/media?parent=1957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}