Banner de perfil
0

Tumàs Muntané

@tumasmuntane

Soy Diseñador y Desarrollador Web Especialista en WordPress. Ayudo a mis clientes a ahorrar tiempo y dinero ofreciéndoles servicios de desarrollo, optimización y mantenimiento para WordPress rentables y efectivos en: https://tumasmuntane.com Hace 15 años que me dedico al diseño gráfico y desarrollo web. En el año 2013 me enamoré de WordPress y desde entonces me he especializado en el desarrollo de páginas web con este gestor de contenidos. Cuando tengo la oportunidad, también hago animación y videojuegos.

Sitges, Spain

Colaboración proyecto Sass

Tumàs Muntané@tumasmuntane

Muy buenas comunidad.

Me urge encontrar entre 1 y 4 personas para una colaboración remunerada. El proyecto se trata de maquetar una serie de módulos en CSS. Solo esto, ya que el resto está todo hecho pero vamos muy justos con las fechas de la entrega.

Se requiere un buen nivel de Sass y CSS. También nociones básicas de Bootstrap, GitHub y WordPress. Imprescindible ser una persona resolutiva, con actitud y con posibilidad de realizar facturas legales.

Se realizará una prueba con la maquetación de un primer módulo para ver si se es la persona indicada, y si esta es satisfactòria se remunerarà la misma y continuará con el resto de módulos.

Se necesita disponibilidad absoluta, ya que como digo vamos justisimos de tiempo.

A quien le interese que me facilite un contacto por aquí y le escribo con más detalle.

Gracias


Recuperar datos de una funcion asincrona

Tumàs Muntané@tumasmuntane

Hola

No he trabajado con funciones asincronas, y supongo que me dejo algo por el camino, ¿pero como puedo resuperar y usar los datos fuera?

Me intento explicar, necesito obtener datos de un Ggoogle Sheets, he encontrado este articulo el cual lo explica: https://www.jasoft.org/Blog/post/como-usar-una-hoja-de-calculo-de-google-como-backend-json

La función tiene un "return datos;", entonces yo he intentado

1 2Pero no me muestra en consola los datos del array, sino una 'Promise'. 3 4Y si hago ~~~console.log(test[1]["Titulo"]); ~~~ , por ejemplo, un undefined. 5 6 7 8¿Entonces, como puedo recuperar esa variable fuera del promise y así poder mostrar los datos en pantalla? 9 10 11 12Gracias

Un solo .js VS varios .js VS incrustación en HTML

Tumàs Muntané@tumasmuntane

Muy buenas gente, una pregunta.

¿Es mejor tener un único archivo JS que contenga todos los scripts de la web? o ¿Archivos concretos de cada función y cargarlos solo en las URLs necesarias?

¿O incluso incrustar los códigos en el HTML? Se que lo recomendable siempre és el archivo externo, pero la verdad es que son codigos muy simples de 10 lineas los más simples y unas 40 los más "complejos" y los incrustaria minificados.

En el caso en concreto estoy tratando con solo 4 o 5 funciones no muy grandes, el que los agrupa todos son solo 3kB, individualmente son solo 100 o 200 bytes. Eso si, las funciones nunca se usan en toda la web, solo algunas URLs estan usando uno u otro codigo.

Aunque me interesa saber la opinión más general, sin entrar al caso concreto, para otro tipo de situaciones.

Muchas gracias.


Problemas de maquetación en iPhone

Tumàs Muntané@tumasmuntane

Hola a todos.

Estamos haciendo un mini juego de preguntas que se muestra directamente en un sitio web con html, css y js. Tengo los tags html y body con "overflow:hidden; width:100vw; height:100vh;" para ocupar todo el navegador.

Al visualizarlo con iPhone, el menú inferior de iPhone me queda sobrepuesto encima de la web y me tapa algunos elementos importantes. En un ppio no hay más problema que dar padding-bottom al elemento cuando se visualiza en iPhone, para que se posicione algo más arriba.

El problema está en que una vez que el usuario ha completado una pregunta, ese menú ya no se sobrepone a la web, simplemente se posiciona debajo, entonces ese arreglo del padding-bottom hace que se suba todo el contenido haciendo que parte de este no se ni visualizable.

Matizar que esto ocurre se complete o se intente completar, solo con que aparezca el teclado ya tengo el problema. Lo del padding-bottom es una de las opciones, pero he dado un alto fijo al contenedor, un margin-bottom al elemento hijo, etc. he intentado disstintas formas y siempre sucede. También he maquetado las 2 pantallas en las que me ocurre esto con flex, con block y tamaños fijos, vamos he provado varias formas y siempre me topo con el mismo problema.

