Programadores. El hilo de los hinformáticos profesionales como PABLOPL.

¿Se pueden hacer cucamonas visuales en Javascript? Quiero decir, elementos que se mueven y transforman al pasar el puntero sobre ellos y cosas así. Sé que hay ciertas cosas que se pueden hacer con CSS pero no sé si Javascript ofrece posibilidades en ese aspecto.
...

Tu sitio es este : https://threejs.org/

mira la sección de ejemplos : https://threejs.org/examples/

Lo bueno es que puedes ver el fuente y ponerte a toquetear cosas a lo loco y ver que sale, por ejemplo el núcleo de este efecto :

https://threejs.org/examples/#css3d_periodictable

Son menos de 300 lineas de codigo.
 
Última edición:
Tu sitio es este : https://threejs.org/

mira la sección de ejemplos : https://threejs.org/examples/

Lo bueno es que puedes ver el fuente y ponerte a toquetear cosas a lo loco y ver que sale, por ejemplo el núcleo de este efecto :

https://threejs.org/examples/#css3d_periodictable

Son menos de 300 lineas de codigo.

La puta hostia, que pasote. Me lo guardo aunque el código que tienen que llevar algunos de los ejemplos que he visto debe ser demencial.
 
La puta hostia, que pasote. Me lo guardo aunque el código que tienen que llevar algunos de los ejemplos que he visto debe ser demencial.

"Los grandes artistas copian, los genios roban." Pablo Picasso.

Fusila todo lo que te guste y úsalo sin miedo. Pon al autor original en un comentario del código si quieres ser un tío legal y punto. Disponer de ejemplos así, aunque sólo sea para copiarlos, es una cosa que los jóvenes de hoy en día no valoráis lo suficiente. </cebolleta>
 
Última edición:
Tomo nota. Robar es bueno.


Me he puesto con mi paja mental en un rato que he tenido libre. La primera vez que escribo algo de HTML y CSS en un par de años al menos. me ha costado dios y ayuda. Que puto lío. Por aquí van los tiros:



La idea es que el cuadro verde se separe en cuatro cuadros al pinchar sobre él, o bien habrá que sustituir el cuadro por un bloque de cuatro cuadros pequeños juntos. El resultado visual es el mismo, solo que me parece que la primera opción no se puede llevar a cabo y la segunda si. El cuadro rosa en principio es decorativo.


Nota: el puntero del ratón no aparece en el gif, estaba haciendo el bobo con él. Y se ve mas fluido en realidad.
 
LeChuck, yo que tampoco domino nada de programación web, para alguna cosa rápida que he tenido que hacer me recomendaron https://getbootstrap.com

Un framework muy sencillo de usar que te permite dedicarte más al diseño y entre otras cosas, él se encarga de hacerlo multidispositivo.
 
Tomo nota. Robar es bueno.


Me he puesto con mi paja mental en un rato que he tenido libre. La primera vez que escribo algo de HTML y CSS en un par de años al menos. me ha costado dios y ayuda. Que puto lío. Por aquí van los tiros:



La idea es que el cuadro verde se separe en cuatro cuadros al pinchar sobre él, o bien habrá que sustituir el cuadro por un bloque de cuatro cuadros pequeños juntos. El resultado visual es el mismo, solo que me parece que la primera opción no se puede llevar a cabo y la segunda si. El cuadro rosa en principio es decorativo.


Nota: el puntero del ratón no aparece en el gif, estaba haciendo el bobo con él. Y se ve mas fluido en realidad.


Tienes efectos muy parecidos ya hechos que con toquetearlos un poco tienes lo que quieres :

https://codepen.io/MathiasPaumgarten/pen/ydipI
 
LeChuck, yo que tampoco domino nada de programación web, para alguna cosa rápida que he tenido que hacer me recomendaron https://getbootstrap.com

Un framework muy sencillo de usar que te permite dedicarte más al diseño y entre otras cosas, él se encarga de hacerlo multidispositivo.

Pero es que precisamente alguien con el talento de LeChuck le sacará un partido enorme a aprender HTML5 y CSS3 desde cero porque podrá aplicar todo su potencial creativo sin limitaciones. Los frameworks están bien cuando necesitas hacer cosas que funcionen y rápido, o para nulidades en frontend como yo.
 
LeChuck, yo que tampoco domino nada de programación web, para alguna cosa rápida que he tenido que hacer me recomendaron https://getbootstrap.com

Un framework muy sencillo de usar que te permite dedicarte más al diseño y entre otras cosas, él se encarga de hacerlo multidispositivo.

Bootstrap es un framework para maquetación, esta de pm y es bueno pero no es para hacer efectos, es más bien para controles, posicionamiento y demás :

https://getbootstrap.com/components/
 
Última edición:
Este tracker está considerado como uno de los mejores relacionado con el diseño gráfico, mucho material, programas, tutoriales y demás. Dejo link aprovechando que han abierto registros, por si le interesa a alguno.


