tag:blogger.com,1999:blog-83743910440732695542024-03-14T08:11:47.401-07:00SPUTNIKAnonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-8374391044073269554.post-68708738011120806152017-05-19T13:52:00.001-07:002017-05-19T13:52:46.424-07:00Motor GráficoEn la práctica de esta semana hemos creado un juego con el motor gráfico Unity.<br />
En primer lugar hemos descargado el programa y nos lo hemos instalado, posteriormente nos hemos registrado y hemos comenzado a crear nuestro juego.<br />
Únicamente hemos tenido que ir siguiendo los paso de una web. <a href="https://www.mvcode.com/lessons/roll-a-ball-in-unity-5-c">Pincha aquí para ir a la web</a>.<br />
Al ir siguiendo los pasos hemos ido creando un juego de una pelota que se va comiendo unos cuadrados que giran sobre si mismos, cada cuadrado comido da un punto.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kXXOgHF_XQaJBSdvo3NjDss_80ywOFuUTDXO9NGAZmUR2DkY9m2x5zaNnKptrui1CZG6NQ1E3ANGQL2N27NxnWHRe6StUR2FYXSUza1SmHDG3NdoWlxlomoTHndnD3w18BvhuLbTNoE/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kXXOgHF_XQaJBSdvo3NjDss_80ywOFuUTDXO9NGAZmUR2DkY9m2x5zaNnKptrui1CZG6NQ1E3ANGQL2N27NxnWHRe6StUR2FYXSUza1SmHDG3NdoWlxlomoTHndnD3w18BvhuLbTNoE/s640/2.JPG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3ive9KK5XM9cme7mrjCGAcEKol7Lqq8lddoxHYwn_JGNgX13tBDHRblgqMonp_iLfd964udP-b7X22VNyJOhe_oEIsTE-k4xRhAy8v354UVxAx44rf8XMsQEou57oQXyW9IdD3h8hgw/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3ive9KK5XM9cme7mrjCGAcEKol7Lqq8lddoxHYwn_JGNgX13tBDHRblgqMonp_iLfd964udP-b7X22VNyJOhe_oEIsTE-k4xRhAy8v354UVxAx44rf8XMsQEou57oQXyW9IdD3h8hgw/s640/Captura.JPG" width="640" /></a></div>
<br />
El resultado final es el siguiente:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7iyHITigSOdqUBLvEQiaCIAY9qmpMAqbrwafufuNfieB2-9TbLqkBbDNFYnxGEhVO5CuphOsRR5Sv06kqeiUiS7l6GoocN42WjnqMC8KyVlgtN12kieX1hNLQsFmEu1gxWCQ7OZ8AP0/s1600/Sin+t%25C3%25ADtulo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7iyHITigSOdqUBLvEQiaCIAY9qmpMAqbrwafufuNfieB2-9TbLqkBbDNFYnxGEhVO5CuphOsRR5Sv06kqeiUiS7l6GoocN42WjnqMC8KyVlgtN12kieX1hNLQsFmEu1gxWCQ7OZ8AP0/s640/Sin+t%25C3%25ADtulo.png" width="640" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-27471313892739660742017-05-13T08:59:00.005-07:002017-05-13T09:01:10.533-07:00Realidad aumentada IIIDamos un paso más con la realidad aumentada, ahora con Blippar.<br />
Tras hacer la práctica de Aurasma tenemos que hacer algo similar pero con Blippar. El favicon será la imagen en la que se verá el vídeo de todas las entradas que tenemos (vídeo que hemos hecho desde youtube y posteriormente descargado).<br />
<br />
En mi caso tengo un problema ya que blippar no es capaz de detectar mi favicon, después de muchos intentos y cambios me doy por vencida, pero sigo con una alternativa. En lugar de usar el favicon usaré una imagen que tenga más trazos y por tanto sea más fácil de detectar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkwzu5jCLlLzz6VbSCBM-RgocmlIS5WGMSSdiaQXf3f25GcEJue3BjpRjgFE_aj9IoKtoCkukUcJ7bgq0l_NlRbcQRkFh7g5bgQ4_-7_kKGHcXXXKO9F4AKAG42vRWeMo3pSN8NmlBp8/s1600/sputnik-sticker-hires-white_2048x2048.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkwzu5jCLlLzz6VbSCBM-RgocmlIS5WGMSSdiaQXf3f25GcEJue3BjpRjgFE_aj9IoKtoCkukUcJ7bgq0l_NlRbcQRkFh7g5bgQ4_-7_kKGHcXXXKO9F4AKAG42vRWeMo3pSN8NmlBp8/s640/sputnik-sticker-hires-white_2048x2048.jpg" width="640" /></a></div>
El código es: <span style="font-family: "calibri" , sans-serif; font-size: 11pt;">511089</span><br />
<span style="font-family: "calibri" , sans-serif; font-size: 11pt;"><br /></span>
<span style="font-family: "calibri" , sans-serif; font-size: 11pt;">Este es el resultado:</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpC3iYA05aSuglSTHnQ35ihYW34TcURMeq9p8oLcyakgug9wBr1AbU1qNuXsgWo2lUPu_1YXImInIZhfYO4ehFIhLh8Pga5hfVXn76e6jXv99oNVT7MW0amqQm4tq7CmvDJ9zCYzAMPIc/s1600/WhatsApp+Image+2017-05-13+at+17.32.21.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpC3iYA05aSuglSTHnQ35ihYW34TcURMeq9p8oLcyakgug9wBr1AbU1qNuXsgWo2lUPu_1YXImInIZhfYO4ehFIhLh8Pga5hfVXn76e6jXv99oNVT7MW0amqQm4tq7CmvDJ9zCYzAMPIc/s640/WhatsApp+Image+2017-05-13+at+17.32.21.jpeg" width="360" /></a></div>
<span style="font-family: "calibri" , sans-serif; font-size: 11pt;"><br /></span>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-58852283301201308922017-05-08T05:25:00.001-07:002017-05-08T05:25:44.247-07:00Realidad aumentada IIProfundizamos con la realidad aumentada gracias a Aurasma, como la semana anterior necesitamos la app y la página web.<br />
<div>
En primer lugar tenemos que seleccionar una imagen, en nuestro caso elegiremos el favicon de nuestro blog. Con Aurasma escanearemos una imagen y saldrá por encima un vídeo, nosotros pondremos un resumen de todas las entradas del blog hasta hoy. </div>
<div>
Para hacer el vídeo usamos el editor de youtube.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/skpUgHio5Uc/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/skpUgHio5Uc?feature=player_embedded" width="320"></iframe></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Después de hacer el vídeo tenemos que descargarlo y subirlo en la página web Aurasma. </div>
<div>
El resultado es que al escanear la imagen del favicon en al app de Aurasma el vídeo se reproducirá automáticamente en nuestro móvil. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_A09RP63vFDkd2TcEyxBoGussJehyHHo2dMI-yJkxgz5SqPCWyICb83oJYDisT8wjBwz3y9Y8K3ybE7GqNPMYTD6AqAagIXhIH9mMdnXgTIjAGwbb1Oz3-5WDwrCoZ6XLe57VNP4nyfo/s1600/WhatsApp+Image+2017-05-08+at+14.23.54+%25281%2529.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_A09RP63vFDkd2TcEyxBoGussJehyHHo2dMI-yJkxgz5SqPCWyICb83oJYDisT8wjBwz3y9Y8K3ybE7GqNPMYTD6AqAagIXhIH9mMdnXgTIjAGwbb1Oz3-5WDwrCoZ6XLe57VNP4nyfo/s400/WhatsApp+Image+2017-05-08+at+14.23.54+%25281%2529.jpeg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbxCDyUCD994B_JlTPDLiXvRA7EMawNkbS2GxCYbh-Uq1Gz1i2q59INnokCl2G7cydg0Gpu1on3GDR5r3XHNqQHzQMEYOJP77g9Ho816RNZSUcLaVkFZSPg3rH9B_JZqG_PJcUF_-t2k/s1600/WhatsApp+Image+2017-05-08+at+14.23.54.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbxCDyUCD994B_JlTPDLiXvRA7EMawNkbS2GxCYbh-Uq1Gz1i2q59INnokCl2G7cydg0Gpu1on3GDR5r3XHNqQHzQMEYOJP77g9Ho816RNZSUcLaVkFZSPg3rH9B_JZqG_PJcUF_-t2k/s400/WhatsApp+Image+2017-05-08+at+14.23.54.jpeg" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-62966173958492042382017-05-07T10:03:00.001-07:002017-05-07T10:03:28.600-07:00Realidad aumentadaPara esta semana hemos trabajado con la página web Layar y con su app, teniendo el primer contacto con la realidad aumentada.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
En primer lugar nos registramos en la página web, después elegimos una foto y la editamos, añadiendo objetos que posteriormente saldrán al leer la imagen de partida con la cámara del móvil.<br />
Para que esto suceda nos tenemos que meter en la app y escanear la imagen desde esta.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-iC_y2FN3sNB3zkbd36lziPEI2HI3TpPq_tVK_IsQVlU4ejqbkIvyWayAIhWLo-AgwNIsgm8t-7860E-1Y7pmRpmlJm5pA46vJVt2rqoC02wIpWu7hpejKJIvglK5daA9BbbcdoZGn0/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-iC_y2FN3sNB3zkbd36lziPEI2HI3TpPq_tVK_IsQVlU4ejqbkIvyWayAIhWLo-AgwNIsgm8t-7860E-1Y7pmRpmlJm5pA46vJVt2rqoC02wIpWu7hpejKJIvglK5daA9BbbcdoZGn0/s640/1.JPG" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Los objetos añadidos saldrán encima de la imagen de la que partimos como se ve a continuación.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkTdZQhIvJAzJAM7pGqxk7p8LR89Y8ta-hjHDnCk3_gBH671vAiIrvtR4EXnfeEO7_pcinzJ3DhxoEyCUeIclZyUI9AZmaozIWouHgFOy8KSrOLbxgnea-JpNvec2zLO_-4XJcu6lNnI/s1600/WhatsApp+Image+2017-05-07+at+18.54.41.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkTdZQhIvJAzJAM7pGqxk7p8LR89Y8ta-hjHDnCk3_gBH671vAiIrvtR4EXnfeEO7_pcinzJ3DhxoEyCUeIclZyUI9AZmaozIWouHgFOy8KSrOLbxgnea-JpNvec2zLO_-4XJcu6lNnI/s640/WhatsApp+Image+2017-05-07+at+18.54.41.jpeg" width="360" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-32152535243517319352017-04-20T01:36:00.002-07:002017-04-20T01:36:50.769-07:00Semana cultural<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKOWKNI-oRKO7HN5SlBnWg0o4FIKdfKj5tk-hbR6z16uq1NlsFXnzl9W4mDKK93tkNTdI_SRjUpb667rft3p8BLVs1osNqW1Wvncd-II-4eQWEgQu_NECOIyDSYDljrxRO_oDcqhuFG68/s1600/Cartel+Semana+Cultural.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKOWKNI-oRKO7HN5SlBnWg0o4FIKdfKj5tk-hbR6z16uq1NlsFXnzl9W4mDKK93tkNTdI_SRjUpb667rft3p8BLVs1osNqW1Wvncd-II-4eQWEgQu_NECOIyDSYDljrxRO_oDcqhuFG68/s640/Cartel+Semana+Cultural.png" width="451" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnu786wmm0hEOaBQa0hMpTJrmo3YrSMs-Ln4PyTRjyWAUDGztexY2CJxjp49L9ZHQPA2y1-q0au4O687SycTWjjd5TCT7QhQjTA0CIL3KzRoH9_HRTSRMhlA4Vy8z4iWVyPR5gugr3G_A/s1600/Diptico+Portada+Contraportada+Semana+Cultural.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="451" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnu786wmm0hEOaBQa0hMpTJrmo3YrSMs-Ln4PyTRjyWAUDGztexY2CJxjp49L9ZHQPA2y1-q0au4O687SycTWjjd5TCT7QhQjTA0CIL3KzRoH9_HRTSRMhlA4Vy8z4iWVyPR5gugr3G_A/s640/Diptico+Portada+Contraportada+Semana+Cultural.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJwiBLASZyuwMbIg6S-i0XEYblJdZt0_1-UAwEdAIn3n_VLvf92Ju_sfUq36Ngbs83xsuIxI53yAmI8gW7QuzM0wSiMILk04RCqE2v9BzoVoUGyXdi6TQQlTYTJSf-nwd4z1eWL5vq7s/s1600/Diptico+texto.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="451" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJwiBLASZyuwMbIg6S-i0XEYblJdZt0_1-UAwEdAIn3n_VLvf92Ju_sfUq36Ngbs83xsuIxI53yAmI8gW7QuzM0wSiMILk04RCqE2v9BzoVoUGyXdi6TQQlTYTJSf-nwd4z1eWL5vq7s/s640/Diptico+texto.png" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnvRaJooZziz7kXB4mtW7W26hbHs17WeN7e_C9M0ypMwZwTKakZJgt-x5P3gEpwBRjE_7sZGZeSf_2dOS1L0LvXbanap0DT3b1F7AfkQ1xgGQYwavbLUgWGNGCOSFDq30bUmVSjLjtKk/s1600/H7KWVA+%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnvRaJooZziz7kXB4mtW7W26hbHs17WeN7e_C9M0ypMwZwTKakZJgt-x5P3gEpwBRjE_7sZGZeSf_2dOS1L0LvXbanap0DT3b1F7AfkQ1xgGQYwavbLUgWGNGCOSFDq30bUmVSjLjtKk/s320/H7KWVA+%25282%2529.png" width="320" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-63337696392391669072017-04-12T11:40:00.004-07:002017-04-12T11:41:17.597-07:00MobincubeBuenas, esta semana hemos creado una app sobre nuestro bar favorito, gracias a la página web Mobincube. En primer lugar y como ya viene siendo habitual nos hemos creado una cuenta, luego hemos empezado a crear nuestra app, añadiendo imágenes, textos y demás cosas. Todo esto partiendo de una plantilla que hemos editado, al terminar lo único que tenemos que hacer es solicitar una URL y un código QR.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpf6vmWLH56dgi7H_9z5Bs73dltjpW4vkGY-xxChINYIsC0zyOloK8MQrwasjWz3NzNqea9MpfBPKhije-5wzDK0t8KVzuzYafgbSL291aM1Kz7ExEWG1XceeUB4tm13ROuq-AvXy8-J0/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpf6vmWLH56dgi7H_9z5Bs73dltjpW4vkGY-xxChINYIsC0zyOloK8MQrwasjWz3NzNqea9MpfBPKhije-5wzDK0t8KVzuzYafgbSL291aM1Kz7ExEWG1XceeUB4tm13ROuq-AvXy8-J0/s640/Captura.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJNtLQuOanQB4PnYuG9SOLut-isUC1i7BOuT1R0x-65k0hcRORLnE54LkcmCJSib1xrtYSjEhAhsFED3s0etrIPQROC5STzeZowmt8iEw7oErstO7wj04_xo9NNB18wlKgsf9Ya77pEU/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJNtLQuOanQB4PnYuG9SOLut-isUC1i7BOuT1R0x-65k0hcRORLnE54LkcmCJSib1xrtYSjEhAhsFED3s0etrIPQROC5STzeZowmt8iEw7oErstO7wj04_xo9NNB18wlKgsf9Ya77pEU/s640/1.JPG" width="640" /></a></div>
<br />
Tras la espera tenemos el código QR y la URL.<br />
Aquí os dejo una imagen de mi app y si queréis descargarla solo tenéis que darle a la izquierda en sitios de interés o leer el código QR puesto a continuación.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AJPO470qP3wgpv5LFi2u9Yc7lXojqVi9X0gxneEadjMRyV_ntWuEVcjiuaBWm6Odkj-CiSfPSy8IQXH5sppUaYArvjVdsTx70iI2vd6yNgRMH5SwS272mCIHcTdAc_c3gmCfU_1ffF0/s1600/QR.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AJPO470qP3wgpv5LFi2u9Yc7lXojqVi9X0gxneEadjMRyV_ntWuEVcjiuaBWm6Odkj-CiSfPSy8IQXH5sppUaYArvjVdsTx70iI2vd6yNgRMH5SwS272mCIHcTdAc_c3gmCfU_1ffF0/s200/QR.JPG" width="197" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5tbA0GtDgjY0SvZ319rCYI8Xs4PKlK7lApfOWmV5Gz-V5yZYNmLAIdO6QlQQXYiXg8EMswkCRKtJOXOUTETnhJpqw43u1_aUx5AIQGEQ20bWFMRXaAtudBpVwSFhwtzDmy8hHVWESgk/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5tbA0GtDgjY0SvZ319rCYI8Xs4PKlK7lApfOWmV5Gz-V5yZYNmLAIdO6QlQQXYiXg8EMswkCRKtJOXOUTETnhJpqw43u1_aUx5AIQGEQ20bWFMRXaAtudBpVwSFhwtzDmy8hHVWESgk/s640/3.JPG" width="440" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-15637889789532920612017-04-04T10:21:00.000-07:002017-04-05T01:37:12.671-07:00MockUpEsta semana hemos hecho el calendario de la semana cultural con Pidoco una aplicación para hacer MockUp<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHIxj5LggYso8Th36KO8U72_HtGt7lRcvivh8N9lHPaBdLHGcKcJhiKTxWnkmQRBOA5ctoQi92jj6V3ugD0k5v01UGPZ46iH0aAZk19BPyS7PsT8Da9J0YaX2RW6moq9ELhbxF2UuVeI/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHIxj5LggYso8Th36KO8U72_HtGt7lRcvivh8N9lHPaBdLHGcKcJhiKTxWnkmQRBOA5ctoQi92jj6V3ugD0k5v01UGPZ46iH0aAZk19BPyS7PsT8Da9J0YaX2RW6moq9ELhbxF2UuVeI/s400/Captura.JPG" width="400" /></a></div>
<br />
<br />
Aquí tenéis el resultado de nuestro MockUp.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSMhP7GalWRyKPeyyaAdwTI4HkXO08q2RdXJTAGKa0PHytavvgxN5Jx4R7heKqko9k7dtt28F3hZmwoBKU4h3NiWbmyLEn1ywlXKN1VERaAQxGSYdsWYCeAPMecxQ4RdozAPxDGV0GNHc/s1600/Captura1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="387" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSMhP7GalWRyKPeyyaAdwTI4HkXO08q2RdXJTAGKa0PHytavvgxN5Jx4R7heKqko9k7dtt28F3hZmwoBKU4h3NiWbmyLEn1ywlXKN1VERaAQxGSYdsWYCeAPMecxQ4RdozAPxDGV0GNHc/s640/Captura1.JPG" width="640" /></a></div>
<br />
<a href="https://mariapruebaunex.000webhostapp.com/Mein-erstes-Projekt-prototype/Mein-erstes-Projekt-prototype/pages/page660429426-sketchedArial.xhtml">Pincha aquí</a> para ir a la web del calendario.Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-10736366368212984852017-03-27T09:34:00.001-07:002017-03-27T09:34:54.692-07:00BootstrapHemos modificado la página Bootstrap, añadiendo una foto propia.<br />
<br />
En primer lugar hemos entrado en la página web Bootstrap y hemos descargado todas las plantillas y letras en la página de inicio, posteriormente y tras elegir un diseño hemos descargado el html de ese diseño en particular (botón derecho y guardar)<br />
<br />
Después de esto hemos buscado en el código de la página web el nombre de una de las imágenes que aparecen en gris, pulsando el botón derecho y seleccionando "inspeccionar archivo" llegamos al código, copiamos el código de la imagen ya mencionada y en el archivo html descargado buscamos el esta imagen para sustituirla por una imagen de nuestro ordenar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Z9i9Gz-FsUMeb65fh4t6YXvAW9FKXs2NbohbIxIAr1UdTDfIw8MCsgC571T6hLp-L9EH0fsEkBtjEbtGLsaBV5l2JEmeLvAqZEc-NEPQ6HwHpTgTLLfdOxA7fQUCqqN6-QYA6CDtQXo/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Z9i9Gz-FsUMeb65fh4t6YXvAW9FKXs2NbohbIxIAr1UdTDfIw8MCsgC571T6hLp-L9EH0fsEkBtjEbtGLsaBV5l2JEmeLvAqZEc-NEPQ6HwHpTgTLLfdOxA7fQUCqqN6-QYA6CDtQXo/s400/Captura.JPG" width="400" /></a></div>
<br />
<br />
De esta manera se ve solo desde tu ordenador y tiene que ser visible para todos. Por eso hay que subir el archivo html junto a las carpetas descargadas a hostinger.<br />
<br />
El resultado lo puedes ver pulsando <a href="http://scm-mariapilarqc2017.esy.es/bootstrap/Dashboard%20Template%20for%20Bootstrap.html">aquí</a><br />
<br />
Y también en la parte derecha de la pantalla en sitios de interés.<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-80361322786575614752017-03-23T11:46:00.004-07:002017-03-23T11:46:43.096-07:00Canción y vídeoHoy vamos a añadir un vídeo editado por nosotros desde el editor de vídeo de youtube. En primer lugar abrimos un canal de youtube con la cuenta de gmail. Nos metemos en crear vídeo y añadimos imágenes, vídeos y música aceptadas por la política de derechos de autor de youtube.<br />
Para ver los resultados solo tienes que bajar hasta el final del blog.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUbWmvTl8MzwbxGTF1Rm1owGs2pCuWCqWhnUDNZvmDdaObiRQ3lBfxKxKDlXjUnCuJ-ZvkqTaVKQlapIOmdkWuyCjkYXTUh6Iejp0cMQ9AUKbz8bJyrig0czmXdCUb2US1uF2rgSgv_40/s1600/arrow-pointing-down_icon-icons.com_54062.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUbWmvTl8MzwbxGTF1Rm1owGs2pCuWCqWhnUDNZvmDdaObiRQ3lBfxKxKDlXjUnCuJ-ZvkqTaVKQlapIOmdkWuyCjkYXTUh6Iejp0cMQ9AUKbz8bJyrig0czmXdCUb2US1uF2rgSgv_40/s200/arrow-pointing-down_icon-icons.com_54062.png" width="200" /></a></div>
<br />
La segunda parte de la práctica de esta semana es crear tu propia banda sonora con el programa online soundation. Hay que registrarse pero de manera muy sencilla, con google o facebook.<br />
Simplemente hemos creado un hilo musical con los sonidos que tiene la web.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4dMZiQVGuZ7U-5CUQtOwt7-gObalofhF4EjL7nKl5vAr5ru-Tsf0r2ZW_r87vp9EDLUw8P3dkiVBaTgTDoolMlrjtNv2tcIGpXoKysQpOkZfZL7HcUD56sL2RVW5haheOM6oPjRGHOY/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4dMZiQVGuZ7U-5CUQtOwt7-gObalofhF4EjL7nKl5vAr5ru-Tsf0r2ZW_r87vp9EDLUw8P3dkiVBaTgTDoolMlrjtNv2tcIGpXoKysQpOkZfZL7HcUD56sL2RVW5haheOM6oPjRGHOY/s400/Captura.JPG" width="400" /></a></div>
<br />
Para comprobar los resultados solo tenéis buscar en la parte derecha del blog la sección de nuestra melodía.<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-44582653337915860092017-03-16T10:12:00.001-07:002017-03-16T10:12:35.207-07:00Javascript IIEsta semana lo hemos tenido un poco complicado para hacer la práctica.<br />
<br />
En primer lugar hemos escrito un archivo javascript.js, el código hay que pasarlo a mano y cada línea cumple una función diferente en la página.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFT_gW2iQkkKiPxK2DgrjgONyykp7q7uNQWMPDwM1yuBSHBODXHHZt9cG-RGR8I6LK3eIGk63lkroPR_jKS6wNJZIrLmjelU4TPw5d-YN6XQ0UH1UhAMoHSElbZVz-OxdERaIh805PvQ/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFT_gW2iQkkKiPxK2DgrjgONyykp7q7uNQWMPDwM1yuBSHBODXHHZt9cG-RGR8I6LK3eIGk63lkroPR_jKS6wNJZIrLmjelU4TPw5d-YN6XQ0UH1UhAMoHSElbZVz-OxdERaIh805PvQ/s640/1.JPG" width="579" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Además dentro del código index.html hay que hacer ciertas modificaciones. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1LKF3WCseqI4HB2X-pX5MDjPqidsnozivwthq_MOLMxXfRIl4o_qDAG9FOJEKz4mAKOdKf0mU4EQn4xsUA5SQLyJGDOXDOC-jcsJ51zHQ6dGyqxUK4wTx6GbsF6Ij4zQAooVK7jD0_E/s1600/Captura.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1LKF3WCseqI4HB2X-pX5MDjPqidsnozivwthq_MOLMxXfRIl4o_qDAG9FOJEKz4mAKOdKf0mU4EQn4xsUA5SQLyJGDOXDOC-jcsJ51zHQ6dGyqxUK4wTx6GbsF6Ij4zQAooVK7jD0_E/s640/Captura.JPG" width="640" /></a></div>
<div class="" style="clear: both; text-align: left;">
De la línea 7 a la 20 el código hace que en la parte de arriba de la página aparezca una palabra, en nuestro caso "Pincha" que parpadea, en rojo y si es pulsada te manda a nuestro querido blog.</div>
<div class="" style="clear: both; text-align: left;">
La línea 22 muestra la función 2, que está definida en el javascrip.js, esta función lo que hace es mostrar un texto en un cuadro que si se selecciona abre una ventana que permite que pongas tu nombre y abajo pondrá a partir de ahora lo que tu hayas escrito. </div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-ucu_Cr9a0nJ2csBEdvx0pBT2HJYnEDYfuze6_ucDfN8GHDQjZGz89vvkxa5FQhAY0S9yIXx4yG2bRkDD4R1RGJ-eFfZxD3J3w2aPVrSPzJsB3yOlEiUhaynSR1w9PDTkTBIlT6DsiM/s1600/6.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-ucu_Cr9a0nJ2csBEdvx0pBT2HJYnEDYfuze6_ucDfN8GHDQjZGz89vvkxa5FQhAY0S9yIXx4yG2bRkDD4R1RGJ-eFfZxD3J3w2aPVrSPzJsB3yOlEiUhaynSR1w9PDTkTBIlT6DsiM/s640/6.JPG" width="640" /></a></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXJAumQXTkQLa1fFNteNDjrqxO6U8r5EroEq8FOJUNJ607eQ3blGP5mlcU1EKzdnsXxZvtBfLc0LxQ1V6E-Yqew0aecvuTn2iyxDH1FX_J0FEaFK2QeFWUTV1DzWXwPwRQKp4UOsIktWc/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXJAumQXTkQLa1fFNteNDjrqxO6U8r5EroEq8FOJUNJ607eQ3blGP5mlcU1EKzdnsXxZvtBfLc0LxQ1V6E-Yqew0aecvuTn2iyxDH1FX_J0FEaFK2QeFWUTV1DzWXwPwRQKp4UOsIktWc/s400/4.JPG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hemos añadido botones nuevos a la página, dos de los ellos (funciones demo) que hemos añadido cambian el título a otro tamaño o color. El tercer botón hace saltar una ventana que saluda a todos los camaradas. </div>
<div class="separator" style="clear: both; text-align: left;">
Lo último que hemos añadido es un mensaje que salta a los 5s. después de abrir la página, tiene de nombre función Bienvenidos. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para ver todos los cambios realizados solo tienes que <a href="http://scm-mariapilarqc2017.esy.es/">pulsar aquí.</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hemos tenido problemas con Hostinger, normalmente van todos las funciones nuevas pero de vez en cuando hemos visto que fallan. </div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-58458989338623405662017-03-08T02:31:00.000-08:002017-03-08T02:31:30.516-08:00Window.alertHemos creado una ventana de alerta en nuestra página web, de manera muy sencilla.<br />
En primer lugar nos metemos en nuestro dominio de Hostinger, en el archivo index.html y en la parte del <body> metemos en siguiente código:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFYBdSrrupnaRMFxRT6rYLsphuOe0aOhlcygoT4wxhs9ENwboHV3-OSBUszDky_B54YBBVzQL1h8jYMXXZtQjkWZ6rWcvyUbgjTLtgGPcQbkZ7tHy3hoLKtfoIJvOwJBNdu-Nvg6ZZT8/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFYBdSrrupnaRMFxRT6rYLsphuOe0aOhlcygoT4wxhs9ENwboHV3-OSBUszDky_B54YBBVzQL1h8jYMXXZtQjkWZ6rWcvyUbgjTLtgGPcQbkZ7tHy3hoLKtfoIJvOwJBNdu-Nvg6ZZT8/s640/Captura.JPG" width="640" /></a></div>
<br />
<br />
El resultado es una ventana emergente que sale al pulsar la última tecla (una verdad innegable)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgdAc8FwKAkFcNWIBNuE0sIVLi_wGlf5gLJD7TPPi9qjOZKQj5VWu7oi6oH558q23oNKtWgcp6zfu5NkQnl5H5_GfnW_EJVM-BGtuNsakAC8FERiNIqyK4QhTUKWuMzWdS9LByD3sBUs/s1600/Captura1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgdAc8FwKAkFcNWIBNuE0sIVLi_wGlf5gLJD7TPPi9qjOZKQj5VWu7oi6oH558q23oNKtWgcp6zfu5NkQnl5H5_GfnW_EJVM-BGtuNsakAC8FERiNIqyK4QhTUKWuMzWdS9LByD3sBUs/s640/Captura1.JPG" width="640" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-56493387574491632132017-03-06T05:12:00.001-08:002017-03-06T05:13:34.521-08:00JavascriptComenzamos esta semana haciendo un pequeño cambio de imagen a nuestra página web.<br />
<div>
En primer lugar haremos otro archivo css con diferentes colores y tipografía. En nuestro caso este archivo se llamará Final2.css y lo subiremos a la parte pública de nuestro subdominio de Hostinger.</div>
<div>
<br /></div>
<div>
Seguidamente añadiremos al archivo index.html la siguiente línea de código, dentro de <head>:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJMOtINBLrmoZuqMg0SrEbR1M2AUm6Xa0lbqq_eR9HAEfXN9Fa9t9EdauxqUimCoLFscoDk0YcY7bNSuZKvOLoSAmkbLevKME2CYi7rE3rzFGpXAZHKMUxWTQn0JYnHezMEUyx2hmGE8/s1600/Captura.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTJMOtINBLrmoZuqMg0SrEbR1M2AUm6Xa0lbqq_eR9HAEfXN9Fa9t9EdauxqUimCoLFscoDk0YcY7bNSuZKvOLoSAmkbLevKME2CYi7rE3rzFGpXAZHKMUxWTQn0JYnHezMEUyx2hmGE8/s640/Captura.JPG" width="640" /></a></div>
<br />
<br />
<br />
Y también hay que añadir un scrip, también en el <head>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI51MfXh4hrVo3Bi3N-dZuHgVt5ABdJ_JOQnSBXX8yyB6FsprZKbJ6potMGtsTDX45eW2s9-eFdJ2bL4X6CSO-YUUTfG76g-DWnMn6NWlAA7CL4sVXX5koUvaY8Th1K6-5FUmt7Xkqj0w/s1600/Captura1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI51MfXh4hrVo3Bi3N-dZuHgVt5ABdJ_JOQnSBXX8yyB6FsprZKbJ6potMGtsTDX45eW2s9-eFdJ2bL4X6CSO-YUUTfG76g-DWnMn6NWlAA7CL4sVXX5koUvaY8Th1K6-5FUmt7Xkqj0w/s640/Captura1.JPG" width="640" /></a></div>
<div>
<br /></div>
<div>
Con esto podemos hacer que nuestra página cambie su aspecto, pero para ello tendremos que añadir también un botón dentro de la web para que se produzca el cambio y esté a gusto del usuario. El código para dicho botón es el siguiente y se coloca en el <body>:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECecA4vgeQMqTip1Rb8Bmwzhf8rc_yeQPIr2EBt6RsO0jL8wnCgHuTdxaUTd1Kk_GUsaDDrk9kqfIO2Kr6gmzrK48sjflJFU0rwVodXvXqGnMTOyK7uzkSWG4nlJiK-t8NFPqIONtsp0/s1600/Captura2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECecA4vgeQMqTip1Rb8Bmwzhf8rc_yeQPIr2EBt6RsO0jL8wnCgHuTdxaUTd1Kk_GUsaDDrk9kqfIO2Kr6gmzrK48sjflJFU0rwVodXvXqGnMTOyK7uzkSWG4nlJiK-t8NFPqIONtsp0/s640/Captura2.JPG" width="640" /></a></div>
<div>
<br /></div>
<div>
Observa el resultado final en <a href="http://scm-mariapilarqc2017.esy.es/">Información del Sputnik</a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com2tag:blogger.com,1999:blog-8374391044073269554.post-24737915311756761532017-02-27T10:37:00.000-08:002017-02-27T10:37:01.404-08:00Colores en HTMLAl hacer los cambios en la apariencia de nuestro sitio web debíamos poner los colores con lenguaje hexadecimal por ellos aquí van una serie de páginas que facilitan la selección de un color y su codificación.<div>
</div>
<div>
Particularmente he usado <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/">HTML Color Codes </a> que tiene tanto una tabla de colores:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybpgxwfLAb2y0GhKhedG5vEMyFL8DgzylCLF3BcR0WeClzIxHYhTuv1k4m0H4IQGuQXiTc3E6CfRSfMID3Uw8N7BMgvTEXfOWCF0xnPG_wrZ4GyMNCYZIRNyYsz9FfYzjtKwqZmUIP28/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="489" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybpgxwfLAb2y0GhKhedG5vEMyFL8DgzylCLF3BcR0WeClzIxHYhTuv1k4m0H4IQGuQXiTc3E6CfRSfMID3Uw8N7BMgvTEXfOWCF0xnPG_wrZ4GyMNCYZIRNyYsz9FfYzjtKwqZmUIP28/s640/1.JPG" width="640" /></a></div>
<div>
<br /></div>
<div>
Como un selector del color:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIVLywrsDLZTGe6vKNbN8ANnDoWksT3UcMpN4FLJgPWljBk77n9YvrI_sIj2P_woIsbNnMkkeApIkVomSOlSM_XLjSZ7Q49_HHyKQcX0ss5zEkSUNZJgwSZ6d0nfnWbpd3iL8XRlUsug/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="494" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIVLywrsDLZTGe6vKNbN8ANnDoWksT3UcMpN4FLJgPWljBk77n9YvrI_sIj2P_woIsbNnMkkeApIkVomSOlSM_XLjSZ7Q49_HHyKQcX0ss5zEkSUNZJgwSZ6d0nfnWbpd3iL8XRlUsug/s640/2.JPG" width="640" /></a></div>
<div>
Pero también encontramos otros sitios como <a href="http://www.coloreshtml.com/">Colores HTML</a> que te ofrece tablas con diversos colores y tonalidades: </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FJXO7Mi05K8gWd8lPZKA6XWfXLFFu4eEoNoONbDBFdSDJlVFdUSNK4WZkPxUjKumbr5ezwgUZFtB7PZnYzsA4Lbf62O3kCfAxzoaNxivJFTbh-17UGnYVq-srEoPV3jsVduTxHNnsio/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FJXO7Mi05K8gWd8lPZKA6XWfXLFFu4eEoNoONbDBFdSDJlVFdUSNK4WZkPxUjKumbr5ezwgUZFtB7PZnYzsA4Lbf62O3kCfAxzoaNxivJFTbh-17UGnYVq-srEoPV3jsVduTxHNnsio/s640/3.JPG" width="636" /></a></div>
<div>
<br /></div>
<div>
Por poner un último ejemplo tenemos a <a href="http://virtualnauta.com/tabla-de-colores">Virtualnautas </a>que también te ofrece una tabla, pero con menos colores:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvolkTJLuaer30ZtrCHYNKhX5wxaDF0VzeBDeV1hP1n2HNIhCSYvL7frkjF28SJW8Ot_QetqLpFvo_DHTxBfJ4lJfAmTV1JpxIpUhQ8ZTsGPJanzAD5K3V3oIk-WeAptQe896WmQKMGrU/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvolkTJLuaer30ZtrCHYNKhX5wxaDF0VzeBDeV1hP1n2HNIhCSYvL7frkjF28SJW8Ot_QetqLpFvo_DHTxBfJ4lJfAmTV1JpxIpUhQ8ZTsGPJanzAD5K3V3oIk-WeAptQe896WmQKMGrU/s640/4.JPG" width="446" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-41652872831220926672017-02-27T10:19:00.000-08:002017-03-01T00:51:19.031-08:00Hojas de estilos CSSEsta semana hemos creado un subdominio gratuito en la página <a href="https://www.hostinger.es/">Hostinger</a> y en él una página web que en mi caso da un poquito de información acerca del <a href="http://scm-mariapilarqc2017.esy.es/">Sputnik</a>.<br />
<div>
Después de registrarnos en Hostinger subimos dos archivos uno html en el que está la información que va a haber en la página web y otro archivo css que sirve para editar la apariencia. Sacamos del campus ambos códigos y procederemos a cambiar tanto el contenido como el aspecto.</div>
<div>
<br />
HTML:</div>
<div>
Este es el código original que copiamos en un bloc de notas.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXWUBCds3P_JMWjbzxhgFGFy870bNq_Jigj5Zyk7Dpc2ZG0iJcIJJ6Nq0ua11aU6LEZpgM0TaSgvU0VLs3LRtPfuVg1-Ws7XPurU1N9VqXjFMGCqCubDrwxtW3HX5-RRnOCQreKpldsQ/s1600/Captura1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXWUBCds3P_JMWjbzxhgFGFy870bNq_Jigj5Zyk7Dpc2ZG0iJcIJJ6Nq0ua11aU6LEZpgM0TaSgvU0VLs3LRtPfuVg1-Ws7XPurU1N9VqXjFMGCqCubDrwxtW3HX5-RRnOCQreKpldsQ/s640/Captura1.JPG" width="409" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Tras hacerle varios cambios lo guardamos como pruebapagina.html con codificación UTF-8 y el tipo de archivo "todos los archivos". Cambiamos el contenido escrito, además tenemos que poner un enlace que lleve de nuestro sitio web a nuestro blog: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzmI_p1p8WwUGLkQbAw8D4k58Gf1o_RfA991vPvtv9RO5JDAglvh8yxj4Bkvy6_dufamqLzqnzOaZxJ7XnVjFqJhpPbJj5L0bv2RRjmmhfKQWra3C3M89Q077lPgzh5ZHwSi0LuaXl58/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBzmI_p1p8WwUGLkQbAw8D4k58Gf1o_RfA991vPvtv9RO5JDAglvh8yxj4Bkvy6_dufamqLzqnzOaZxJ7XnVjFqJhpPbJj5L0bv2RRjmmhfKQWra3C3M89Q077lPgzh5ZHwSi0LuaXl58/s640/2.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Cuando esté subido al subdominio tenemos que cambiar el nombre a index.html</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
CSS:</div>
<div class="separator" style="clear: both; text-align: left;">
También tenemos que editar otro código pero este hay que guardarlo con .css y con las mismas características que el anterior.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWRq2gKb1dUvZ8pADA3oB6rmi3UR10agLFKIKmkF9fyF1xh_OILPA779X7CqkFiLjkAtKosQNstGz59K1uax5tXBTL_ibeUhUdhWAzvDJhy8v-v2bSC3iTZLx1fZCdi5FiGUfwe8IbUg/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="486" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWRq2gKb1dUvZ8pADA3oB6rmi3UR10agLFKIKmkF9fyF1xh_OILPA779X7CqkFiLjkAtKosQNstGz59K1uax5tXBTL_ibeUhUdhWAzvDJhy8v-v2bSC3iTZLx1fZCdi5FiGUfwe8IbUg/s640/Captura.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
En este caso cambiamos la apariencia de nuestra web, cambiando los colores y la tipografía. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Para aprender un poco más sobre el Sputnik solo tenéis que pulsar a la derecha en la sección de sitios de interés "información del Sputnik" o pinchar en la palabra Sputnik del principio. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-89549602403934169232017-02-22T02:07:00.001-08:002017-02-22T02:07:24.010-08:00HTMLHemos hecho unos cuantos cambios en nuestro blog con el HTML.<br />
<br />
El objetivo es cambiar la tipografía del título y centrarlo. La nueva tipografía no está en blogger, esta pertenece a <a href="https://fonts.google.com/">Google Fonts</a> y es la tipografía <a href="https://fonts.google.com/specimen/Russo+One?selection.family=Russo+One">Russo One</a>.<br />
<br />
El primer paso es coger el código fuente de la tipografía y ponerla en el código HTML del blog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLG_O1U97adeDxp5eSqtng70QiivSnKYORLbSQU0gzVBEGfbXMdyDB3FNIEmrPyYkaoYWXhzoyCgaJQW0EPe14dVWJaoDH-fGACTuu56ixq1cG1-NaR_sCvqvWdQko2c6H1Mxw3v_QJWM/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLG_O1U97adeDxp5eSqtng70QiivSnKYORLbSQU0gzVBEGfbXMdyDB3FNIEmrPyYkaoYWXhzoyCgaJQW0EPe14dVWJaoDH-fGACTuu56ixq1cG1-NaR_sCvqvWdQko2c6H1Mxw3v_QJWM/s400/3.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxlcRRp27PBOEkzZucNfxmIH-BjMYHvDz2gxj7FrtPMtKGJ79ZnO6Qc8M-cVlDSK30GFN0sL3daPh7XldJZZ3SNnIb_8QQo_WxoHwd-llQ-BVmLmZVyFmtAH7D2SCaORdjwNmM8AK7Qyw/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxlcRRp27PBOEkzZucNfxmIH-BjMYHvDz2gxj7FrtPMtKGJ79ZnO6Qc8M-cVlDSK30GFN0sL3daPh7XldJZZ3SNnIb_8QQo_WxoHwd-llQ-BVmLmZVyFmtAH7D2SCaORdjwNmM8AK7Qyw/s640/5.JPG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Para centrar el título utilizamos el siguiente código:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3C-gdW30OXAkEaIl2X8d6B5ELX_cv5MobQYIthg4MkT-eSxBygvI8ar8hMMBcKmpRkDdGEHN2NXnV3yoobvUgYF05oyZ-MeOCIIHm8GHRVWusNpow45MXRk7tFkuaziPueJDYrL4YeU/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3C-gdW30OXAkEaIl2X8d6B5ELX_cv5MobQYIthg4MkT-eSxBygvI8ar8hMMBcKmpRkDdGEHN2NXnV3yoobvUgYF05oyZ-MeOCIIHm8GHRVWusNpow45MXRk7tFkuaziPueJDYrL4YeU/s200/4.JPG" width="200" /></a></div>
<br />
<br />
Todo puesto en el código HTML quedaría de la siguiente manera:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWSc-HShQbq2CY7-u_JPaptna67YFD7gmyHxuaYEtFUyou0SZQ5siXLjg2N5nnOGIjniowSuuvVgqQSOIkJWJBZSLpS9KU9RXSHuDBfMc83Ge9xHorH8raB0viqXKvZtghL5TPh3rhCw/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWSc-HShQbq2CY7-u_JPaptna67YFD7gmyHxuaYEtFUyou0SZQ5siXLjg2N5nnOGIjniowSuuvVgqQSOIkJWJBZSLpS9KU9RXSHuDBfMc83Ge9xHorH8raB0viqXKvZtghL5TPh3rhCw/s640/1.JPG" width="640" /></a></div>
<br />
Después de guardar hay que ir a la Plantilla-Personalizar-Avanzado-Añadir CSS y se pega el código:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdYN3lvUZaLtnAjlwm4wLhSeHDKPOI4rTBSzcvu-ILzVUFNTVkZFEID6NeN1NDGQFzXv5vbqgUY-S8GJlLTW_3TXSU0RmWZZ5J-qwInYZOJwAWmFWhJ7hc6FrpjOoBrUn0UjsXPjpVss/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdYN3lvUZaLtnAjlwm4wLhSeHDKPOI4rTBSzcvu-ILzVUFNTVkZFEID6NeN1NDGQFzXv5vbqgUY-S8GJlLTW_3TXSU0RmWZZ5J-qwInYZOJwAWmFWhJ7hc6FrpjOoBrUn0UjsXPjpVss/s400/2.JPG" width="400" /></a></div>
<br />
Fuentes:<br />
<a href="https://www.euroresidentes.com/tecnologia/trucos-diseno-web/como-usar-fuentes-personalizadas-en-tu">Euroresidentes </a>Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0tag:blogger.com,1999:blog-8374391044073269554.post-82855138509295350472017-02-13T12:02:00.004-08:002017-02-13T12:02:31.552-08:00Video llamadas.<span style="font-family: Verdana, sans-serif;">Hemos roto la barrera de la distancia, la comunicación entre dos personas que se encuentran a miles de kilómetros puede ser fluida con un solo click. </span><span style="font-family: Verdana, sans-serif;">No solo hablamos de las relaciones personales, en el ámbito laboral el uso de estas tecnologías es muy frecuente siendo indispensable para algunas empresas hacer una entrevista por vídeo llamada antes de una entrevista en persona. </span><span style="font-family: Verdana, sans-serif;">Cada vez es más habitual ver conferencias en directo con este tipo de tecnología, en las que puedes preguntarle al ponente las dudas que tienes en directo y desde tu casa.</span><div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Las aplicaciones más usadas son: </span></div>
<div>
<span style="font-family: Verdana, sans-serif;">El ya famoso <b>Skype</b> que permite hacer tanto llamadas individuales como grupales, para las grupales a partir de 10 personas uno de los usuarios debe tener cuenta premium. <b>Skype</b> es el líder actual en vídeo llamadas por internet.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7BNXzx5RqxiEQb38TRb85nHMdmVEOJk3dfiLkvg-C8-tWZodHuVKkHiybTtuq5jwr-NYzStZFPChcne1MGF2Cy7bUy8Rxkd2lDbfKwy5Ru8EgYtLljHYm0ivSacocgjfCDBCLrdrl5U/s1600/Captura.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7BNXzx5RqxiEQb38TRb85nHMdmVEOJk3dfiLkvg-C8-tWZodHuVKkHiybTtuq5jwr-NYzStZFPChcne1MGF2Cy7bUy8Rxkd2lDbfKwy5Ru8EgYtLljHYm0ivSacocgjfCDBCLrdrl5U/s320/Captura.JPG" width="320" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Un gran competidor es <b>Hangouts </b>que pertenece a la familia de Google y permite hacer videoconferencias con muchos usuarios de manera gratuita.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Incluso el ex presidente Obama usaba este programa para hacer conferencias.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4DnTj-4Gz-7Qcen3WrW8YXmgkaKPoT-1FWK0yvf6Zx5Pr7NCurSHFsixwj6qA661iAaUscs4Wk_0tWz81f5pL4utmBPVlsnKFihBMsXt8JH-EDpWpflESPKWhQMzBAc5ZkXRfXxAMWVc/s1600/Obama-en-hangout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4DnTj-4Gz-7Qcen3WrW8YXmgkaKPoT-1FWK0yvf6Zx5Pr7NCurSHFsixwj6qA661iAaUscs4Wk_0tWz81f5pL4utmBPVlsnKFihBMsXt8JH-EDpWpflESPKWhQMzBAc5ZkXRfXxAMWVc/s320/Obama-en-hangout.png" width="320" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Fuze Meeting </b>es otro programa de "telepresencia" que permite transmitir vídeos y contenidos con alta resolución, además de grabar conferencias. Sin embargo es de pago.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQYQPFZoiArNzHZh2nBgFnoepGo0drR1KIAuwvkw2Fl2dXWxybt_8Jlo74eKPS0MV2OEfapzwxoGlsPjRNSDjN2A9R0M8QzNsUnpYEa3rJ-feg50OG27eEKX5maY2CVxlVVYF9T8vaZM/s1600/fuze-meeting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQYQPFZoiArNzHZh2nBgFnoepGo0drR1KIAuwvkw2Fl2dXWxybt_8Jlo74eKPS0MV2OEfapzwxoGlsPjRNSDjN2A9R0M8QzNsUnpYEa3rJ-feg50OG27eEKX5maY2CVxlVVYF9T8vaZM/s320/fuze-meeting.jpg" width="320" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Como estos tres ejemplos tenemos muchos más, i</span><span style="font-family: Verdana, sans-serif;">ncluso han añadido la opción de vídeo llamada </span><b style="font-family: Verdana, sans-serif;">WhatsApp</b><span style="font-family: Verdana, sans-serif;">, </span><b style="font-family: Verdana, sans-serif;">Line</b><span style="font-family: Verdana, sans-serif;"> o </span><b style="font-family: Verdana, sans-serif;">Facebook</b><span style="font-family: Verdana, sans-serif;">. </span></div>
<div>
<br /></div>
<div>
<span style="font-family: Verdana, sans-serif;">Este tipo de programas nos acercan más al resto de personas y nos facilitan la comunicación.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Fuentes: </span></div>
<div>
<span style="font-family: Verdana, sans-serif;">http://wwwhatsnew.com/2012/02/27/10-interesantes-aplicaciones-para-videoconferencias-y-reuniones-online/</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">http://cincodias.com/cincodias/2015/02/27/emprendedores/1425041927_558193.html</span></div>
Anonymoushttp://www.blogger.com/profile/15305422493712158575noreply@blogger.com0