tag:blogger.com,1999:blog-3792382788949899332024-03-05T08:28:05.113+01:00El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable¿Eres desarrollador o programador Front End? ¿Te dedicas a la maquetación Web? Curso HTML5 y trucos para desarrolladores web, aprende Diseño Responsive, CSS3 Responsive, Web Layouts. Para maquetadores de nivel medio, desde "Diario de Un Maquetador Web", intentaremos resolver los problemas más comunes a través de post sencillos y sin rodeos que contienen trucos, recursos y consejos.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.comBlogger81125tag:blogger.com,1999:blog-379238278894989933.post-39805495752032574102022-10-18T14:32:00.008+02:002022-10-20T10:12:49.048+02:00Cómo personalizar un radio button sólo con CSS - modificar input type radio<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijup_20i_m8TWID3Kmlfg2qSxiM4dQqNMu_qgrSFERBx93P-oRdeGS4vZEy1DTVb2muXWdiBQLi4Z1tF_8XXstqQ9hrJWnIAeOTVJVtiWHMMZFV90TDacc8pTg2uOqJQvwSJ7jqLc70nITBNgDyLpmqhbAMiIbRImC-C2uQFP4s8PdsuQ4-zn1vda84w/s542/como-personalizar-los-radio-button-solo-con-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijup_20i_m8TWID3Kmlfg2qSxiM4dQqNMu_qgrSFERBx93P-oRdeGS4vZEy1DTVb2muXWdiBQLi4Z1tF_8XXstqQ9hrJWnIAeOTVJVtiWHMMZFV90TDacc8pTg2uOqJQvwSJ7jqLc70nITBNgDyLpmqhbAMiIbRImC-C2uQFP4s8PdsuQ4-zn1vda84w/s320/como-personalizar-los-radio-button-solo-con-css.png" width="320" /></a></div><br /><div>En la desarrollo web es muy común que nos pidan personalizar cualquier radio button, por eso os traemos esta solución de <a href="https://dev.to/kallmanation" target="_blank">Nathan Kallman</a>, la cual hemos usado en infinidad de ocasiones, con muy buenos resultados.</div><p></p><p>Este método nos propone modificar el radio button y su etiqueta a través de CSS, de una forma nativa, válido para todos los navegadores y sin necesidad de iconos, imágenes o JavaScript.<br /><br /></p><p><br /></p>
<p class="codepen" data-default-tab="result" data-height="300" data-slug-hash="BajyWmp" data-user="kallmanation" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/kallmanation/pen/BajyWmp">
CSS-only Pretty Radio Buttons</a> by Nathan Kallman (<a href="https://codepen.io/kallmanation">@kallmanation</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-1081101359972890232022-09-20T14:28:00.004+02:002022-09-20T14:31:17.044+02:00Cómo crear pestañas (tabs) accesibles en HTML / CSS / JQUERY<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGbAxKNmLM2XuUw279sCiuQfU0H8ZC2srC7Y3Xha4hL-OI_78Uxr-So4PKHuu0V4cYBF1CoJOJJC5ywTByw6VvxVEFe45tcHsqI8Gt8OaH_1rifNA_p1nFUp0TtVdwKLdBRorQI95IljP4yLFs8Jsib2R_PvvHuOtOYe1YsHUnaqSrBBMdocs1q_JtA/s542/como-crear-pestanas-tabs-html-css-jquery.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGbAxKNmLM2XuUw279sCiuQfU0H8ZC2srC7Y3Xha4hL-OI_78Uxr-So4PKHuu0V4cYBF1CoJOJJC5ywTByw6VvxVEFe45tcHsqI8Gt8OaH_1rifNA_p1nFUp0TtVdwKLdBRorQI95IljP4yLFs8Jsib2R_PvvHuOtOYe1YsHUnaqSrBBMdocs1q_JtA/s320/como-crear-pestanas-tabs-html-css-jquery.png" width="320" /></a></div><div>Una parte fundamental de la maquetación web es el uso de <b>pestañas (tabs). </b>Nos las han pedido en infinidad de proyectos.</div><div><br /></div><div>Con el fin de ahorraros tiempo os traemos varios sistemas de pestañas <b>muy fáciles de implementar</b> y sobre todo de <b>modificar</b> con los que solemos trabajar.</div><div><br /></div><div><br /></div><div><br /></div><div><span style="font-size: large;"><a href="https://codepen.io/dapacreative/pen/PqXxoP" target="_blank">Aria Tabs</a> de <a href="https://codepen.io/dapacreative" target="_blank">Dan Smith</a> </span><span>(HTML / CSS / JQUERY).</span></div><div><span style="font-size: large;"><br /></span></div><div>
<p class="codepen" data-height="300" data-slug-hash="PqXxoP" data-user="dapacreative" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/dapacreative/pen/PqXxoP">
Aria Tabs</a> by Dan Smith (<a href="https://codepen.io/dapacreative">@dapacreative</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div><div><br /></div><div>Es nuestro favorito ya que cumple con todos los requisitos que te pueden pedir.</div><div><br /></div><div>Al ser un <b>sistema de pestañas accesible,</b> destaca por su facilidad para implementarlo, modificarlo y entender su funcionamiento.</div><div><br /></div><div><span style="font-size: large;"><a href="https://codepen.io/markcaron/pen/MvGRYV" target="_blank">Pure CSS Tabs</a> de <a href="https://codepen.io/markcaron" target="_blank">Mark Caron</a> </span><span>(HTML / CSS).</span></div><div><br />
<p class="codepen" data-default-tab="result" data-height="300" data-slug-hash="MvGRYV" data-user="markcaron" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/markcaron/pen/MvGRYV">
Pure CSS Tabs</a> by Mark Caron (<a href="https://codepen.io/markcaron">@markcaron</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div><div><br /></div><div>Este sistema de pestañas sólo utiliza <b>HTML y CSS</b>, es fácil de implementar y modificar para que se ajuste con el diseño de tu web.</div><div><br /></div><div>Por último si necesitáis unas pestañas que estén <b>hechas en JavaScript</b> os recomendamos las de <a href="https://www.w3schools.com/howto/howto_js_tabs.asp" target="_blank">w3Schools</a> como curiosidad comentaros que las pestañas están hechas con botones usando la etiqueta HTML <button>.</div><div><br /></div><div>Como siempre os animamos a compartir vuestros recursos de este tipo en los comentarios.</div>El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-55696633920277414002022-08-03T14:57:00.002+02:002022-08-03T14:58:39.850+02:00Cómo hacer un campo input de tipo password visible (Alternar visibilidad de contraseña - Toggle password visibility)<div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQxVryjPMmCzEVvXlwjIPXnO63HqtRTfPAFlmDMVaA90Fa1R9PYXwoYt8AV6Fwc2P_xW42InoUYwkVe5gIv_gVzFJYgPun0gUnIgWq_AezBsgRVfkABWFElWro4Q_dfglJ8Z9ggDJMBkfPaI0Ak3pvYItADs0Bee4yM2bfFLy9DutW64JaoKTX7-usQ/s542/C%C3%B3mo-hacer-un-campo-input-de-tipo-password-visible.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQxVryjPMmCzEVvXlwjIPXnO63HqtRTfPAFlmDMVaA90Fa1R9PYXwoYt8AV6Fwc2P_xW42InoUYwkVe5gIv_gVzFJYgPun0gUnIgWq_AezBsgRVfkABWFElWro4Q_dfglJ8Z9ggDJMBkfPaI0Ak3pvYItADs0Bee4yM2bfFLy9DutW64JaoKTX7-usQ/s320/C%C3%B3mo-hacer-un-campo-input-de-tipo-password-visible.png" width="320" /></a></div><br />Al maquetar una web es muy común que nos pidan implementar un botón que se encargue de mostrar el contenido de un <b><input type="password"></b>. </div><div><br /></div><div>Para ello hemos probado con muy buenos resultados la solución que propone la web <a href="https://www.javascripttutorial.net/" target="_blank">JavaScript Tutorial</a>, como podéis comprobar en su <a href="https://www.javascripttutorial.net/javascript-dom/javascript-toggle-password-visibility/">artículo</a> es muy fácil de implementar y modificar.</div><div><br /></div><div>Os hemos dejado un <a href="https://codepen.io/elmaquetadorweb/pen/mdxxdbb">Codepen</a> con todo montado para que veáis el resultado. También podéis verlo en funcionamiento en su url de <a href="https://www.javascripttutorial.net/sample/dom/miniprojects/toggle-password-visibility/index.html" target="_blank">demo</a>.</div><div><br /></div>
<p class="codepen" data-default-tab="html,result" data-editable="true" data-height="390" data-slug-hash="mdxxdbb" data-theme-id="dark" data-user="elmaquetadorweb" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 390px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/elmaquetadorweb/pen/mdxxdbb">
Cómo hacer un campo input de tipo password visible (Alternar visibilidad de contraseña - Toggle password visibility)</a> by Javi Luna (<a href="https://codepen.io/elmaquetadorweb">@elmaquetadorweb</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-87499679447794232472021-11-02T17:35:00.003+01:002021-11-02T17:36:31.503+01:00Desactivar o evitar auto zoom de los campos de texto input en Safari Dispositivos iOS (iPhone - Ipad)<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrhQsw5f6j6tZYbmtQ7BN190EmhUWxWMJDOZW3r_YeH_bgMGMSG5is28J9zCIX5pjdETDSFsCJP-7WQjlkkgHO2vKCvU6ofm760yaOKyzgq_lp5sIFJ_3Vw0khcwJ35Ge0nXiI0czggOAS/s330/como-desactivar-auto-zoom-input-iphone-ipad-ios-safari.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="230" data-original-width="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrhQsw5f6j6tZYbmtQ7BN190EmhUWxWMJDOZW3r_YeH_bgMGMSG5is28J9zCIX5pjdETDSFsCJP-7WQjlkkgHO2vKCvU6ofm760yaOKyzgq_lp5sIFJ_3Vw0khcwJ35Ge0nXiI0czggOAS/s16000/como-desactivar-auto-zoom-input-iphone-ipad-ios-safari.png" /></a></div><br />Desarrollando una web para un cliente nos surgió una incidencia bastante curiosa: algunos campos de textos (input) al colocarse encima de ellos (focus) hacían auto zoom en <b>dispositivos iOS</b> (<b>iPhone - iPad</b>) usando el navegador <b>Safari.<br /><br /></b><p></p><p>Este auto zoom sólo lo hace cuando el<b> campo de texto (input)</b> tiene un tamaño de fuente <b>(font-size) menor de 16px.</b></p><p>Buscando información encontramos varias soluciones. <br /><br />La más lógica y <b>la que usamos nosotros</b> es no bajar de 16px los campos de texto. Al fin y al cabo, el <b>auto zoom</b> se produce por que el dispositivo reconoce que es un tamaño pequeño y por cuestiones de accesibilidad y usabilidad hace zoom. Además cumplimos con una de las recomendaciones de usabilidad la cual recomienda un tamaño mínimo de 16px en todos los textos cuando desarrollamos una web para móviles.</p><p>Otra solución (que <b>no recomendamos </b>ya que sería muy perjudicial para la accesibilidad y usabilidad) es desactivar el zoom de la página a través de la etiqueta <b>meta name="viewport" </b>y las propiedades <b>user-scalable</b> y/o <b>maximum-scale.</b></p>
<br /><p><meta <b>name="viewport"</b> content="width=device-width, initial-scale=1<b>, maximum-scale=1</b>, <b>user-scalable=0"</b>/><br /><br /></p>
<p>Por último, si necesitamos implementar en nuestra maquetación campos de texto con tamaños de texto menores de 16px podemos utilizar la solución que nos plantea <a href="https://codepen.io/jakob-e/pen/yakBwJ" target="_blank">jakob-e en su codepen</a> la cual establece un tamaño de 16px y a través de la propiedad<b> transform</b> escala y ajusta los espacios en blanco derivados del escalado.</p><p><br /></p>
<p class="codepen" data-default-tab="css,result" data-height="373" data-slug-hash="yakBwJ" data-user="jakob-e" style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 373px; justify-content: center; margin: 1em 0px; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/jakob-e/pen/yakBwJ">
Disable iOS input zoom (CSS only)</a> by jakob-e (<a href="https://codepen.io/jakob-e">@jakob-e</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-56897350334718685152020-08-05T12:34:00.012+02:002021-10-21T12:24:31.937+02:00Instalar fácilmente Wordpress en local para Windows, Mac y Linux Ubuntu, Red Had ... | Local WP | localwp.com<div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8I7wZ7dHDcx4KF8QBYj0S4A8Xr1sqUREs5NhQ3M01FSzTaskydd0-NJrhJzvPo8basUfbx5MaFvJUD_nPeBJPtre17nwTmg0w0p4UCyJMgU3LsyYODvvJJLH6WfTNApJh7a5W416pnHUD/s330/instalar-facilmente-wordpress-en-local.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="230" data-original-width="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8I7wZ7dHDcx4KF8QBYj0S4A8Xr1sqUREs5NhQ3M01FSzTaskydd0-NJrhJzvPo8basUfbx5MaFvJUD_nPeBJPtre17nwTmg0w0p4UCyJMgU3LsyYODvvJJLH6WfTNApJh7a5W416pnHUD/s16000/instalar-facilmente-wordpress-en-local.png" /></a></div>Hoy os traemos una aplicación para instalar fácilmente Wordpress en local.<a href="https://localwp.com/" target="_blank"><b>Local WP</b></a> nos va a <b>instalar</b> localmente <b>Wordpress con un solo click.</b><p></p><div><b><br /></b></div><div>A diferencia de sus competidores <a href="https://www.apachefriends.org/es/index.html" target="_blank">XAMPP</a> Y <a href="https://www.mamp.info/" target="_blank">MAMP</a>, <a href="https://localwp.com/" target="_blank"><b>Local WP</b></a> es extremadamente fácil de instalar, ya que se encargar él solo de todas las configuraciones necesarias para que Wordpress funcione en nuestro equipo; es decir, nos va a instalar un servidor Apache con PHP y MySQL y se va a descargar y <b>configurar Wordpress en pocos segundos</b>.</div><div><br /></div><div><b><a href="https://localwp.com/" target="_blank">Local WP</a> </b>es una aplicación Freeware, que tiene algunas opciones de pago, pero su versión gratuita es 100% funcional.</div><div><br /></div><div>Las principales características de Local WP son:</div><div><br /></div><div><ul style="text-align: left;"><li>Instalación de Wordpress en local con un sólo click con soporte SSL.</li><li>Cambio instantáneo entre versiones de PHP 5.6, PHP 7.3 - 7.4 y MySQL.</li><li>Permite <b>compartir tu sitio local con otras personas</b> a través de un enlace, es decir nos va a generar una URL a través de la que cualquier persona se va a poder conectar a nuestro Wordpress local.</li></ul><div>Como siempre, esperamos que este post sea de utilidad y os invitamos a compartir vuestras dudas y opiniones en los comentarios.</div></div><div><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-44682607918063361992019-10-14T12:38:00.000+02:002019-10-14T12:38:06.582+02:00Identificador de fuentes tipografías online - Detectar y reconocer Fonts a través de una imagen <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmmAbUjCvU3CA7GFfvNsoWIZSvGKryt5uv7IZ8-80JedPmtHASFqHD4djPv9ypSwPhzIxYKMUG1oWFdFtzSJVhoJjOrN0CD-p6OghuyShL1vjNwrMPsXZSBh1_XRHDgtRDqwhaFI_2z6wb/s1600/identificador-de-fuentes-tipograf%25C3%25ADas-online-detectar-y-reconocer-fonts-a-traves-de-una-imagen.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmmAbUjCvU3CA7GFfvNsoWIZSvGKryt5uv7IZ8-80JedPmtHASFqHD4djPv9ypSwPhzIxYKMUG1oWFdFtzSJVhoJjOrN0CD-p6OghuyShL1vjNwrMPsXZSBh1_XRHDgtRDqwhaFI_2z6wb/s320/identificador-de-fuentes-tipograf%25C3%25ADas-online-detectar-y-reconocer-fonts-a-traves-de-una-imagen.png" width="320" /></a></div>
En la actualidad existen varias páginas que son capaces de identificar una tipografía desde una imagen.<br />
<br />
Como es un recurso que hemos utilizado bastantes veces, no sólo para reconocer las tipografías, sino para ofrecer alternativas al cliente, nos hemos decidido a hacer pruebas para recomendaros el mejor identificador de fonts.<br />
<br />
Para ello hemos creado una imagen con bastante contraste, negro sobre fondo blanco, utilizando una tipografía bastante común como es la <b>Roboto Regular</b>, de <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>, a un tamaño de 50 píxeles.<br />
<br />
De todos los que hemos probado, sólo el <a href="https://www.fontsquirrel.com/matcherator" target="_blank">identificador de fuentes de <b>FontSquirrel</b></a>, ha sido capaz de reconocerla.<br />
<br />
Otros sitios como <a href="https://www.myfonts.com/WhatTheFont/" target="_blank">WhatTheFont</a>, <a href="https://www.whatfontis.com/" target="_blank">WhatFontIs</a> o <a href="https://www.fontspring.com/matcherator" target="_blank">FontSpring Matcherator</a>, han fallado y no han sido capaces de identificar una tipografía tan común.<br />
<br />
<b><a href="https://www.fontsquirrel.com/" target="_blank">FontSquirrel</a>,</b> es un repositorio de fonts, la mayoría gratis y de calidad con licencia para uso comercial. Como siempre, recomendamos leer bien la licencia de cada font que utilicéis para hacer un uso correcto de ella.<br />
<br />
Para terminar, recomendaros otro recurso de <a href="https://www.fontsquirrel.com/" style="font-weight: bold;" target="_blank">FontSquirrel</a> que hemos utilizado en alguna ocasión, su <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank"><b>Generador de Webfonts</b></a>, que nos va a permitir utilizar fonts que no tienen versión web (webfont) en nuestros proyectos siempre que su licencia lo permita.<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-76078282532967235512019-09-23T14:32:00.000+02:002019-09-23T14:46:00.274+02:00Menú de navegación Responsive y Accesible en HTML5 CSS3 y jQuery - Hamburguesa, Horizontal, Multinivel, Submenús, Despegable, Off Canvas<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvOQmku8sVSssGvZ3RgXeAUgDTytnTDKuvMQrUlc5i4Ey1K9V99RI2oDeRexPLwgA957RnYMZtDxrVCiye2VbtfzSwX1yZW7LLbEKLb7g10m9e2YurFb3UUBu5YQFJc1LtFsrtWCRts-D/s1600/menu-de-navegacion-responsive-y-accesible-en-html5-css3-y-jquery-hamburguesa-horizontal-multinivel-submenus-despegable-off-canvas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvOQmku8sVSssGvZ3RgXeAUgDTytnTDKuvMQrUlc5i4Ey1K9V99RI2oDeRexPLwgA957RnYMZtDxrVCiye2VbtfzSwX1yZW7LLbEKLb7g10m9e2YurFb3UUBu5YQFJc1LtFsrtWCRts-D/s320/menu-de-navegacion-responsive-y-accesible-en-html5-css3-y-jquery-hamburguesa-horizontal-multinivel-submenus-despegable-off-canvas.png" width="320" /></a></div>
El <b>menú de navegación </b>es sin duda una de las partes más importante de la web, ya que nos proporciona acceso a las secciones y por lo tanto al contenido de nuestra web.<br />
<br />
Hoy en día, hacer un menú de navegación no es una tarea fácil.<br />
Tiene que ser <b>responsive</b>, funcionar a la perfección (con eventos touch) en todo tipo de dispositivos y resoluciones y bajo <b>un único marcado HTML.</b><br />
<br />
A lo largo de nuestra experiencia como maquetadores web, nos han pedido hacer todo tipo de menús de navegación responsive, que hemos desarrollado con buenos resultados, sobre todo en webs pequeñas sin muchas secciones. Pero cuando hablamos de <b>portales webs con muchas secciones</b>, la cosa cambia y os aseguramos que puede ser una tarea realmente compleja.<br />
<br />
Para que esto no ocurra, hemos recopilado un listado con <b>diferentes soluciones de código abierto</b> que seguro que nos van a ahorrar muchas horas y problemas de desarrollo, sobre todo en menús extensos con muchos elementos.<br />
<br />
<h2>
<a href="https://chrisyee.ca/pushy/" target="_blank">PUSHY</a></h2>
Si duda es el menú responsive que más nos ha gustado, llevamos bastante tiempo utilizándolo en nuestros proyectos.<br />
<br />
<b>Muy ligero, fácil de usar y modificar.</b> Cuenta con soporte <b>multinivel</b> (submenús), es compatible con móviles y navegadores modernos, incluyendo <b>Internet Explorer 7.</b><br />
<br />
Por defecto se trata de un <b>menú off canvas,</b> es decir, que empuja el contenido hacia la izquierda o derecha, aunque con conocimientos de CSS, prácticamente puedes hacer lo que quieras con él.<br />
<br />
<h2>
<a href="https://slicknav.io/" target="_blank">SLICK NAV</a></h2>
Si lo que queremos es un menú que se preocupe por <b>la accesibilidad</b>, esta es sin duda, la mejor opción, ya que crea un menú compatible con <b>ARIA y accesible a través del teclado</b>, además funciona en Internet Explorer 7.<br />
<br />
Muy completo y con muchas opciones de configuración. Muy recomendable para webs y aplicaciones con muchos enlaces y categorías.<br />
<br />
<h2>
<a href="https://www.berriart.com/sidr/" target="_blank">SIDR</a></h2>
Inspirado en el menú de<b> Facebook,</b> este plugin de jQuery nos permite implementar todos los menús que queramos en la misma página, por ejemplo en ambos lados de la web.<br />
<br />
<h2>
<a href="http://responsive-nav.com/" target="_blank">RESPONSIVE NAV</a></h2>
Pequeño plugin de JavaScript<b> sin dependencias externas</b> para crear un menú de navegación responsive accesible.<br />
<br />
Utiliza eventos touch y transiciones CSS3 para obtener el mejor rendimiento posible. Pensado para <b>accesibilidad,</b> funciona perfectamente en los lectores de pantalla y con el JavaScript deshabilitado.<br />
<br />
<h2>
<a href="https://vadikom.github.io/smartmenus/src/demo/" target="_blank">SMARTMENUS</a></h2>
Plugin de jQuery para crear <b>menús responsive verticales y horizontales</b> que funcionan en cualquier dispositivo.<br />
<br />
Lo que más nos ha gustado es que es accesible y su <a href="https://vadikom.github.io/smartmenus/src/demo/" target="_blank">panel de configuración</a>. También destaca por su <a href="https://www.smartmenus.org/about/themes/#demos-gallery" target="_blank">galería de ejemplos y temas</a> que permite ver rápidamente lo que se puede hacer con este plugin.<br />
<br />
<h2>
<a href="https://github.com/kamens/jQuery-menu-aim" target="_blank">JQUERY-MENU-AIM</a></h2>
Inspirado en el antiguo menú de<b> Amazon,</b> este plugin de jQuery crea un menú responsive que dispara un evento cuando el cursor del usuario apunta a los elementos del menú despegable.<br />
<br />
Recomendable si tenemos un menú con <b>muchos elementos</b>.<br />
<br />
<h2>
<a href="https://github.com/micjamking/Navigataur" target="_blank">NAVIGATUR</a></h2>
Menú de navegación responsive creado <b>solamente con CSS</b>, válido para versiones de Internet Explorer 9 y superiores.<br />
<br />
<h2>
<a href="http://sebnitu.com/HorizontalNav/" target="_blank">HORIZONTAL NAV</a></h2>
Plugin de jQuery que crea un menú responsive horizontal cuyos<b> elementos se expanden para ocupar el 100%</b> del ancho del contenedor. Si alguna vez has intentado hacerlo, sabrás que es bastante difícil de hacer, sobre todo si se quiere que sea responsive.<br />
<br />
<h2>
<a href="https://github.com/mattkersley/Responsive-Menu/" target="_blank">RESPONSIVE-MENU</a></h2>
Plugin de jQuery que en versión móvil convierte el menú de navegación <ul / ol> en una<b> lista despegable <select>.</b><br />
<br />
<h2>
<a href="https://www.meanthemes.com/plugins/meanmenu/" target="_blank">MEANMENU</a></h2>
Plugin de jQuery ligero que convierte un menú de navegación estándar en uno compatible para móviles y tablets.<br />
<br />
<h2>
<a href="https://www.jozefbutko.com/stickynavbar/" target="_blank">STICKYNAVBAR.JS</a></h2>
Plugin de jQuery que ayuda a <b>anclar el menú de navegación</b> en la parte superior del navegador cuando se hace scroll.<br />
<br />
<br />
Para terminar, como siempre, os animamos a que pongáis otros menús responsive de <b>código abierto</b> en los comentarios.<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-47159916977323126412019-08-12T11:23:00.002+02:002019-08-12T20:17:34.125+02:00Saber qué tecnologías, jQuery plugins, librerías Javascript, CMS y plugins de WordPress utiliza una web<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRcF3nwYBMmj9B9HXsha7UcJURZhze1KvhlLrBTBtSBgVRSeaaGu5CJx7tAyjfGT_M1ynaFmYeJZ2t-4OBqhRtkpD-6ETdHYePwluLAiz1b358-34gxbqAYywp8lknglC5uI-z4D-PRgT/s1600/saber-que-tecnologias-jquery-plugins-librerias-javascript-cms-plugins-de-wordpress.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRcF3nwYBMmj9B9HXsha7UcJURZhze1KvhlLrBTBtSBgVRSeaaGu5CJx7tAyjfGT_M1ynaFmYeJZ2t-4OBqhRtkpD-6ETdHYePwluLAiz1b358-34gxbqAYywp8lknglC5uI-z4D-PRgT/s400/saber-que-tecnologias-jquery-plugins-librerias-javascript-cms-plugins-de-wordpress.png" width="400" /></a></div>
Muchas veces necesitamos saber cómo está hecha una web y qué tecnologías utiliza, bien porque hemos heredado un proyecto o porque nos piden saber cómo lo hace la competencia.<br />
<br />
A continuación os mostramos un recurso muy útil, se trata de <b><a href="https://builtwith.com/" target="_blank">builtWith</a>,</b> una web que es capaz de mostrar todas las tecnologías que utiliza la web que introduzcamos.<br />
<br />
<br />
<br />
La información que más nos ha llamado la atención es:<br />
<br />
<b>- Frameworks:</b> nos dice en qué está programada la web, <b>PHP ASP.NET ...</b><br />
<br />
<b>- JavasScript Libraries and Functions:</b> muestra si se han utilizado librerías de JavaScript como jQuery e <b>identifica los plugins de jQuery</b> o cualquier otra librería que contenga la web.<br />
<br />
<b>- Content Management System:</b> muestra datos relacionados con gestores de contenido (<b>CMS</b>). Por ejemplo, nos va a decir si se utiliza<b> WordPress, Joomla!, Blogger </b>... y el<b> nombre del tema utilizado </b>si se utiliza WordPress.<br />
<br />
<b>- Widgets:</b> lista los widgets utilizados, ya sean de wordPress o de cualquier otro desarrollador.<br />
<br />
Otros datos interesantes son los que tienen que ver con comercio electrónico (<b>eCommerce</b>), <b>móviles</b>, <b>audio / video</b>, <b>document standards</b> y los datos que muestra del servidor, como el<b> nombre del servidor, proveedor de alojamiento</b> o <b>certificado SSL.</b><br />
<br />
Todos estos datos los podemos ver de forma gratuita en la pestaña <b>Technology Profile</b> o a través de su <a href="https://builtwith.com/toolbar" target="_blank"><b>extensión para los navegadores</b></a> Mozilla Firefox, Google Chrome y Microsoft Edge.<br />
<br />
Para datos más detallados necesitamos darnos de alta y elegir entre los <b>planes</b> que nos ofrecen, entre los que se encuentra uno que es <b>gratuito</b> y nos permite hacer 5 búsquedas detalladas al día (<b>pestaña Detailed Technology Profile</b>).<br />
<br />
Al darnos de alta también vamos a tener acceso a la pestaña <b>Relationship Profile</b>, la cual nos muestra la IP de las tecnologías y un listado con las webs que comparten exactamente esa tecnología.<br />
<br />
Ya para terminar, después de probar otras alternativas, la única que nos ha convencido es <b><a href="https://www.whatruns.com/" target="_blank">whatruns</a>, </b>una <b>extensión gratis</b> para Mozilla Firefox y Google Chrome que te ayuda a identificar tecnologías usadas en una web simplemente pulsando un botón.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-28081399169497300582019-06-25T13:14:00.000+02:002019-06-25T13:30:23.473+02:00Generador de código para centrar capas en CSS y HTML - Alineación y Centrado horizontal y vertical de div y texto<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1hcRBJiPe5Bdlz5wHwozJq9sbwTNS-02ZfRRKhER-N9mgGQJGcLunfaLbq8naY-8AYgNmmlOkSipe4EyWi0-vKG-UPXY1jngNfeIQHC1gF6nPBfBNoVRppQWmLX5sPOLmAAAY-O079gI/s1600/como-centrar-en-css-centrado-horizontal-vertical.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1hcRBJiPe5Bdlz5wHwozJq9sbwTNS-02ZfRRKhER-N9mgGQJGcLunfaLbq8naY-8AYgNmmlOkSipe4EyWi0-vKG-UPXY1jngNfeIQHC1gF6nPBfBNoVRppQWmLX5sPOLmAAAY-O079gI/s320/como-centrar-en-css-centrado-horizontal-vertical.png" width="320" /></a></div>
Centrar cualquier elemento dentro de una <b>capa <div></b> en <b>CSS</b> y <b>HTML</b> puede ser una tarea complicada, sobre todo si queremos un centrado vertical y horizontal y no se conoce los tamaños de los elementos.<br />
<br />
Para todos aquellos que <b>necesitan ayuda</b> a la hora de centrar os traemos <a href="http://howtocenterincss.com/" target="_blank">HOW TO CENTER IN CSS</a>. <b>Una herramienta que genera el código necesario para centrar textos o capas en CSS y HTML.</b><br />
<br />
Poco hay que explicar de esta herramienta ya simplemente hay que elegir qué tipo de elemento queremos centrar (capa o texto) y elegir los tamaños (si se saben) del contenido y el contenedor.<br />
<br />
Por último elegiremos el tipo de alineamiento (horizontal y vertical) y para qué versión de<b> Internet Explorer (6 - 11)</b> queremos el código.<br />
<br />
Si queréis <b>más información sobre centrado</b>, como por ejemplo centrados con <b>posiciones absolutas,</b> os recomendamos consultar el artículo que publicamos <a href="https://www.elmaquetadorweb.com/2016/08/como-centrar-div-texto-imagen-y-tabla.html">Cómo centrar div, texto, imagen y tabla en vertical y horizontal en HTML y CSS</a>.<br />
<br />
<br />
<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-89616418564143419502019-06-12T13:23:00.000+02:002019-06-12T14:25:23.955+02:00Select Nativo vs Custom Select - Modificar aspecto visual de un select nativo - Dar estilos al elemento select<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXmF7K6virs0hcrPhF7rLJvPX54mOabxyIX6-qIkDWDxz5xALcQePSpCP4kEX4Iabz03DEnziZ8t-W2y617s3P_rofOMA1ZFIgU63SE0TtA1Sx5KsH4_zwQwYGt65fcowEhdKiKRS5ajeP/s1600/Modificar-aspecto-visual-de-un-select-nativo---Dar-estilos-al-elemento-select.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXmF7K6virs0hcrPhF7rLJvPX54mOabxyIX6-qIkDWDxz5xALcQePSpCP4kEX4Iabz03DEnziZ8t-W2y617s3P_rofOMA1ZFIgU63SE0TtA1Sx5KsH4_zwQwYGt65fcowEhdKiKRS5ajeP/s320/Modificar-aspecto-visual-de-un-select-nativo---Dar-estilos-al-elemento-select.png" width="320" /></a></div>
En la última web que nos encargaron maquetar, nos encontramos con el famoso problema de cambiar los estilos al elemento <b>HTML <select></b> con el fin de clavar el diseño recibido.<br />
<br />
Las técnicas para realizar esta tarea suelen consistir en ocultar el <select> y reemplazarlo por otro elemento o directamente utilizar una lista <ul> como vimos en nuestro artículo <a href="https://www.elmaquetadorweb.com/2015/02/crear-select-personalizado.html" target="_blank">cómo crear un select personalizado.</a><br />
<br />
Utilizar estas técnicas dificulta el desarrollo del proyecto y conlleva <b>penalizaciones de tiempo y usabilidad</b> que a nuestro entender son <b>muy graves </b>y pasamos a detallar:<br />
<br />
- Se pierde la funcionalidad de un <select> nativo en móvil. Además vamos a tener que hacerlo responsive.<br />
<br />
- Hay que validarlo a mano, perdemos las opciones de <b>required</b>, <b>disabled </b>y <b>autofocus</b>.<br />
<br />
- Se pierde la Accesibilidad. No decimos que no se pueda hacer, sino que hay que encargarse de la accesibilidad implementando roles de <b>ARIA</b> como <b>listbox role, combobox role ...</b><br />
<br />
En resumen, es <b>difícil de mantener y de usar. </b>Además, añade código HTML y Javascript innecesario.<br />
<br />
Pues bien estamos en 2019 y podemos decir que que las cosas han cambiado.<br />
<br />
Buscado información hemos encontrado este artículo llamado <a href="https://www.filamentgroup.com/lab/select-css.html" target="_blank">diseñando un select en 2019</a> de <a href="https://scottjehl.com/" target="_blank">Scott Jehl</a> (creador del logo de jQuery, lideró el desarrollo del framework jQuery UI y jQuery Mobile). En dicho artículo nos dan una solución consistente para <b>todos los navegadores incluyendo a Internet Explorer 10</b>, como podemos comprobar en <a href="http://filamentgroup.github.io/select-css/demo/" target="_blank">su web de ejemplo.</a><br />
<br />
El único inconveniente que vemos es la imposibilidad de dar estilos a los elementos <b><option>, </b>lo cual no nos parece tan grave como para dejar de utilizar los <b><select></b> nativos.<br />
<br />
Os hemos dejamos el resultado en nuestro CodePen<br />
<br />
<div class="codepen" data-default-tab="css,result" data-height="265" data-pen-title="Modificar aspecto visual de un select nativo - Dar estilos al elemento select" data-slug-hash="RzwdOg" data-theme-id="0" data-user="pedromarin" style="border: 2px solid; box-sizing: border-box; display: flex; height: 265px; margin: 1em 0; padding: 1em;">
See the Pen <a href="https://codepen.io/pedromarin/pen/RzwdOg/"><br />
Modificar aspecto visual de un select nativo - Dar estilos al elemento select</a> by Pedro Marín (<a href="https://codepen.io/pedromarin">@pedromarin</a>)<br />
on <a href="https://codepen.io/">CodePen</a>.<br />
</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-82649109869176429172019-04-15T14:52:00.006+02:002021-02-11T19:03:55.583+01:00Mejores Bancos de vídeos gratis libres de derechos de autor sin copyright CC0 para descargar HD 4K<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYaksn1fDnUB8SVRspsi2j05vMnhetlg_krA3NELyB7OdvyCohIa7ChJDX9tH-oMEhNHyk2DG0-oUb0NSQRodEUTM8B66kytFZ-iIarKM8B1nv7oz5Mm5ysI2BQa7Jnx9q4tWBmf68uJe/s1600/bancos-de-videos-gratis-cc0-4k.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYaksn1fDnUB8SVRspsi2j05vMnhetlg_krA3NELyB7OdvyCohIa7ChJDX9tH-oMEhNHyk2DG0-oUb0NSQRodEUTM8B66kytFZ-iIarKM8B1nv7oz5Mm5ysI2BQa7Jnx9q4tWBmf68uJe/s320/bancos-de-videos-gratis-cc0-4k.png" width="320" /></a></div>
<br />
Encontrar vídeos sin copyright para uso comercial, que se puedan modificar y además no sea necesario atribuir derechos de autor, puede ser una tarea tediosa.<br />
<br />
Al igual que hicimos con las <a href="https://www.elmaquetadorweb.com/2017/02/paginas-de-bancos-de-imagenes-gratis.html">imágenes</a> y <a href="https://www.elmaquetadorweb.com/2018/02/paginas-de-vectores-gratis-para.html">vectores</a>, a continuación os mostramos una lista con los mejores bancos de vídeos gratis, libres de derechos de autor y sin copyright, es decir con una licencia Creative Commons Zero (CC0).<br />
<br />
<h2><a data-saferedirecturl="https://www.google.com/url?q=https://imp.i308085.net/c/2678168/863866/11635&source=gmail&ust=1613146720854000&usg=AFQjCNGyQRUQj4YJthcU24C0KRr39pQV7g" href="https://imp.i308085.net/c/2678168/863866/11635" target="_blank">VIDEVO (BANCO DE VÍDEOS GRATIS CON LICENCIAS CC 3.0 y ROYALTY FREE)</a></h2>
Cuenta con 200,000 clips de video, motion graphics y audio de stock.<br /><br />
- Una vasta selección gratuita con licencias CC 3.0. y libre de derechos de autor.<br />Opciones <a data-saferedirecturl="https://www.google.com/url?q=https://imp.i308085.net/c/2678168/843691/11635&source=gmail&ust=1613146720854000&usg=AFQjCNF0fLbMGzCrbE7kusp3eFZ6ihDvzA" href="https://imp.i308085.net/c/2678168/843691/11635" target="_blank">Premium</a> que expanden la biblioteca y ofrecen licencias puramente libres de autor<br />
- Videos de alta resolución, incluyendo HD y 4K<br />
- Prácticos filtros disponibles para seleccionar contenido por precio, licencia y calidad, entre otros.<br /><br />
<h2>
<a href="https://pixabay.com/es/videos/" target="_blank">Pixabay (Banco de vídeos gratis con licencia CC0)</a></h2>
Cuenta con más de 1,6 millones de vídeos, imágenes y vectores en catálogo. Sus principales ventajas son:<br />
<br />
- Buen sistema de búsqueda y categorías.<br />
- Se puede elegir el tamaño del vídeo.<br />
- Contiene vídeos en alta resolución HD (1080p) y 4K (2160px).<br />
<br />
<h2>
<a href="https://www.pexels.com/videos/" target="_blank">Pexels Videos (Banco de vídeos gratis con licencia CC0)</a></h2>
Contiene vídeos de otros bancos de vídeos como <a href="https://pixabay.com/es/videos/">Pixabay</a> por lo que su catálogo es amplio y variado.<br />
<br />
La principal desventaja que hemos visto es que no cuenta con vídeos 4K.<br />
<br />
<h2>
<a href="https://coverr.co/" target="_blank">Coverr (Banco de vídeos gratis con licencia CC0)</a></h2>
Sin duda el que más orientado está para su uso en web. Se presentan bajo el eslogan "Vídeos bonitos gratis para tu página web". Cada lunes añade 7 nuevos vídeos al catálogo. Sus principales ventajas son:<br />
<br />
- Vídeos creativos de alta calidad optimizados para web.<br />
- Contiene sistema de etiquetas como una para los <a href="https://coverr.co/tags/vertical" target="_blank">vídeos en vertical</a>, muy útil para mostrar vídeos en dispositivos móviles.<br />
<br />
<h2>
<a href="https://www.stockfootageforfree.com/" target="_blank">Stock Footage 4 Free (Banco de vídeos gratis con licencia CC0)</a></h2>
Centrado en la calidad de los vídeos, no en la cantidad, nos recuerda mucho al banco de imágenes <a href="https://unsplash.com/" target="_blank">Unsplash</a>.<br />
<br />
La principal desventaja que hemos visto es hay que registrarse para acceder a todo su catálogo y no cuenta con vídeos 4K.<br />
<br />
<h2>
<a href="https://www.lifeofvids.com/" target="_blank">Life of Vids (Banco de vídeos gratis con licencia CC0)</a></h2>
Banco de vídeos y bucles gratis creado por la agencia de marketing <a href="https://www.leeroy.ca/en" target="_blank">Leeroy</a> por lo que sus vídeos tienen una creatividad muy alta. Sus principales ventajas son:<br />
- Los vídeos están alojados en Vimeo.<br />
- Contiene vídeos en HD y 4K.<br />
- También podemos obtener fotografías en <a href="https://www.lifeofpix.com/" target="_blank">Life of Pix</a>.<br />
<br />
<h2>
<a href="https://www.ignitemotion.com/" target="_blank">IgniteMotion Free Backgrounds (Banco de vídeos gratis con licencia CC0)</a></h2>
Especializada en vídeos en movimiento para usarlos como fondo. Todos los vídeos están en alta definición HD.<br />
<br />
<h2>
<a href="https://www.cutestockfootage.com/" target="_blank">CuteStockFootage (Banco de vídeos gratis con licencia CC0)</a></h2>
Banco de vídeos, sonidos y texturas gratis.<br />
<br />
Aparte de la calidad visual de los vídeos, lo que más nos ha llamado la atención de esta web es sin duda su sección <a href="https://www.cutestockfootage.com/free/" target="_blank">Free Resources</a> que ofrece listados con enlaces a otras webs de recursos de Vídeo, Fotos, Vectores, Texturas, Fonts, Iconos, Mockups, HTML, CSS, Audio y Herramientas Útiles.<br />
El mayor inconveniente que hemos visto es su mala estructuración y navegación que puede ser un poco confusa.<br />
<br />
<h2>
<a href="https://vimeo.com/creativecommons/cc0" target="_blank">Vimeo (Banco de vídeos gratis con licencia CC0)</a></h2>
Grupo de Vimeo cuyos usuarios han cedido los derechos de autor para hacer el uso que quieras.<br />
<br />
<h2>
<a href="http://www.beachfrontbroll.com/" target="_blank">Beach Front B-Roll (Banco de vídeos gratis con licencia CC0)</a></h2>
Especializado en vídeos en alta definición HD para utilizarlos como fondo para web. Contiene bastantes vídeos abstractos, loops, time-lapse ...<br />
<br />
El mayor inconveniente que hemos visto es que este repositorio de vídeos no se actualiza desde el año 2016.<br />
<br />
<h2>
<a href="http://www.orangehd.com/" target="_blank">OrangeHD (Banco de vídeos gratis con licencia CC0)</a></h2>
Banco de vídeos pequeño, en total contiene unos 200 vídeos gratis.<br />
<br />
Como siempre, os animamos a compartir en los comentarios vuestros recursos de vídeo y otras webs similares.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-63730303388894903642019-02-28T14:37:00.000+01:002019-09-20T15:17:55.693+02:00Cómo crear una cabecera fija animada en HTML con CSS y jQuery (Animated responsive fixed sticky header)<div class="separator noMostrar" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAW4ni657MppTWqCthHoe0QjdW-w6Jv0diHFtPBIz6YISMCsysEcEfsSb38C1-edp5rLSFkzbhMtny8rbFqoaUN_OZh2GkR9tmgpbPkbk6AS0zr3AEFn2Z_3dMB_7m5NIid9WksCJZk6o/s1600/Como-crear-una-cabecera-fija-animada-responsive-en-HTML-con-CSS-y-jQuery---Animated-Fixed-sticky-header.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAW4ni657MppTWqCthHoe0QjdW-w6Jv0diHFtPBIz6YISMCsysEcEfsSb38C1-edp5rLSFkzbhMtny8rbFqoaUN_OZh2GkR9tmgpbPkbk6AS0zr3AEFn2Z_3dMB_7m5NIid9WksCJZk6o/s200/Como-crear-una-cabecera-fija-animada-responsive-en-HTML-con-CSS-y-jQuery---Animated-Fixed-sticky-header.png" width="200" /></a></div>
<br />
A continuación os mostraros cómo animar una cabecera y su contenido cuando hacemos scroll en una página.<br />
<br />
Hay bastantes sitios donde te muestran cómo hacerlo, nosotros vamos a utilizar el <a href="https://codepen.io/" target="_blank">CodePen</a> de <a class="item-owner-link" href="https://codepen.io/malZiiirA">Malith Hettiarachchi</a>.<br />
<br />
Hemos elegido este recurso porque hace exactamente lo que queremos de manera muy sencilla.<br />
<br />
<div class="codepen" data-default-tab="result" data-height="461" data-pen-title="Animated Fixed Header (Scroll Down)" data-slug-hash="cbfED" data-theme-id="0" data-user="malZiiirA" style="border: 2px solid black; box-sizing: border-box; display: flex; height: 461px; margin: 1em 0; padding: 1em;">
See the Pen <a href="https://codepen.io/malZiiirA/pen/cbfED/"><br />
Animated Fixed Header (Scroll Down)</a> by Malith Hettiarachchi (<a href="https://codepen.io/malZiiirA">@malZiiirA</a>)<br />
on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
Vamos a ver cómo lo hace, empezamos con el HTML.<br />
<br />
<div class="codepen" data-default-tab="html" data-height="236" data-pen-title="Animated Fixed Header (Scroll Down)" data-slug-hash="cbfED" data-theme-id="0" data-user="malZiiirA" style="border: 2px solid black; box-sizing: border-box; display: flex; height: 236px; margin: 1em 0; padding: 1em;">
See the Pen <a href="https://codepen.io/malZiiirA/pen/cbfED/"><br />
Animated Fixed Header (Scroll Down)</a> by Malith Hettiarachchi (<a href="https://codepen.io/malZiiirA">@malZiiirA</a>)<br />
on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
Como vemos, el HTML es muy simple. Se compone de:<br />
<br />
- Una capa con la clase header <div class="header"><br />
- Dentro un encabezado H1.<br />
- Otra capa con el contenido <div class="content"><br />
- Etiqueta <script> con el enlace a la librería jQuery.<br />
<br />
Seguimos con la función jQuery.<br />
<br />
<div class="codepen" data-default-tab="js" data-height="385" data-pen-title="Animated Fixed Header (Scroll Down)" data-slug-hash="cbfED" data-theme-id="0" data-user="malZiiirA" style="border: 2px solid black; box-sizing: border-box; display: flex; height: 385px; margin: 1em 0; padding: 1em;">
See the Pen <a href="https://codepen.io/malZiiirA/pen/cbfED/"><br />
Animated Fixed Header (Scroll Down)</a> by Malith Hettiarachchi (<a href="https://codepen.io/malZiiirA">@malZiiirA</a>)<br />
on <a href="https://codepen.io/">CodePen</a>.</div>
<br />
A grandes rasgos, lo que hace esta función es detectar cuando hacemos scroll y añade la clase shrink a la capa header.<br />
<br />
Esto nos permite poder animar la cabecera y lo que hay dentro de ella a través de CSS, ya que podemos referenciarlo a través de las clase .header.shrink<br />
<br />
<div class="codepen" data-default-tab="css" data-height="892" data-pen-title="Animated Fixed Header (Scroll Down)" data-slug-hash="cbfED" data-theme-id="0" data-user="malZiiirA" style="border: 2px solid black; box-sizing: border-box; display: flex; height: 892px; margin: 1em 0; padding: 1em;">
See the Pen <a href="https://codepen.io/malZiiirA/pen/cbfED/"><br />
Animated Fixed Header (Scroll Down)</a> by Malith Hettiarachchi (<a href="https://codepen.io/malZiiirA">@malZiiirA</a>)<br />
on <a href="https://codepen.io/">CodePen</a>.</div>
Lo que se hace a través de CSS es animar la cabecera y su contenido H1.<br />
<br />
Como vemos, por una parte tenemos las clases que afectan en estático<br />
.header y .header h1<br />
<br />
y por otra las que se activan cuando hacemos scroll<br />
.header.shrink y .header.shrink h1.<br />
<br />
En concreto lo que se anima es:<br />
<br />
- La altura de la capa header. Pasa de 200px a 100px. También ajusta el interlineado a través de la propiedad line-height.<br />
<br />
- El tamaño del encabezado H1. Pasa de 30px a 24px.<br />
<br />
Como siempre os animamos a compartir recursos similares a través de los comentarios.<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-13535949840975872542019-01-25T12:50:00.000+01:002019-01-25T12:56:10.071+01:00Analizar y limpiar estilos CSS sin usar - Buscar selectores CSS no usados - Mostrar funciones de javascript que se están ejecutandoCuando maquetamos una web existe la posibilidad de que haya selectores CSS innecesarios que no se estén utilizando.<br />
<br />
Limpiar nuestros CSS y quitar esos selectores sin usar siempre es una buena idea ya que reduce el peso de los archivos CSS y por lo tanto, mejorará el rendimiento de la página.<br />
<br />
También puede resultar muy útil en el caso de heredar un proyecto desarrollado con frameworks como Bootstrap o Foundation y no se ha optimizado.<br />
<br />
Lo primero que vamos a aprender es a localizar <b>manualmente y para una página individual</b> los estilos <b>CSS no usados </b>(más adelante veremos cómo hacerlo para un proyecto completo)<b>.</b> Esto va a resultar muy útil si se quiere separar una página del proyecto global, ya que nos identifica qué selectores se están usando y los que están sin usar.<br />
<br />
Para ello abrimos el <b>panel Coverage</b> de <b><a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a></b>, al que se puede acceder de dos formas:<br />
<b><br />
</b> <b>- </b><b>Google Chrome ></b><b> DevTools (F12) > Botón opciones (...) > More Tools > Coverage.</b><br />
<br />
-<b> </b><b>Google Chrome ></b> <b>DevTools (F12) > Abrir la línea de comando (Control + Shift + P) > Teclear Coverage.</b><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdfPSF_1M3_pj8gT48uPXSt7B7w23oy6L0V2alVg_nWx3OWZ0SGnSjQiaZRGuwOJrK0mZqal2gXeTI1OenmYQhYw9e2m2n46pDzFpJ49MJERYQUfFdbBgZUlglXQ7ayUR2SkxrMhfs0ni/s1600/Analizar-y-limpiar-estilos-CSS-sin-usar---buscar-selectores-CSS-no-usados.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="697" data-original-width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdfPSF_1M3_pj8gT48uPXSt7B7w23oy6L0V2alVg_nWx3OWZ0SGnSjQiaZRGuwOJrK0mZqal2gXeTI1OenmYQhYw9e2m2n46pDzFpJ49MJERYQUfFdbBgZUlglXQ7ayUR2SkxrMhfs0ni/s1600/Analizar-y-limpiar-estilos-CSS-sin-usar---buscar-selectores-CSS-no-usados.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Como se ve en la imagen de arriba, lo primero que hay que hacer es capturar el contenido para ello pulsamos sobre el<b> botón de grabar (intrument coverage).</b><br />
<br />
En la <b>parte superior izquierda</b> podemos seleccionar cualquier archivo <b>CSS</b> o <b>JavaScript</b> y automáticamente nos va a mostrar en la <b>parte derecha</b> una barra vertical de <b><span style="color: #6aa84f;">color verde</span></b> que nos indica los selectores CSS o funciones de JavaScript que están en uso y <span style="color: red;"><b>en rojo</b></span> los que no se están utilizando.<br />
<br />
En la<b> parte inferior</b> aparece una tabla que nos muestra los archivos que se están usando (URL), el tipo de archivo (Type), el tamaño del archivo (Total Bytes) y lo que ocupa lo que no se está usando de cada archivo (Unused Bytes).<br />
<br />
Como hemos comentado anteriormente, para escanear un <b>proyecto completo</b> disponemos de estas aplicaciones.<br />
<br />
<a href="https://www.jitbit.com/unusedcss/" style="font-size: x-large;" target="_blank">JitBit Unused CSS</a><br />
<br />
Es una <b>herramienta online</b> que nos muestra un <b>listado</b> con los selectores CSS sin usar de tu web. Es capaz de analizar recursivamente los enlaces de tu web.<br />
<br />
<a href="https://github.com/purifycss/purifycss" style="font-size: x-large;" target="_blank">PurifyCSS</a><br />
<br />
Es una función que coge el contenido de tu web <b>HTML/JS/PHP</b> ... y combinado con <a href="https://gruntjs.com/" target="_blank"><b>Grunt</b> </a>es capaz de escanear todo nuestro contenido local en busca de clases sin usar y <b>generar un nuevo archivo CSS totalmente limpio.</b><br />
<br />
Lo hemos probado a fondo y funciona de maravilla, ya que es capaz de reconocer selectores inyectados a través de funciones avanzadas de JavaScript.<br />
<br />
Para instalar <b>Grunt</b> junto con <b>PurifyCSS</b> y poder utilizarlo, lo más fácil es hacerlo a través del gestor de paquetes <b>NPM (Node Package Manager)</b> que viene integrado con <a href="https://nodejs.org/es/" target="_blank"><b>Node.js</b></a><br />
<br />
Os dejamos un <a href="https://webdesign.tutsplus.com/es/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726" target="_blank">vídeo tutorial</a> de <a href="http://www.adipurdila.com/" target="_blank">Adi Purdila</a> donde explica cómo usar Grunt y PurifyCSS.<br />
<br />
Ya para terminar comentaros que existen otras muchas herramientas parecidas a PurifyCSS, como <a href="https://www.purgecss.com/" target="_blank"><b>PurgeCSS</b></a> y <a href="https://github.com/uncss/uncss" target="_blank"><b>UnCSS</b></a> e incluso <b><a href="https://www.mozilla.org/es-ES/" target="_blank">Mozilla Firefox</a> </b>está desarrollando su propia<b> <a href="https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage" target="_blank">herramienta CSS Coverage</a></b> para indicar qué partes del CSS se están utilizando, estaremos atentos a próximas actualizaciones.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-52270768340863785222019-01-02T12:26:00.000+01:002019-05-21T16:38:44.598+02:00Cómo ordenar automáticamente las propiedades CSS - Organizar CSS - Agrupar CSS - CSSComb<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaGUXxwpTpeEuCqHhg7D67WPDRH-CY8r5v52a-qsTxD7_m1fO8xr-DYMZQj2Bexva8gznknpFHx9pldYW8BiuIoIRbOF2RtSCOsOfVpSUeXDmVfEezsDO2WM4vsnrhK26BCIxlLpFjbae/s1600/Como-ordenar-automaticamente-las-propiedades-CSS---Organizar-CSS---Agrupar-CSS---CSSComb.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaGUXxwpTpeEuCqHhg7D67WPDRH-CY8r5v52a-qsTxD7_m1fO8xr-DYMZQj2Bexva8gznknpFHx9pldYW8BiuIoIRbOF2RtSCOsOfVpSUeXDmVfEezsDO2WM4vsnrhK26BCIxlLpFjbae/s320/Como-ordenar-automaticamente-las-propiedades-CSS---Organizar-CSS---Agrupar-CSS---CSSComb.png" width="320" /></a></div>
Según varios expertos como <a href="http://nicolasgallagher.com/" target="_blank">Nicolas Gallagher</a>, creador del famoso <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro hack clearfix para evitar el colapsamiento de elementos flotados</a>, en su interesante artículo <a href="https://github.com/necolas/idiomatic-css" target="_blank">principios para escribir código CSS idiomático y consistente</a>, nos recomienda agrupar nuestras propiedades CSS por funcionalidad.<br />
<br />
En una encuesta realizada el año 2012 a más de 10.000 programadores, que <a href="https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/" target="_blank">podemos consultar en css-tricks</a>, el <b>45%</b> de los programadores agrupan las propiedades por <b>funcionalidad</b>, el <b>39% no las agrupa</b>, el <b>14%</b> las agrupa por <b>orden alfabético</b> y el <b>2%</b> por la <b>longitud de la propiedad.</b><br />
<br />
He de confesar que era de los que ordenaba alfabéticamente las propiedades CSS, quizás por la falta de una aplicación que lo hiciera automáticamente por tipo de propiedad.<br />
<br />
Sabemos que escribir código CSS ordenado y limpio, puede ser muy tedioso, sobre todo si hablamos de archivos grandes, y si encima tenemos que ir agrupando manualmente las propiedades por funcionalidad, nos va a ser muy complicado conseguirlo.<br />
<br />
Para ordenar <b>automáticamente nuestros CSS</b>, os traemos, <a href="https://csscomb.herokuapp.com/" target="_blank">CSSComb</a>, sin duda, una de las mejores aplicaciones con la que nos hemos encontrado en los últimos años, la cual hemos probado en numerosas ocasiones y os podemos asegurar que no altera el resultado final de vuestra web.<br />
<br />
CSSComb es una aplicación de código abierto escrita en PHP, para <a href="https://gruntjs.com/" target="_blank">Grunt,</a> <a href="https://www.sublimetext.com/" target="_blank">Sublime Text,</a> <a href="https://brunch.io/" target="_blank">Brunch</a> y <a href="http://brackets.io/" target="_blank">Brackets</a>, compatible con SASS y LESS y con soporte para CSS2 - CSS2.1 - CSS3 - CSS4, que nos permite:<br />
<br />
- Ordenar las propiedades de nuestro código CSS como queramos, la mayor ventaja es que puedes compartir fácilmente tus configuraciones con otros usuarios.<br />
<br />
- Dispone de una <a href="https://csscomb.herokuapp.com/online" target="_blank">versión online</a> que ordena automáticamente nuestras propiedades CSS por funcionalidad, el orden es el siguiente:<br />
<br />
<ul>
<li>Propiedades de Texto: font-family, font-size, line-height ...</li>
<li>Propiedades de Posicionamiento: position, z-index, top ...</li>
<li>Propiedades de Modelo de caja: box-sizing, width, height ...</li>
<li>Propiedades de Colores: color, background, border-color ...</li>
<li>Otras propiedades: cursor, content ...</li>
</ul>
<br />
- Unificar:<br />
<br />
<ul>
<li>Poner las propiedades en una línea o en varías.</li>
<li>Indentaciones.</li>
<li>Tabuladores o espacios.</li>
<li>Números: 0 - 0px.</li>
<li>Colores: #ff2222 - #FF2222.</li>
<li>Comillas: ' - ".</li>
</ul>
<br />
- Te avisa si tu código CSS contiene errores.<br />
<br />
- Borra clases vacías.<br />
<br />
- Es bastante inteligente entiende:<br />
<br />
<ul>
<li>Los prefijos de navegadores (vendor prefixes).</li>
<li>Los hacks de los navegadores.</li>
<li>Si no entiende una propiedad la coloca al final e la clase.</li>
</ul>
<div>
En resumen, <b>ordenar y agrupar nuestros CSS por funcionalidad es una gran idea</b>, nos ayuda a tener un código CSS modulable, reusable y limpio, además nos va a avisar si hemos puesto dos propiedades iguales en el mismo selector, no podemos pedir más.</div>
<div>
<br /></div>
<div>
Para terminar os dejamos su <a href="https://github.com/csscomb/csscomb.js" target="_blank">enlace en GitHub</a> y toda la <a href="https://github.com/csscomb/csscomb.js/blob/dev/doc/configuration.md" target="_blank">documentación acerca de su configuración.</a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-30860754131191558442018-12-10T16:52:00.000+01:002018-12-10T17:17:35.769+01:00¿Cuáles son los mejores navegadores para el desarrollo web? - Navegador para desarrolladores web<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWhkzSSr2lobd6mseWDkOfdKcUTQvcZFYuPrPhcImsxmPZxy_gEvHbTqDomvoGyp8Gcu0_swfYqEK7gxUX8JE-YKjWVzaq6dfDf82S2F2z0ItDg9ge_zF_7QcGlBwOGuHsXP56sPRl5ag_/s1600/mejores-navegadores-para-desarrollo-web---Navegador-para-desarrolladores-web.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWhkzSSr2lobd6mseWDkOfdKcUTQvcZFYuPrPhcImsxmPZxy_gEvHbTqDomvoGyp8Gcu0_swfYqEK7gxUX8JE-YKjWVzaq6dfDf82S2F2z0ItDg9ge_zF_7QcGlBwOGuHsXP56sPRl5ag_/s400/mejores-navegadores-para-desarrollo-web---Navegador-para-desarrolladores-web.png" width="400" /></a></div>
<br />
Con esta pregunta nos metemos de lleno en uno de los grandes debates de la web.<br />
<br />
¿Qué navegador es mejor en general?.<br />
¿Con qué navegador es mejor desarrollar una web?.<br />
<br />
Lo que está claro es que Mozilla Firefox y Google Chrome serían los claros finalistas, por lo que vamos a analizar las ventajas y desventajas de estos dos navegadores, para más adelante centrarnos en sus versiones de desarrollo, es decir Firefox Quantum Developer Edition y Google Chrome Canary y alguna otra recomendación.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwAZ8GWxVWxzwX44WGbGi3pMAi1VjYOIDiQ1qRT8mKpWhObaaDxWAnkH6nfBINJu2zQdolSTgoju5XeqEL6jEd9YOtPGRqmZMnxhA7mFmh4_HOQjF-78Gcg2fHFHSVzv_vrRBBMcQVnxK/s1600/Firefox_Logo%252C_2017.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwAZ8GWxVWxzwX44WGbGi3pMAi1VjYOIDiQ1qRT8mKpWhObaaDxWAnkH6nfBINJu2zQdolSTgoju5XeqEL6jEd9YOtPGRqmZMnxhA7mFmh4_HOQjF-78Gcg2fHFHSVzv_vrRBBMcQVnxK/s1600/Firefox_Logo%252C_2017.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank"></a><a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">MOZILLA FIREFOX </a></div>
</h2>
Principales Ventajas:<br />
<br />
- Es muy rápido y ligero. Realmente consume muy pocos recursos si lo comparamos con Google Chrome.<br />
<br />
A nuestro entender esto supone una gran ventaja. En la vida real cuando desarrollamos una web, cuanto antes se cargue y menos recursos consuma, mejor, ya que lo normal es que casi siempre tengamos muchas ventanas abiertas.<br />
<br />
También es un factor a tener en cuenta si tenemos un ordenador no muy potente o un ordenador portátil que no esté conectado a la red eléctrica.<br />
<br />
- Es muy seguro, es gratis y de código abierto, además Mozilla es una organización sin ánimo de lucro que se preocupa de tu privacidad personal.<br />
<br />
La principal desventaja es que desde que cambiaron su motor de renderizado, la mayoría de las extensiones no se han actualizado, por lo que han dejado de funcionar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJf6ztp3ru3jyPgn0NPfgww81fBGLELNTakflQqtP0vWUU6kj6DY5_PM_Z163zvl3cLmD1FYDEtgaZhROamTpupcwd-q-7kpXZRIwAtlXUzIoeW91uGFFVdxpd0QJfkGLTSLayPzqC_BcJ/s1600/md_5b0943607ba31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="150" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJf6ztp3ru3jyPgn0NPfgww81fBGLELNTakflQqtP0vWUU6kj6DY5_PM_Z163zvl3cLmD1FYDEtgaZhROamTpupcwd-q-7kpXZRIwAtlXUzIoeW91uGFFVdxpd0QJfkGLTSLayPzqC_BcJ/s1600/md_5b0943607ba31.png" /></a></div>
<h2 style="text-align: center;">
<a href="https://www.google.com.mx/chrome/?brand=CHBD&gclid=EAIaIQobChMI2cCxlq2V3wIVpRXTCh0jhgIFEAAYASAAEgJuGfD_BwE&gclsrc=aw.ds" target="_blank">GOOGLE CHROME</a></h2>
Principales Ventajas:<br />
<br />
- Es el navegador más usado con mucha diferencia. Esto es importante ya que tus clientes lo más seguro es que lo vean en Chrome.<br />
<br />
Según <a href="https://www.w3schools.com/browsers/default.asp" target="_blank">w3schools</a>, bajo sus estadísticas recopiladas desde su web desde 2002, es el claro ganador con un 79.6% seguido de Mozilla Firefox (10.1%), Microsoft Edge/IE (4.0%), Safari (3.5%) y Opera (1.5%).<br />
<br />
- El Developer Tools es muy bueno, por ejemplo se puede cargar archivos locales CSS y JS.<br />
<br />
- Excelente soporte para HTML5<br />
<br />
La principal desventaja es su uso excesivo de memoria, recursos y que no mantiene la privacidad del navegador.<br />
<br />
Dicho esto personalmente siempre me ha resultado más útil maquetar en Firefox y utilizar Chrome para las tareas relacionadas con JavaScript y rendimiento.<br />
<br />
Aunque las últimas actualizaciones con respecto a su Developer Tools han terminado por decantar la balanza hacia Mozilla Firefox.<br />
<br />
Por si esto no fuera poco, existen varias versiones tanto de Mozilla como de Chrome, por lo que nos vamos a centrar en sus versiones específicas para desarrolladores y por último terminar con otros navegadores que nos han llamado la atención.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDSi2c8rcWgdR0yB0Jp3sMk6gfAUwuggVA6zqtDiVWw_oL8y_5MEoXvha4tSb_p7QRkyVxJDQXGY9UJ18e7t1Fc8leHA9Xvrbh3a8bqEBcpsmGcbSSIPgYk0G9Zmxjj8cAQ-MRpWb_wan/s1600/Sin-t%25C3%25ADtulo-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="156" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDSi2c8rcWgdR0yB0Jp3sMk6gfAUwuggVA6zqtDiVWw_oL8y_5MEoXvha4tSb_p7QRkyVxJDQXGY9UJ18e7t1Fc8leHA9Xvrbh3a8bqEBcpsmGcbSSIPgYk0G9Zmxjj8cAQ-MRpWb_wan/s1600/Sin-t%25C3%25ADtulo-3.png" /></a></div>
<h2 style="text-align: center;">
<a href="https://www.mozilla.org/es-ES/firefox/developer/" target="_blank">FIREFOX QUANTUM DEVELOPER EDITION</a></h2>
- Viene con un nuevo motor de renderizado que permite aprovechar todos los núcleos de tu procesador, la otra versión sólo utilizaba un núcleo, lo que permite abrir las páginas el doble de rápido.<br />
<br />
- 30% más ligero que Google Chrome.<br />
<br />
- Modo de diseño adaptable. Prueba los sitios en dispositivos emulados en tu navegador.<br />
<br />
- Las nuevas DevTools de Firefox son potentes, flexibles y lo mejor de
todo, extensibles. Incluyen el mejor depurador JavaScript, que puede
adaptarse a múltiples navegadores y está construido con React y Redux. <br />
<br />
- Borrador. Edita, escribe y ejecuta código JavaScript en tiempo real. <br />
- Firefox es el único navegador que incluye herramientas creadas
específicamente para poder crear y diseñar con CSS Grid. Te permiten
visualizar la cuadrícula, mostrar nombres de área asociados,
previsualizar los cambios y mucho más.
<br />
<br />
- Panel de almacenamiento. Agregar, modificar y eliminar caché, cookies, bases de datos y datos de sesión.<br />
<div>
<br /></div>
<div>
- Red. Monitoriza las solicitudes de redes que pueden ralentizar o bloquear tu sitio.</div>
<div>
<br /></div>
<div>
- Audio web. La única herramienta de desarrollo para inspeccionar el API de audio web. </div>
<div>
<br /></div>
<div>
- Capturas de pantallas sin complicaciones.</div>
<div>
<br /></div>
<div>
La principal desventaja es que es muy inestable.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj86upCFpWDP_WrZ8fjQfboSSdXcz8uudmUI5hdRj8oTN4n5YP87IR3EH-_f9xorKg_IAggD1aFEOIWmJQUPYJR5HsOHyW_70sRdhPC_aXHiu7hb0TFlHTVWGOW9c6fxp3AqD7kqgznmjw/s1600/Sin-t%25C3%25ADtulo-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="150" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj86upCFpWDP_WrZ8fjQfboSSdXcz8uudmUI5hdRj8oTN4n5YP87IR3EH-_f9xorKg_IAggD1aFEOIWmJQUPYJR5HsOHyW_70sRdhPC_aXHiu7hb0TFlHTVWGOW9c6fxp3AqD7kqgznmjw/s1600/Sin-t%25C3%25ADtulo-2.png" /></a></div>
<h2 style="text-align: center;">
<a href="https://www.google.com/intl/es_ALL/chrome/canary/" target="_blank">GOOGLE CHROME CANARY</a></h2>
<div>
- Es más rápido que las otras versiones del navegador.<br />
<br />
- Incluye función de Lazy load, es decir carga de contenido según hacemos scroll.<br />
<br />
- Actualizaciones casi todos los días.<br />
<br />
- Compatibilidad total con Google Chrome, esto incluye sus extensiones.<br />
<br />
La principal desventaja es que es muy inestable.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMrq_rTOovoJ630DD__mY7MkbA9qopUN9DqJAVJRPtnqddEL_b3guE76pyF85MYwvFe0OuHx29eN5PlJLELmdhL6TtIsEhq6IMZWsztzcHeZ7Qp_u7YL-4VHMCIZw_g-nOx3bozwNLmZ0/s1600/blisk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="113" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMrq_rTOovoJ630DD__mY7MkbA9qopUN9DqJAVJRPtnqddEL_b3guE76pyF85MYwvFe0OuHx29eN5PlJLELmdhL6TtIsEhq6IMZWsztzcHeZ7Qp_u7YL-4VHMCIZw_g-nOx3bozwNLmZ0/s1600/blisk.png" /></a></div>
<h2 style="text-align: center;">
<a href="https://blisk.io/?inv=dbc6b418-52c7-4352-8921-f11f2ad9cda7" target="_blank">BLISK</a></h2>
Basado en Chromium, motor de código abierto que emplean Google Chrome y Opera, a los que también se les une Microsoft Edge, ya que recientemente han anunciado que su nueva versión del navegador está basado en el motor Chromium.<br />
<br />
Lo más curioso y útil de este navegador es sin duda, la vista Side by side que nos permite comparar cualquier web en responsive, es decir, puedes ver la web en móvil, tablet o desktop simultáneamente, sincronizando automáticamente la URL y la posición del scroll.<br />
<br />
Blisk nos ofrece una gran cantidad de diferentes dispositivos, teléfonos móviles, táblets, portátiles y ordenadores de sobremesa, tanto en horizontal como en vertical (landscape mode - portrait mode).<br />
<br />
También incluye una función de auto refresco, cada vez que cambias y guardas el código de tu web se actualiza automáticamente.<br />
<br />
Monitoriza errores en JavaScript y recursos que han fallado al cargar la web. Blisk te notifica cuando un problema aparece y te busca la solución en StackOverflow.<br />
<br />
Tiene implementado Chrome DevTools y te permite inspeccionar simultáneamente en móvil y desktop.<br />
<br />
También puedes hacer capturas de pantalla o grabar vídeo que se almacena en su nube Blisk Cloud.<br />
<br />
El único pero que hemos visto es que algunas de sus funciones son de pago aunque puedes conseguir créditos invitando a amigos a utilizarlo o poniendo un enlace para su descarga, lo cual hemos hecho.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7XhgTpVp6oyKgYqM5HBes_s_YhxDqiKg3f_JScdTL0oRpJJmNJGoCiWveBrQzuJKoApGhBKaFRmLSwRH6Vh2LTJhgUCFcWpdfJtf576NNrUokXB6YsZqCRDMwjvP-6L1vxEmDMmjcXAY/s1600/ghost-brwoser.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="140" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7XhgTpVp6oyKgYqM5HBes_s_YhxDqiKg3f_JScdTL0oRpJJmNJGoCiWveBrQzuJKoApGhBKaFRmLSwRH6Vh2LTJhgUCFcWpdfJtf576NNrUokXB6YsZqCRDMwjvP-6L1vxEmDMmjcXAY/s1600/ghost-brwoser.png" /></a></div>
<br />
<h2 style="text-align: center;">
<a href="https://ghostbrowser.com/" target="_blank">GHOST BROWSER</a></h2>
- Te permite identificarte en cualquier web con cuentas diferentes. Esto resulta muy útil si manejas varios perfiles en redes sociales.<br />
<br />
Su principal desventaja es que no contiene Develeoper Tools.<br />
<br /></div>
</div>
El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-77350145770314399342018-10-11T13:23:00.000+02:002019-04-16T13:36:36.776+02:00Etiqueta Vídeo HTML5 Responsive y cómo poner un vídeo de fondo a pantalla completa - ACTUALIZADODesde que se publicó esta noticia ha habido cambios importantes con respecto al parámetro <b>autoplay</b> que os pasamos a detallar.<br />
<br />
<b>NOTA:</b> Actualmente <b>Google Chrome</b> no reproduce vídeos en <b>autoplay</b> a no se que se active la opción<b> muted</b> en la etiqueta <b><video>.</b> Se recomienda ponerlo antes del atributo <b>autoplay</b>.<br />
<b><br />
</b> <b>NOTA: </b>Actualmente los <b>navegadores móviles</b> no permiten la opción <b>autoplay </b>para evitar el uso innecesario de datos.<br />
<br />
Para <span style="background-color: white;">insertar vídeo en<b> HTML5</b> </span>vamos a usar la etiqueta <b><video>,</b> que es <a href="http://caniuse.com/#search=video" target="_blank">válida para todos los navegadores execepto IE8 y Opera mini</a>.<br />
<br />
Para que se vea correctamente vamos a necesitar de los siguientes formatos de vídeo.<br />
<br />
<b>.mp4</b> > para navegadores Internet Explorer, Chrome y Safari.<br />
<b>.WebM</b> > para Firefox.<br />
<b>.ogv</b> > para Opera.<br />
<br />
Para convertir nuestro archivo de vídeo a estos formatos vamos a utilizar:<br />
<br />
<a href="https://handbrake.fr/" target="_blank">HandBrake</a> para convertir vídeos a .mp4.<br />
<br />
A continuación explicaremos como tenemos que codificar el vídeo para su correcto funcionamiento en la web.<br />
<br />
Lo primero que hacemos es configurar la resolución del vídeo en la pestaña Picture.<br />
<br />
<br />
<div style="text-align: center;"><b>Pestaña Picture:</b></div><div class="separator" style="clear: both; text-align: center;"></div><b><br />
</b> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJpnnD0I-kM-TkWyQzbriQB_D7oYNNpPWamll1xbkdBptqPNTCTRzlUq9A-SqtMYUhudy-DOnwokW-q4A4RDuCzKutUMNrq3oXM6YfdMXWefdJKze7po05LgbPCBYFci85bYLK_9ANHAA/s1600/handbrake-PESTANA-PICTURE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJpnnD0I-kM-TkWyQzbriQB_D7oYNNpPWamll1xbkdBptqPNTCTRzlUq9A-SqtMYUhudy-DOnwokW-q4A4RDuCzKutUMNrq3oXM6YfdMXWefdJKze7po05LgbPCBYFci85bYLK_9ANHAA/s1600/handbrake-PESTANA-PICTURE.png" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><br />
<b>Height </b>> 720 (no se necesita más resolución para un vídeo destinado a la web).<br />
<br />
<br />
<div style="text-align: center;"><b>Pestaña Vídeo:</b></div><div style="text-align: center;"><b><br />
</b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QNoWF2xAB4GzJUk2nCNA-FemRBuh6W11TfWT8nKIntlBnhhJBoKG5Tt3Orm1UzJbYlo0WYi6ECt5QY59APVDLQRaflLPqE0MeJ8HcXxDxBFrj4R8YoVeAI2rkWSuGWijp22YElTPG4hF/s1600/handbrake-mp4-video-converter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QNoWF2xAB4GzJUk2nCNA-FemRBuh6W11TfWT8nKIntlBnhhJBoKG5Tt3Orm1UzJbYlo0WYi6ECt5QY59APVDLQRaflLPqE0MeJ8HcXxDxBFrj4R8YoVeAI2rkWSuGWijp22YElTPG4hF/s1600/handbrake-mp4-video-converter.gif" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><b>Container</b> > MP4<br />
<b>Video Codec</b> > H.264 (X264)<br />
<b>Avg Bitrate</b> > 2900 (ponemos Variable Framerate ya que es mejor para la web).<br />
<b>2 Pass Encoding</b> (para una mejor codificación).<br />
<b>H.264 Profile</b> > High<br />
<br />
<br />
<div style="text-align: center;"><b>Pestaña Audio:</b></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOI3va3AezooUUVPAZg2_O61AWj8BegQN7_Wi3SGCrIF4h-1TeWfElV64IRwvgfO1o0EC5hvpmoToBiiN7BaUoyvVZb7pFJUFd0ag-BxfrUYumZd28VyQNqGutvyZOiXi_cfqzniPJOFn/s1600/handbrake-mp4-video-converter2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOI3va3AezooUUVPAZg2_O61AWj8BegQN7_Wi3SGCrIF4h-1TeWfElV64IRwvgfO1o0EC5hvpmoToBiiN7BaUoyvVZb7pFJUFd0ag-BxfrUYumZd28VyQNqGutvyZOiXi_cfqzniPJOFn/s1600/handbrake-mp4-video-converter2.gif" /></a></div><br />
<b>Codec</b> > AAC<br />
<b>Bitrate</b> > 64<br />
<b>Mixdown </b>> Mono<br />
<br />
<br />
<a href="http://www.mirovideoconverter.com/" target="_blank">Miro Video Converter</a> para convertir vídeos a .WebM y .OGV. Este programa no permite mucha configuración, a si que simplemente cargamos el vídeo que hemos pasado a MP4 y en el botón Format, lo pasamos a .WebM y OGV.<br />
<br />
Una vez tenemos los vídeos pasamos a usar la etiqueta HTML5 <video> de la siguiente manera:<br />
<br />
<pre class="brush: xml; ruler: true;"><video controls muted autoplay preload="auto" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"></pre><pre class="brush: xml; ruler: true;"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
Tu navegador no soporta HTML5 Video
</video>
</pre><br />
Los párametros que soporta <video> son:<br />
- <b>Controls</b> > Añade una barra con controles (es diferente por cada navegador).<br />
<b>- Muted </b>> Para quitar el audio al vídeo. Si queremos que se reproduzca un vídeo en <b>autoplay</b> en <b>Chrome</b>, tenemos que activar esta opción.<br />
- <b>Autoplay > </b>Para que el vídeo empiece sin necesidad de darle al play.<br />
- <b>Loop</b> > Para que se vuelva a reproducir cuando se acabe el vídeo.<br />
- <b>Preload</b> > Puede tomar los valores <b>auto</b> (carga el vídeo cuando carga la web), <b>none </b>(viene bién cuando tenemos una videogalería) y <b>metadata</b> (carga sólamente los metadatas)<br />
- <b>Poster</b> > Para añadir una imagen personalizada al inicio del vídeo.<br />
- <b>Width - Height</b> > Para especificar el ancho y el alto del vídeo.<br />
<br />
<br />
<br />
Para hacerlo compatible con la mayoría de los navegadores usamos la etiqueta <b><source></b> con el parámetro de <b>type.</b><br />
<b><br />
</b> Para hacer el <b>vídeo responsive</b> podemos utilizar <a href="http://fitvidsjs.com/" target="_blank">Fitvids.js</a> o bien aplicar las soluciones que nos proponen <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a> en su artículo <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" target="_blank">Fluid Width Video</a>.<br />
<br />
Nosotros hemos utilizado esta solución que contiene un vídeo que proviene de Youtube con muy buenos resultados.<br />
<br />
<pre class="brush: xml;"><div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</pre><pre class="brush: css;">.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</pre><br />
Para poner un <b>vídeo a pantalla completa</b> de fondo de nuestra web hay que utilizar el siguiente código CSS:<br />
<br />
<pre class="brush: css; ruler: true;">video {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</pre><br />
Os hemos dejado un ejemplo en <a href="http://codepen.io/pedromarin/public/" target="_blank">nuestro codepen.</a><br />
<br />
<div class="codepen" data-default-tab="result" data-height="284" data-slug-hash="KwOQaV" data-theme-id="12744" data-user="pedromarin">See the Pen <a href="http://codepen.io/pedromarin/pen/KwOQaV/">Vídeo de fondo a pantalla completa</a> by Pedro Marín (<a href="http://codepen.io/pedromarin">@pedromarin</a>) on <a href="http://codepen.io/">CodePen</a>.<br />
https://codepen.io/dudleystorey/pen/PZyMrd</div><script async="" src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
Por último para poner un vídeo de YouTube a pantalla completa podemos utilizar esta solución de Dudley Storey <a href="https://codepen.io/dudleystorey/pen/PZyMrd">https://codepen.io/dudleystorey/pen/PZyMrd</a><br />
<br />
<div class="codepen" data-default-tab="result" data-height="362" data-pen-title="FullScreen YouTube Video Background In Pure CSS" data-slug-hash="PZyMrd" data-theme-id="dark" data-user="dudleystorey">See the Pen <a href="https://codepen.io/dudleystorey/pen/PZyMrd/">FullScreen YouTube Video Background In Pure CSS</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io/">CodePen</a>.</div><script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com15tag:blogger.com,1999:blog-379238278894989933.post-61442435604683475422018-08-15T13:10:00.001+02:002018-08-15T13:17:35.175+02:00Cómo crear una barra de progreso en HTML - jQuery - JavaScript progress bar plugins<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDCqrc3Nz727w1jH-Jq9Oc2MI75UBqh1dOaS-RU11yvoe2R-Kruq0SyrmeqOo6wMEuWc9QBuuA2hYvlyeTUK85dr6vbz3GcJpjE2YKC1EtYpB3MZtR8R-xlVx6CL4Qiq_7Yb3i7BV4_5SR/s1600/como-crear-una-barra-de-progreso-en-html---jquery---javascript-progress-bar-plugins.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDCqrc3Nz727w1jH-Jq9Oc2MI75UBqh1dOaS-RU11yvoe2R-Kruq0SyrmeqOo6wMEuWc9QBuuA2hYvlyeTUK85dr6vbz3GcJpjE2YKC1EtYpB3MZtR8R-xlVx6CL4Qiq_7Yb3i7BV4_5SR/s320/como-crear-una-barra-de-progreso-en-html---jquery---javascript-progress-bar-plugins.png" width="320" /></a></div>Actualmente el uso de barras de progreso en HTML es muy variado y extendido.<br />
<br />
Las podemos utilizar para mostrar cualquier porcentaje ya sea de carga de nuestra web, de archivos, de tiempo de lectura, mostrar cantidades en una campaña de co-founding o mostrar una serie de pasos cuando nos damos de alta en una web o rellenamos un formulario.<br />
<br />
A continuación os mostramos una serie de plugins hechos en jQuery - JavaScript que más nos han llamado la atención, ya sea por su funcionalidad, o por su sencilla configuración.<br />
<br />
<a href="http://tinacious.github.io/goalProgress/" target="_blank">Animated Goal Progress Bar jQuery plugin</a> > Plugin de jQuery para crear una barra de progreso animada en una capa vacía. Contiene <a href="https://github.com/tinacious/goalProgress" target="_blank">parámetros</a> para definir una cantidad total, cantidad actual y añadir texto dentro de la capa.<br />
<br />
<a href="http://www.gerardolarios.com/plugins-and-tools/jqmeter/" target="_blank">jQMeter</a> > Plugin de jQuery sencillo y simple que nos permite animar barras de progreso horizontales o verticales. Se puede modificar opciones como ancho, alto, colores... para conseguir el aspecto que se desea.<br />
<br />
<a href="https://kimmobrunfeldt.github.io/progressbar.js/" target="_blank">ProgressBar.js</a> > Plugin de jQuery responsive (totalmente compatible con móviles) para animar cualquier forma vectorial SVG como líneas, cuadrados, círculos, semicírculos... muy recomendable para utilizar pantallas de carga en tu web. Compatible con IE9<br />
<br />
<a href="http://franverona.com/loadgo/" target="_blank">LoadGo</a> > Plugin de JavaScript que nos permite crear una barra de progreso usando nuestras propias imágenes. Perfecto para la animación de logos. Crea una capa encima de la imagen que simula el proceso de carga usando las dimensiones de la imagen. Compatible con IE9.<br />
<br />
<a href="http://kottenator.github.io/jquery-circle-progress/" target="_blank">jquery-circle-progress</a> > Plugin de jQuery para animar círculos.<br />
<br />
<a href="https://github.com/mateagar/progressStep" target="_blank">Progress Step</a> > Plugin de jQuery que crea una barra de progreso numérica por pasos. Muy recomendable para usarlo en cualquier proceso guiado por pasos, como por ejemplo en un alta de usuario.<br />
<br />
<a href="https://www.jquerycards.com/forms/date-time/progression-js/" target="_blank">jQuery Progression JS</a> > Plugin de jQuery que nos muestra a tiempo real el progreso que nos queda para completar cualquier formulario.<br />
<br />
Por último comentaros si lo que queréis es una barra de progreso que muestre el tiempo de lectura en nuestra web, podéis consultar la <a href="https://www.elmaquetadorweb.com/2018/01/como-crear-una-barra-o-indicador-de.html" target="_blank">noticia que publicamos sobre prognroll</a> hace unos meses.<br />
<br />
Como siempre os animamos a comentar y compartir otros plugins que halláis utilizado con éxito.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-42600656365747674032018-06-25T16:44:00.003+02:002018-08-16T13:05:24.219+02:00Resumen visual de colores CSS, fuentes y tamaños de imágenes utilizados en una web <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdiYpzjQ6urQqaoAzdHYy-rsSUZEHRt5fk4Po-vPeaCzEk5STRyXTDNEeNq3WzWhhNYyR5MCK7BkvvQGeururVnCNPxb2t63SbVc59RFUUKVCguO28uOyvC-F0apn3Gha6wdmlP6ohY6z/s1600/Resumen-Visual-de-Colores-CSS%252C-Fuentes-y-Tama%25C3%25B1os-de-Im%25C3%25A1genes-utilizados-en-una-web.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdiYpzjQ6urQqaoAzdHYy-rsSUZEHRt5fk4Po-vPeaCzEk5STRyXTDNEeNq3WzWhhNYyR5MCK7BkvvQGeururVnCNPxb2t63SbVc59RFUUKVCguO28uOyvC-F0apn3Gha6wdmlP6ohY6z/s320/Resumen-Visual-de-Colores-CSS%252C-Fuentes-y-Tama%25C3%25B1os-de-Im%25C3%25A1genes-utilizados-en-una-web.png" width="320" /></a></div>
Hoy os traemos un recurso simple pero muy útil, se trata de <a href="http://stylifyme.com/" target="_blank">Stylify Me</a>.<br />
<br />
Como siempre al maquetar una web tenemos que ser muy ordenados y disciplinados y esta herramienta online nos va ayudar a serlo.<br />
<br />
Sin duda lo que mas nos ha llamado la atención es poder listar visualmente todos los colores que se han utilizado en una web.<br />
<br />
Esto no permite ver claramente si podemos unificar colores que sean muy parecidos para conseguir un resultado mucho mas corporativo.<br />
<br />
<a href="http://stylifyme.com/" target="_blank">Stylify Me</a> nos muestra visualmente los colores utilizados como color de fondo y de texto. también nos muestra visualmente las tipografías utilizadas, y sus tamaños y por último nos muestra ejemplos de los tamaños de imágenes utilizados.<br />
<br />
En resumen <a href="http://stylifyme.com/" target="_blank">Stylify Me</a> nos muestra información muy valiosa para poder unificar criterios en la web que queramos.<br />
<br />
Una alternativa a <a href="http://stylifyme.com/" target="_blank">Stylify Me</a> es <a href="https://cssstats.com/" target="_blank">CSS Stats</a> el cual nos analiza nuestra web para mostrarnos información sobre:<br />
- Reglas, Selectores, Declaraciones y Propiedades.<br />
- Colores (tipografía y color de fondo).<br />
- Tamaños y familias de tipografía.<br />
- Valores de z-index.<br />
- Gráficos de estadísticas sobre el código CSS de nuestra web..<br />
- Media Queries.<br />
- Espacios (márgenes y paddings).<br />
- Listado de archivos CSS.<br />
<br />
Para terminar comentaros que si lo que queremos es listar los colores utilizados en un archivo CSS mediante la carga de un archivo o pegando el contenido del archivo CSS, podemos utilizar las siguientes herramientas online.<br />
<br />
<a href="http://www.css-color-extractor.com/" target="_blank">CSS color extractor</a> > Nos muestra visualmente los colores utilizados en un CSS, o URL.<br />
<a href="http://svay.com/experiences/css-color-palette-extractor/" target="_blank">CSS Color Palette Extractor</a> > Nos muestra visualmente los colores utilizados en un CSS<br />
<a href="https://zedbi.azurewebsites.net/View-a-websites-color-scheme" target="_blank">zedbi View a website's color palette</a> > Nos muestra visualmente los colores utilizados una URL permitiéndonos seleccionar los Archvios CSS que contienen.<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-10235094429335015482018-05-22T02:02:00.000+02:002019-02-28T14:42:50.204+01:00Jerarquía CSS - Cómo evitar el uso de !important en CSS - Cómo sobreescribir a un important CSS<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSR-IlbTVo8IK0N5BfJXtU8SrR90QNQUJ2l5BX4P48ZSo327Meq_PT68qLH0OR1frCx9Lm0kypa8CTxooWBCIPlWwnHGwBY6xOJFPcVl9ubPklK07PxN-EV1MO1ZLzZXE_-YRh2b_61z6n/s1600/css-important-stop.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSR-IlbTVo8IK0N5BfJXtU8SrR90QNQUJ2l5BX4P48ZSo327Meq_PT68qLH0OR1frCx9Lm0kypa8CTxooWBCIPlWwnHGwBY6xOJFPcVl9ubPklK07PxN-EV1MO1ZLzZXE_-YRh2b_61z6n/s320/css-important-stop.png" width="320" /></a></div>
Actualmente el uso de la regla <b>CSS <span style="color: red;">!important</span> </b>está muy extendido y se aplica de forma abusiva, lo que nos genera archivos CSS complicados y muy difícil de mantener.<br />
<br />
Como maquetadores webs <b>nuestro objetivo tiene que ser generar un código CSS intentando no utilizar la regla<span style="color: red;"> !important</span>,</b> para ello lo primero que nos tiene que quedar claro es como funciona la jerarquía CSS.<br />
<br />
Cuando hablamos de <b>estilos en cascada</b> nos referimos a un <b>modelo de datos jerárquico</b> en el cual los datos son organizados en una estructura parecida a la de un árbol, con relaciones <b>padre - hijo</b>.<br />
<br />
Si tenemos varias reglas asignando propiedades a un mismo elemento este va a asignar las propiedades CSS de mayor a menor importancia dependiendo de donde venga.<br />
<br />
A continuación os mostramos los diferentes <b>niveles ordenados de mas específicos a menos específicos.</b><br />
<br />
<b>NIVEL 01</b><br />
<hr />
- Estilos en línea (<p style="color:#fff;">)<br />
<br />
<b>NIVEL 02</b><br />
<hr />
- ID (#nombreId)<br />
<br />
<b>NIVEL 03</b><br />
<hr />
- Clases (.nombreClase)<br />
- Atributos y Pseudo - Clases (:first-child, :last-child :hover ...)<br />
<br />
<b>NIVEL 04</b><br />
<hr />
- Elementos (a, p, ul ...)<br />
- Pseudo - Elementos (::after, ::before, ::first-letter ...)<br />
<br />
Resumiendo si ponemos en nuestro HTML un <b>estilo CSS en línea,</b> siempre<b> va a sobrescribir a los demás estilos CSS declarados,</b> ya que se encuentra en el Nivel 01 y al ser el mas específico, es el que mayor importancia tiene.<br />
<br />
La única manera de ganar a un estilo en línea es a través de la regla <b><span style="color: red;">!important</span>;</b><br />
<br />
Podemos ver un ejemplo gráfico de los diferentes niveles de <b>jerarquía CSS</b> es esta <a href="https://specificity.keegan.st/" target="_blank">Calculadora de Especificidad CSS</a>.<br />
<br />
También podemos consultar las <a href="https://www.w3.org/TR/selectors-3/#specificity" target="_blank">especificaciones de los selectores CSS de la W3C</a>.<br />
<br />
Una vez entendido esto, para no llenar nuestra hoja de estilo CSS de <span style="color: red;">!important</span> simplemente tenemos que analizar nuestro HTML y<b> aplicar clases más específicas</b> al elemento que queramos sobrescribir.<br />
<br />
A continuación os dejamos un esquema con diferentes selectores que podemos aplicar a un párrafo <p> y su nivel de jerarquía.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirug87D_MDRAwrqcXGf8kSRAFzg5nw4AXsFnUz7ouG8xlSyGnd5GXn2mblxEj471054O_3_AhdJbvQFi78942i5cIvHi2hwJJuPvCGHvWL_5v1O6jKZR2_1w6ZLQxK43NK5J0W2NfkzwHa/s1600/evitar-uso-important-CSS---sobreescribir-important.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirug87D_MDRAwrqcXGf8kSRAFzg5nw4AXsFnUz7ouG8xlSyGnd5GXn2mblxEj471054O_3_AhdJbvQFi78942i5cIvHi2hwJJuPvCGHvWL_5v1O6jKZR2_1w6ZLQxK43NK5J0W2NfkzwHa/s1600/evitar-uso-important-CSS---sobreescribir-important.png" /></a></div>
<br />
Esta vez hemos hecho un ranking con los niveles, digamos que <b>el Nivel 1 es el que gana y sobrescribe a los demás. </b><br />
<br />
También os dejamos un ejemplo en nuestro CodePen.<br />
<br />
Como curiosidad hemos puesto las clases mas específicas en las primeras líneas de nuestro CSS para demostrar que podemos sobrescribir una clase sin importar el orden del documento.<br />
<br />
<div class="codepen" data-default-tab="css,result" data-embed-version="2" data-height="385" data-pen-title="Jerarquía CSS - Cómo evitar el uso de !important en CSS - Cómo sobreescribir a un important CSS" data-slug-hash="GdejgQ" data-theme-id="12744" data-user="pedromarin">
See the Pen <a href="https://codepen.io/pedromarin/pen/GdejgQ/">Jerarquía CSS - Cómo evitar el uso de !important en CSS - Cómo sobreescribir a un important CSS</a> by Pedro Marín (<a href="https://codepen.io/pedromarin">@pedromarin</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
<br />
Como podéis comprobar hemos sobrescrito los estilos CSS del párrafo sin necesidad de utilizar <span style="color: red;">!important</span> solo hemos tenido que ser más específicos.<br />
<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com1tag:blogger.com,1999:blog-379238278894989933.post-45657271345733092412018-04-26T03:23:00.000+02:002018-09-24T02:35:28.054+02:00Crear ventana modal responsive jQuery - mejores modales Accesibles jQuery <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlL_FbpqbqIcpnOkpQehQEVsKBG0fOBbDw5QkA9FUJCWtk6ed391fceexLFTIgW4B_gK5t85NM3erma702J8rYdr1rwWMsuLxbFkmLZSMuv5-TNAAd4TURwPYkTTg9LYmtX5WqgBjuSsuK/s1600/Crear-ventana-modal-responsive-jQuery---mejores-modales-Accesibles-jQuery.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlL_FbpqbqIcpnOkpQehQEVsKBG0fOBbDw5QkA9FUJCWtk6ed391fceexLFTIgW4B_gK5t85NM3erma702J8rYdr1rwWMsuLxbFkmLZSMuv5-TNAAd4TURwPYkTTg9LYmtX5WqgBjuSsuK/s400/Crear-ventana-modal-responsive-jQuery---mejores-modales-Accesibles-jQuery.png" width="400" /></a></div><br />
El modal mas simple que jamás verás. Con ese eslogan se presenta <a href="http://jquerymodal.com/" target="_blank">jQuery Modal</a> un plugin de jQuery que nos permite generar popups o modales accesibles de una manera realmente sencilla.<br />
<br />
Las principales características de este plugin de jQuery son:<br />
<br />
- Totalmente gratuito.<br />
- Genera HTML Semántico.<br />
- No contiene imágenes por lo tanto es muy ligero de peso (cerca de 1k).<br />
- Utiliza comportamientos usando <a href="http://api.jquery.com/category/events/" target="_blank">eventos de jQuery</a>.<br />
- Se cierra haciendo click o con la tecla escape.<br />
- Código Accesible.<br />
- Interfaz simple y clara.<br />
<br />
Os dejamos su <a href="https://github.com/kylefox/jquery-modal" target="_blank">dirección en GitHub para que podáis bajaros el plugin</a>.<br />
<br />
También un ejemplo en nuestro codepen<br />
<br />
<div class="codepen" data-default-tab="html,result" data-embed-version="2" data-height="288" data-pen-title="Crear ventana modal responsive jQuery - mejores modales Accesibles jQuery " data-slug-hash="YLWmNJ" data-theme-id="12744" data-user="pedromarin">See the Pen <a href="https://codepen.io/pedromarin/pen/YLWmNJ/">Crear ventana modal responsive jQuery - mejores modales Accesibles jQuery </a> by Pedro Marín (<a href="https://codepen.io/pedromarin">@pedromarin</a>) on <a href="https://codepen.io/">CodePen</a>.</div><script async="" src="https://static.codepen.io/assets/embed/ei.js"></script><br />
Y otras alternativas que hemos probado con muy buenos resultados.<br />
<br />
<a href="http://humaan.com/modaal/" target="_blank">Modal</a> > Modales accesibles de nivel AA<br />
<a href="https://sweetalert2.github.io/" target="_blank">SweetAlert2</a> > Nos permite crear ventanas de alerta accesibles basados en estándares WAI-ARIA<br />
<a href="https://a11y.nicolas-hoffmann.net/modal/" target="_blank">Aria Modal</a> > El mejor modal accesible, prima la accesibilidad sobre el diseño.<br />
<br />
Si lo que queremos son modales mas dinámicos y menos accesibles podéis probar:<br />
<br />
<a href="http://github.hubspot.com/vex/docs/welcome/" target="_blank">Vex</a> > Nos ofrece modales modernos.<br />
<a href="http://joaopereirawd.github.io/animatedModal.js/" target="_blank">animatedModal.js</a> > Modales Animados.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-41830870183498401512018-02-28T17:45:00.001+01:002018-02-28T17:45:45.303+01:00Páginas de vectores gratis para descargar de dominio público - Creative Commons Zero (CC0) - para uso comercial<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitr8OdDhNYPjoqyKP_DqeaPSfNBeAbBKet0i12BOjMiMaVlOTjD-5tkEQNFVpHEJ45a7mGOAsowazoSYVi0FrAPu2da-00krcUf-JX0xH0u1U8Pcxs9kvhHsKhqFNalQQuD6oexo9NXBo5/s1600/bancos-de-vectores-cc0-para-uso-comercial.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitr8OdDhNYPjoqyKP_DqeaPSfNBeAbBKet0i12BOjMiMaVlOTjD-5tkEQNFVpHEJ45a7mGOAsowazoSYVi0FrAPu2da-00krcUf-JX0xH0u1U8Pcxs9kvhHsKhqFNalQQuD6oexo9NXBo5/s320/bancos-de-vectores-cc0-para-uso-comercial.png" width="320" /></a></div>
Al igual que con los bancos de imágenes, existen <b>páginas con vectores gratis para uso comercial</b> que podemos usar en nuestros proyectos webs. <br />
<br />
Las páginas con vectores bajo licencia de <b>dominio público o Creative Commons Zero (CC0)</b> son mucho más difíciles de encontrar por lo que hemos decidido recopilar unas cuantas para vosotros.<br />
<br />
<a href="https://openclipart.org/" target="_blank">Openclipart</a> > Más de 139.000 Vectores 100% gratis para uso comercial para hacer lo que quieras con ellos. Cada vez que un artista sube un vector a Openclipart, se le deja claro que el artista está liberando los derechos para que cualquiera los use por cualquier razón.<br />
<a href="https://publicdomainvectors.org/" target="_blank">Publicdomainvectors</a> > Más de 50.000 vectores de dominio público.<br />
<a href="http://www.i2clipart.com/" target="_blank">i2Clipart</a> > Cliparts royalty free de dominio público.<br />
<a href="http://www.clker.com/" target="_blank">Clker</a> > Cliparts gratis que puedes usar para cualquier cosa.<br />
<br />
<a href="https://pixabay.com/" target="_blank">Pixabay</a> > Imágenes gratuitas de alta calidad, más de 860.000 fotos gratis, vectores e ilustraciones.<br />
<a href="https://www.goodfreephotos.com/vector-images/" target="_blank">Goodfreephotos</a> > Repositorio con fotos en alta resolución y vectores. Todos sin copyright con licencia CC0.<br />
<a href="https://www.stockio.com/" target="_blank">Stockio</a> > Banco de imágenes, vectores, iconos, fonts y vídeos para uso comercial y personal.<br />
<br />
Desde el maquetadorweb os animamos a postear los que vosotros utilizáis, aunque sean pequeños, lo único que pedimos es que sean bajo licencia Creative Commons Zero (CC0) y que no se tenga que atribuir derechos de autor.<br />
<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-3742170989056033872018-01-17T22:17:00.003+01:002018-01-22T11:23:03.628+01:00Cómo crear una barra o indicador de progreso que muestre el tiempo de lectura en nuestra web - jQuery.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDnfd_84SbMZXJ4MAstcJJcPKe9i7YOzAhlptWtm6eQ4d87R_3UU41nBXyls0ZYnSxq9ZEUkIZYcMTqlgFnCNhPESVrtiEc6srwBN4KJo1aR2RhhE07BmXWcHZDCLImAnu7mQhqA5DNBP/s1600/C%25C3%25B3mo-crear-una-barra-o-indicador-de-progreso-que-muestre-el-tiempo-de-lectura-en-nuestra-web---jQuery..png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDnfd_84SbMZXJ4MAstcJJcPKe9i7YOzAhlptWtm6eQ4d87R_3UU41nBXyls0ZYnSxq9ZEUkIZYcMTqlgFnCNhPESVrtiEc6srwBN4KJo1aR2RhhE07BmXWcHZDCLImAnu7mQhqA5DNBP/s400/C%25C3%25B3mo-crear-una-barra-o-indicador-de-progreso-que-muestre-el-tiempo-de-lectura-en-nuestra-web---jQuery..png" width="400" /></a></div>
Una de las tendencias del pasado 2017 en maquetación web, es indicar a través de una barra de progreso horizontal lo que lleva leído el usuario de nuestra web.<br />
<br />
Lo podemos ver en multitud de webs y hemos decidido implentarlo en <a href="http://www.elmaquetadorweb.com/">www.elmaquetadorweb.com</a><br />
<br />
Si os fijáis bien a medida que hacemos scroll en este artículo, aparece un indicador de progreso en la parte superior que nos muestra de modo visual lo que llevamos leído.<br />
<br />
<br />
Desde el <a href="http://www.elmaquetadorweb.com/">www.elmaquetadorweb.com</a> siempre nos gustan este tipo de recursos que apenas tiene impacto en nuestro código y son 100% responsive.<br />
<br />
Para implementarlo vamos a utilizar <a href="https://github.com/mburakerman/prognroll" target="_blank">prognroll</a> un plugin jQuery pequeño y ligero que nos permite crear una barra de progreso al hacer scroll.<br />
<br />
Para ello simplemente tenemos que descargarnos el plugin desde su <a href="https://github.com/mburakerman/prognroll" target="_blank">página en github</a><br />
<br />
Referenciamos la librería junto a jQuery, esta vez lo vamos a hacer mediante repositorios CDN.<br />
<br />
<pre class="brush: xml;"><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>
</pre>
<br />
Por último inicializamos el plugin:<br />
<br />
<pre class="brush: js;">$("body").prognroll({
//Altura de la barra de progreso
height: 8,
//Color de la barra de progreso
color: "#1C94BA",
// Si queremos añadir una barra de progreso a una capa ponemos el valor true
custom: false
});
</pre>
<br />
<br />
A continuación os dejamos un ejemplo en nuestro CodePen.<br />
<br />
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="251" data-pen-title="Barra o indicador de progreso que muestre el tiempo de lectura en nuestra we" data-slug-hash="EodBgV" data-theme-id="12744" data-user="pedromarin">
See the Pen <a href="https://codepen.io/pedromarin/pen/EodBgV/">Barra o indicador de progreso que muestre el tiempo de lectura en nuestra we</a> by Pedro Marín (<a href="https://codepen.io/pedromarin">@pedromarin</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
<br />
<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-19585703549504841152017-12-04T14:08:00.000+01:002017-12-04T14:08:07.267+01:00Tooltips gratis hechos solamente con CSS para usar en tu web<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVZMSP9fH27fKditX9c3tKs7TALQ78OjFdzfjyV4ShMwaJ3rryaEf0lsXjGtdmWeJXe7Lt0_l__-PWhvwP5u8z-sPNStlXroLsGpvK2IcNmDndXEI-TWHmht4jcFbpn3mdVqm2LZmVaET/s1600/tooltip.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVZMSP9fH27fKditX9c3tKs7TALQ78OjFdzfjyV4ShMwaJ3rryaEf0lsXjGtdmWeJXe7Lt0_l__-PWhvwP5u8z-sPNStlXroLsGpvK2IcNmDndXEI-TWHmht4jcFbpn3mdVqm2LZmVaET/s400/tooltip.png" width="400" /></a></div>
Esta vez os traemos una colección de <b>tooltips</b> (descripción emergente) hechos solamente en <b>CSS</b>.<br />
<br />
Cada vez más, los desarrolladores y maquetadores web se decantan por este tipo de <b>recurso web</b> hecho solamente en CSS. <br /><br />Al estar hechos en CSS, nos evitamos cargar cualquier librería javascript y mejoramos la <b>carga y el rendimiento de nuestra web.</b><br /><br />Como siempre hemos intentado seleccionar los que contienen un código simple y fácil de implementar.<br />
<br />
<h2>
Animate CSS Tooltips (by runnabro)</h2>
<div class="codepen" data-default-tab="result" data-embed-version="2" data-height="300" data-pen-title="Animated CSS Tooltips" data-slug-hash="imeHn" data-theme-id="12744" data-user="runnabro">
See the Pen <a href="https://codepen.io/runnabro/pen/imeHn/">Animated CSS Tooltips</a> by runnabro (<a href="https://codepen.io/runnabro">@runnabro</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<h2>
CSS ToolTip Smooth Animation (by Omar Dsoky)</h2>
<div class="codepen" data-default-tab="result" data-embed-version="2" data-height="300" data-pen-title="CSS ToolTip Smooth animation" data-slug-hash="xrEjaK" data-theme-id="12744" data-user="linux">
See the Pen <a href="https://codepen.io/linux/pen/xrEjaK/">CSS ToolTip Smooth animation</a> by Omar Dsoky (<a href="https://codepen.io/linux">@linux</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<h2>
Quick CSS3 tooltips (No images, no js) (by deineko)</h2>
<div class="codepen" data-default-tab="result" data-embed-version="2" data-height="265" data-pen-title="Quick CSS3 tooltips (No images, no js)" data-slug-hash="YZeQJP" data-theme-id="0" data-user="deineko">
See the Pen <a href="https://codepen.io/deineko/pen/YZeQJP/">Quick CSS3 tooltips (No images, no js)</a> by deineko (<a href="https://codepen.io/deineko">@deineko</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<h2>
CSS Tooltip (by Mana)</h2>
<div class="codepen" data-default-tab="result" data-embed-version="2" data-height="300" data-pen-title="CSS tooltip" data-slug-hash="ogQBwJ" data-theme-id="12744" data-user="manabox">
See the Pen <a href="https://codepen.io/manabox/pen/ogQBwJ/">CSS tooltip</a> by Mana (<a href="https://codepen.io/manabox">@manabox</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<h2>
Pure-CSS Tooltips (by pure-css.com)</h2>
<div class="codepen" data-default-tab="result" data-embed-version="2" data-height="434" data-pen-title="Pure-CSS Tooltips" data-slug-hash="bddggP" data-theme-id="0" data-user="pure-css">
See the Pen <a href="https://codepen.io/pure-css/pen/bddggP/">Pure-CSS Tooltips</a> by Pure-CSS.com (<a href="https://codepen.io/pure-css">@pure-css</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-45807913521708393222017-11-09T22:20:00.000+01:002019-02-28T14:43:42.608+01:00Cómo hacer un desplegable en HTML - CSS - JQuery - Expander y Colapsar menús, tablas, celdas, formularios, listas ...<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXmNe2BdIfWScANQNLiOD0YUUXuUU9Pkx2YKyghyrkA37jbX1OLQdqk1c-c64bS-AFv41rPbNYEV4u3sECORQNh0fmUOGUShowptadvtfY7b9gAFZo6olFCL2qlBHTP03VUiswD7qBdBu/s1600/C%25C3%25B3mo-hacer-un-desplegable-en-HTML5---CSS---JQuery---bot%25C3%25B3n---barra---lista---etiquetas---tabla---celdas---formulario--panel.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXmNe2BdIfWScANQNLiOD0YUUXuUU9Pkx2YKyghyrkA37jbX1OLQdqk1c-c64bS-AFv41rPbNYEV4u3sECORQNh0fmUOGUShowptadvtfY7b9gAFZo6olFCL2qlBHTP03VUiswD7qBdBu/s400/C%25C3%25B3mo-hacer-un-desplegable-en-HTML5---CSS---JQuery---bot%25C3%25B3n---barra---lista---etiquetas---tabla---celdas---formulario--panel.png" width="400" /></a></div>
Un <b>despleglable HTML</b> es un recurso de maquetación muy práctico, que cada vez se utiliza más en <b>Responsive,</b> ya que nos permite esconder contenido y por lo tanto mostrar la información de nuestra web de una manera muy clara.<br />
<br />
Podemos desplegar elementos como <b>menús, tablas, celdas, formularios, listas</b> y en general cualquier <b>etiqueta HTML</b><br />
<br />
Para Hacer un despegable en HTML vamos a utilizar <a href="http://sylvain-hamel.github.io/simple-expand/" target="_blank">simple-expand</a> un recurso <b>jQuery</b> muy simple que nos permite <b>expander</b> y <b>colapsar</b> cualquier tipo de elemento.<br />
<br />
En <a href="http://sylvain-hamel.github.io/simple-expand/" target="_blank">su web</a> viene toda la información necesaria para su utilización.<br />
<br />
Para descargarnos el plugin tenemos que ir a su web en <a href="https://github.com/sylvain-hamel/simple-expand" target="_blank">Github</a>.El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0tag:blogger.com,1999:blog-379238278894989933.post-46076559895354145002017-10-17T18:49:00.001+02:002017-10-17T18:51:27.453+02:00Localizar y eliminar imágenes y archivos que no se utilizan en tu web.Una parte muy importante a la hora de entregar un proyecto es dejar nuestro proyecto<b> limpio de archivos que no se utilizan.</b><br />
<br />
Para ello vamos a utilizar el <b>verificador de vínculos</b> de <b>Dreamweaver.</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilSsfVZDIRlsLN_22TMPSpsoF05FVHucWAbNbvN9rDcB_AaQtsi-qCexOAdik4AcdVZZueYbqsMepfk7yynuAucGxb2vRhADraDTjwusGnXbObh6u-CvUwXgQ7kPByd0dmO7Ue8_drW7cH/s1600/localizar-y-eliminar-imagenes-y-archivos-no-usados-en-tu-web.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="377" data-original-width="542" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilSsfVZDIRlsLN_22TMPSpsoF05FVHucWAbNbvN9rDcB_AaQtsi-qCexOAdik4AcdVZZueYbqsMepfk7yynuAucGxb2vRhADraDTjwusGnXbObh6u-CvUwXgQ7kPByd0dmO7Ue8_drW7cH/s1600/localizar-y-eliminar-imagenes-y-archivos-no-usados-en-tu-web.jpg" /></a></div>
Lo primero que vamos a hacer es tener actualizado nuestro sitio en Dreamweaver, por lo tanto vamos al <b>Menú Principal > Sitio > Avanzadas > Volver a crear caché del sitio.</b>A continuación pulsamos <b>Control + F8</b> (Comando + F8 en <b>Mac</b>), para que nos muestre el <b>verificador de vínculos</b>, pulsamos sobre el <b>icono play</b> (situado arriba a la izquierda) y elegimos <b>Buscar sitio actual completo en vínculos.</b><br />
<br />
Una vez se ha realizado la búsqueda, elegimos qué queremos ver con el despegable Mostrar: el cual tiene las siguientes opciones:<br />
<br />
- Vínculos rotos (muestra los vínculos con archivos que no se encuentran en el disco local).<br />
- Vínculos externos (muestra los vínculos con páginas situadas fiera del sitio).<br />
<b>- Archivos huérfanos (muestra los archivos sin vínculos entrantes).</b><br />
<b><br /></b>
Si queremos borrar los archivos o imágenes que no se están utilizando, simplemente mostramos los archivos huérfanos, los seleccionamos y los borramos del disco duro pulsando sobre la tecla suprimir.<br />
<br />
Por último comentaros que este sistema para encontrar archivos que no se estén usando, hay que utilizarlo con <b>mucha supervisión</b> y<b> nunca fiarse al 100%</b> ya que puedes borrar imágenes que un futuro se vayan a usar o simplemente se estén usando por Javascript y Dreamweaver no lo detecta.<br />
<br />
<br />El maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.com0