https://gfxpeers.net/
 
Tomo nota. Robar es bueno.


Me he puesto con mi paja mental en un rato que he tenido libre. La primera vez que escribo algo de HTML y CSS en un par de años al menos. me ha costado dios y ayuda. Que puto lío. Por aquí van los tiros:



La idea es que el cuadro verde se separe en cuatro cuadros al pinchar sobre él, o bien habrá que sustituir el cuadro por un bloque de cuatro cuadros pequeños juntos. El resultado visual es el mismo, solo que me parece que la primera opción no se puede llevar a cabo y la segunda si. El cuadro rosa en principio es decorativo.


Nota: el puntero del ratón no aparece en el gif, estaba haciendo el bobo con él. Y se ve mas fluido en realidad.

Pero esto lo quieres hacer únicamente por jugar, ¿no? Porque como ejercicio será muy interesante, pero espero que no estés pensando en poner mierdas animadas en una web.
 
Pero esto lo quieres hacer únicamente por jugar, ¿no? Porque como ejercicio será muy interesante, pero espero que no estés pensando en poner mierdas animadas en una web.

¿Pues? No sé si lo dices por posibles problemas con incompatibilidades con navegadores o porque pueda quedar muy cursi. Lo que pretendo hacer es minimalista y no pasa de lo que ya he enseñado. Al pinchar en el rombo este se divide en cuatro categorías que son links a galerías.

Hoy he estado trasteando otro rato. Ha quedado igual que el gif, pero he cambiado el cuadro verde por una tabla con cuatro cuadros verdes. El siguiente paso era animarlos para que al pinchar sobre la tabla los cuadros se expandiesen, pero no va por ahora, algo falla con la función "transform: scale", tal vez no puedan aplicar animaciones a tablas, sin embargo la función de rotar si que le funciona. Algo se me escapa, pero no tengo prisa, solo me ha entrado la perra.


edito: gracias a todos por las webs
 
Última edición por un moderador:
Hace quince años que esas cosas pasaron de guays a horteras en la web. No es únicamente una cuestión de moda, que también, sino de usabilidad. Sin entrar en temas de accesibilidad para discapacitados, que al final no saldrán de la web de la ONCE, yo si hay cuatro opciones quiero verlas desde el principio para dirigir el puntero a la que me interese, sin tener que pasar por otro lado ni esperar a que se desplieguen. Otra cosa es que haya tantas opciones que no quepan y haya que agruparlas en menús. Pero en una pantalla vacía no tiene ningún sentido. Es como si en un coche se pone un mecanismo que rota la puerta y la eleva por encima del techo para acabar plegándola sobre el maletero. Oh, qué impresionante, pero a la que pierdes dos veces un minuto para entrar o salir del vehículo te cagas en la puta madre del diseñador.

Afortunadamente, ya casi no se ven webs con presentaciones de entrada y un enlacito de SKIP INTRO. La de dinero que se habrán gastado las empresas de todo el mundo en animaciones que nadie miraba más que los segundos necesarios para encontrar el SKIP INTRO.

Recuerdo por cierto que hace más de diez años en el Putas uno mostró interés por montar un puticlub y pidió ideas, y uno le dijo que la web podía tener versión HTML opcionalmente pero la versión Flash era imprescindible. Oh, sí, cómo molaba no poder utilizar el teclado para moverse por las secciones o las URL para acceder a los recursos concretos, tener que ver textos moviéndose por la pantalla y que colasen música ambiente. Putero tenía que ser.
 
Sin entrar en temas de accesibilidad para discapacitados, que al final no saldrán de la web de la ONCE

Por temas de SEO las webs suelen tener cosas de accesibilidad para gente con discapacidad visual ya que Google te valora a la hora de posicionar que las etiquetas <img> tengan el atributo alt. Otra cosa es que la mayoría de la gente haga un <img src="foto3.jpg" alt="foto3"> y se quede tan ancho. Luego un ciego está leyendo la web y se acuerda de la familia del webmaster.
 
¿Pues? No sé si lo dices por posibles problemas con incompatibilidades con navegadores o porque pueda quedar muy cursi. Lo que pretendo hacer es minimalista y no pasa de lo que ya he enseñado. Al pinchar en el rombo este se divide en cuatro categorías que son links a galerías.

Ni caso a Pastanaga :

- Tu lo estás haciendo por divertirte, cuantos más efectos metas mejor

- Su visión de "Hace quince años que esas cosas pasaron de guays a horteras en la web" es erronea y no tiene en cuenta el tipo de página, no es lo mismo una corporativa que un curriculo o un lanzamiento de producto, o un branding, etc.

- Parece no entender que un creativo puede hacer esas polladas en una web y muchas más y quedar usable y navegable (lo que los hipsters llaman ahora experto en UX)