¿Alguien se ha topado con un problema similar y me sabe orientar?

Gracias.


document.body.innerHTML no modifica mi HTML

Tumàs Muntané@tumasmuntane

Hola, no se si estas consultas en el curso son internas o son publicas en toda la comunidad, así que detallaré la situación.

Me encuentro en el vídeo 2.4-Herencia del Curso de POO con JavaScript, en ésta clase se esta explicando como extender las clases.

Mi problema és que cuando mediante la consola quiero aplicar el método para dibujar el objeto que hemos creado, el navegador (Chrome y/o Firefox) no me imprime nada en el HTML.

Aquí el snippet usado:

1class Shape { 2 3 constructor( width, height, color ) { 4 this.width = width 5 this.height = height 6 this.color = color 7 } 8 9 draw() { 10 return document.body.innerHTML = ` 11 <div style=" 12 width: ${this.width}px; 13 height: ${this.height}px; 14 background-color: ${this.color};"></div>` 15 } 16} 17 18let shape1 = new Shape( 40, 20, 'red' )

Cuando el profesor Beto usa ~~~forma1.dibujar~~~, la consola le retorna justo antes de dibujar en su HTML:

<div
	style="
	width: 400px;
	height: 220px;
	background: red;"
	>
	</div>

En cambio a mi me retorna la declaración del método tal cual la escribí:

draw() {
	return document.body.innerHTML = `
	<div style="
		width: ${this.width}px;
		height: ${this.height}px;
		border-radius: ${this.radius}px;
		background-color: ${this.color};"></div>`
}

Aclarar que: En ningún momento me marca un error. He probado de copiar tal cual el snippet del profesor. He intentado con algún otro snippet de ejemplo encontrado en developer.mozilla.org. Incluso he intentado algo más simple en plan ~~~write() { return document.body.innerHTML = <p>Hello world</p>} ~~~. Pero siempre obtengo el mismo resultado. Ah si, Chrome está actualizado a su última versión

No entiendo porque está pasando esto por lo que agradeceré cualquier ayuda.

Muchas gracias a todos :)


Sobre el peso/cantidad de recursos estáticos

Tumàs Muntané@tumasmuntane

Buenas. :D

Estoy desarrollando un sitio el cual necesita algunos recursos javascript en solo algunas paginas concretas. Por lo que tengo un archivo general que contiene los scripts que se usan "en todo el sitio" (177 KB) y por otro lado 5 archivos específicos (entre 3 y 9 KB por archivo).

¿Qual es mejor opción? Dejarlo así y dejar en caché esos 177 KB o combinar el "general" con los especificos y tener 5 archivos más grandes, pero hacer siempre una petición menos?

En el CSS del sitio tengo un poco la misma duda, estoy cargando MaterializeCSS (139 KB) y por otro lado otro archivo de 47 KB, ¿debería combinarlos en uno solo?

Muchas gracias. :)


¿Librería o plugin para animaciones JavaScript?

Tumàs Muntané@tumasmuntane

Hola a todos.

¿Alguien me sabria recomendar una librería o plugin JavaScript para hacer animaciones de entrada de los elementos de una pagina web?

No requiero mucha floritura, ya que no quiero convertir la página en un carnaval. Más bien algo resultón y ligero.

¡Muchas gracias!


¿Porque usar las variables css si trabajas también con sass?

Tumàs Muntané@tumasmuntane

Jonathan, bueno el título de mi pregunta creo que deja clara mi duda. No acabo de ver que ventaja tiene esto ahora mismo, a no ser que se quiera modificar con JS de forma global o algo así. ?Podrías explicarme el porque o que ventajas tienes con esto? Muchas gracias.


¿Paquete de íconos SVG como alternativa a los icon-fonts?

Tumàs Muntané@tumasmuntane

Hola Comunidad.

Estuve leyendo este artículo el cual me pareció muy interesante. ¿Pero el uso de los paquetes de íconos SVG son realmente una alternativa 100% viable al uso de las icon-font?

He creado mi paquete de íconos como se muestra en el artículo y siempre que se tenga que aplicar como elemento en HTML no hay problema. Pero veo que no es tan sencillo usarlo como pseudo-elementos. La mejor guia para aplicarlo como pseudo-elemento es la que he encontrado en este otro artículo. Pero de hacerlo de este modo tienes limitaciones tanto en el color como en el tamaño de los íconos.

Espero haberme explicado bien y que alguien me sepa orientar o ayudar Muchas gracias. :)