- Ejemplos de esas páginas "que se llevaban hace quince años", algunos ganadores de diferentes premios en 2016 :
- https://www.space-advisor.ca/fr/
- https://minglabs.com/en/work
- https://discoveroutpost.com/
- https://www.pellmell.fr/
- https://www.offfitalia.com/
Puedes buscar más casi siempre encontrarás que en todos los premios que se organizan los mejores suelen ser idas de pinza, preciosas y muy efectistas (y si son realmente buenos muy navegables).

Personalmente (solo como orientación) he seleccionado muchos (pero muchos) diseñadores/maquetadores, y si a igual gusto viene alguien con un portfolio de páginas como las que él te dice y no tiene ni una de lo que nosotros llamamos un "lab" (lo que tu estás haciendo) y el otro sí, ya sabes quien se queda.

Y para rematar un tío con tu creatividad NO debe estar haciendo paginas como las que el te dice es un desperdicio, para eso metete a hacer otra cosa porque te va a consumir. :lol:
 
Luego un ciego está leyendo la web

wat?

Yo también quiero aprender a programar, pero empezaré cuando tenga tiempo. Bueno, soy funcionario, puedo empezar ahora mismo. Voy a leer más atrás a ver que recomendasteis finalmente y por unanimidad, porque menudos hijos de puta, anda que no habéis recomendado cosas para empezar.

if rendder=Me voy a matar then penis.
 

Hay formas de adaptar una web a braile pero para hacerlo correctamente la web tiene que estar bien escrita. Si no el ciego tiene la sensación de estar leyendo a Liachu.

if rendder=Me voy a matar then penis.

Este es un error muy común de novato, confundir el operador de asignación con el de equivalencia. Si quieres asignar un valor a una variable utilizas un solo signo de "=", por ejemplo si quieres decir que X vale 5 escribes:

x=5

Y así le asignas el valor. Si quieres poner una condición para que suceda algo tienes que usar un doble signo, algo así como lo que puso Black Adder en la página anterior:

if (jugador=="Black Adder") cout << "ha ganado Black Adder" << endl;
 
Este es un error muy común de novato, confundir el operador de asignación con el de equivalencia. Si quieres asignar un valor a una variable utilizas un solo signo de "=", por ejemplo si quieres decir que X vale 5 escribes:

x=5

Y así le asignas el valor. Si quieres poner una condición para que suceda algo tienes que usar un doble signo, algo así como lo que puso Black Adder en la página anterior:

if (jugador=="Black Adder") cout << "ha ganado Black Adder" << endl;

Lo del operador de equivalencia "==" es en C++ (entre otros) cosa que él obviamente no está usando porque ha puesto un "then". :lol:
 
Lo del operador de equivalencia "==" es en C++ (entre otros) cosa que él obviamente no está usando porque ha puesto un "then". :lol:

Ya lo he visto, así a pelo en la misma línea y sin separarlo de ninguna manera del resto de cosas. He preferido no decir nada para que no se termine de matar.
 
Me alegra que saquéis el tema de la usabilidad.

SEO y ciegos al margen, parece que se tiene muy poco en cuenta que hoy día, con las pantallacas que gasta la gente, es muy probable que uno las visione desde una distancia considerable y utilice la ampliación de fuente del navegador o alguno de sus addons con el mismo fin.

Es pasar al 150% y poquísimas webs resisten. La maquetación se va a la mierda porque el responsive es algo más que filtrar por dispositivo.

Y estoy de acuerdo en que en una página personal o donde uno quiere mostrar sus habilidades, toda idea rocambolesca es buena. Lo que uno debería evitar es ser ese diseñador que presenta la "plantilla de currículum europeo". Eso sí que es para matarlos a todos cortándoles las venas con el propio papel.
 
Post de respuesta a todos y a ninguno. Payos, la web en ningún momento la he ideado (idear, porque llevarla a cabo y finalizarla será dentro de meses si es que me apetece) para que la visite absolutamente nadie. En mi CV se especifican mis conocimientos y habilidades y en mi caso concreto una web con unas galerías de imágenes es necesaria. La web mostrará que sé algo de diseño web, y el contenido de la misma mostrará que sé de diseño gráfico. En mi CV estará la URL junto con mis datos de contacto y solo me interesa que la visite la persona que lo reciba. De hecho la web tiene el mismo diseño que el CV, esta planeada como una extensión de este.

No hay nada de barroquismo web de hace 15 años aquí. Son dos clics para acceder a alguna de las cuatro galerías, exactamente igual que si yo ahora quiero ir a alguno de los links organizados en carpetas que tengo en el navegador, un clic para abrir la carpeta, otro clic en el link. Un segundo perdido. Lo mismo con otro aspecto.
 
Última edición por un moderador:
Lechuck, échale un vistazo a jQuery. Tiene muchas funciones nativas para hacer exactamente lo que tú quieres.
 
Vale, pero cuando llegue a eso. Este libro que me compré tiene 600 hojas.


Me voy a matar.



Nah, esta bien.
 
Arriba Pie