¿Hacer una web estéticamente muy buena se aprende?

borjahen · #1 (**permalink**) 13/10/2016, 08:23

Hola a todos.

Siempre que hago una página web no me quedo contento con el resultado, mi problema realmente es el diseño porque por la parte del back-end siempre me quedo satisfecho.

Uso siempre Bootstrap y quiero seguir con él porque creo que es muy bueno pero las páginas siempre se me quedan igual, supongo que porque siempre uso el mismo navbar y los otros componentes del framework.

Yo veo páginas como Paypal u otras que usan Bootstrap y no se parecen en nada a lo que es Bootstrap realmente.

Mi duda es si normalmente esas páginas web que usan el framework y no se parecen en nada son así porque quizás solamente descarguen el sistema de GRID y lo demás lo hacen ellos...

Por ejemplo Paypal tiene las clases btn de Bootstrap pero si no se ven iguales supongo que lo habrán modificado en una hoja de estilos ajena a la de Bootstrap lo cual me añade una pregunta y es que quería saber cuál es la mejor forma de tener Boostrap y luego una hoja de estilo que sea más importante que la del framework, es decir, está Bootstrap por defecto pero todo lo que edite de una hoja de estilos haga caso a la edición de mi hoja de estilos que a la de boostrap.

Un saludo, gracias de antemano.

manuparquegiralda · #2 (**permalink**) 13/10/2016, 19:09

¿Y donde ves tú que Paypal esté hecha con Bootstrap? Nunca he usado Bootstrap pero imagino que será como todos los frameworks estos, ellos te ofrecen unas plantillas básicas y obviamente el resto lo tienes que ir creando tú.

A ver si quieres diseños personalizados lo mejor es que lo hagas tu mismo al fin y al cabo esto es lo que menos trabajo cuesta de hacer una web, ¿no?

borjahen · #3 (**permalink**) 14/10/2016, 05:23

Gracias por responder.

Creo que usa Bootstrap por las clases que usa y porque tengo una extensión en Chrome que suele escanear una web y te muestra los scripts que usa, los frameworks, etc. Pero el caso de este tema no es Paypal, si no en general las páginas que usan Bootstrap y no se parecen en nada a sus componentes.

También tenía la duda de si esas páginas que usan Bootstrap (confirmadas) no se parecen en sus componentes, será solamente porque descargan el GRID solamente y ya ellos hacen su propio estilo de la página.

Y para finalizar la pregunta sobre la hoja de estilo. Puedo tener la hoja de estilo de Bootstrap puesta y luego una hoja de estilo personal mia donde edite todo lo que quiera de los botones de Bootstrap, navbar, etc. Lo he intentado pero a veces no me deja editar algo porque ya está modificado en la de Bootstrap.

Un saludo.

manuparquegiralda · #4 (**permalink**) 14/10/2016, 10:14

Por supuesto que puedes editar tu propia hoja de estilos, si tu pones una hoja de estilos propias detrás de la de Bootstrap te cogerá tus propios estilos CSS.

Solo tienes que modificarlos correctamente teniendo en cuenta como aplique Bootstrap las clases CSS, por ejemplo si Bootstrap:

Código CSS:

Ver original/* ESTILOS BOOTSRAP */
.body .container {
   .position: relative;
   .color: #333333;
   /*... resto de estilos */
}

Código HTML:

Ver original<body>
    <div class="container">
        División contenedora
    </div>
</body>

A ti no te vladrá con esto:

Código CSS:

Ver original/* ESTILOS BOOTSRAP */
.body > .container {
   .position: relative;
   .color: #333333;
   /*... resto de estilos */
}
 
/* ESTILOS PROPIOS */
.mi-estilo {
   .color: #FF0000;
}

Código HTML:

Ver original<body>
    <div class="container mi-estilo">
        División contenedora
    </div>
</body>

En este caso, aunque la clase mi-estilo esté debajo de los estilos de Bootstrap el navegador no te la tendrá en cuenta ya que prevalece la clase de estilos anidada .body > .container. Tendría que quedar tu CSS así:

Código CSS:

Ver original/* ESTILOS BOOTSRAP */
.body > .container {
   .position: relative;
   .color: #333333;
   /*... resto de estilos */
}
 
/* ESTILOS PROPIOS */
.body > .mi-estilo {
   .color: #FF0000;
}

hmedcab · #5 (**permalink**) 14/10/2016, 11:18

¿Cuál es la pregunta?

¿Aprender a hacer un framework front-end o discernir qué webs usan un framework concreto y cómo lo usan?

Centraros.
---

Mira, sé por donde vas y te voy a dar un consejo que no seguirás. Y dentro de unos años caerás en la cuenta de que un colgado te dijo en un foro y que tenía razón.

Desarrollar un framework ya sea un back-end o un front-end siendo un desarrollador final de páginas web es un error muy grave. Y por varios motivos:

1 - Conocimientos necesarios.

Tienes que ser un genio para lograr algo similar en calidad y eficiencia. Imagina que un equipo de x personas (que pueden ser 100 fácilmente) trabajan durante años para sacar a la luz cosas como esas. Trabajan en empresas especializadas que desarrollan ese tipo de software.

¿De verdad crees que puedes construir un ferrari a golpe de martillo en un garage?

2. Tiempo empleado.

Supongamos que eres un genio y tienes los conocimientos suficientes. ¿Cuánto tiempo te llevaría realizar todo el desarrollo, las pruebas y la puesta en producción del material?

En la escuela está bien ser ineficiente. Pero en la vida real el tiempo es muy importante, porque a menos tiempo más dinero gana tu jefe. Y créeme que te apretarán.

¿Crees que puedes competir con las cadenas de montaje de un centro de automoción?

3 - Documentación y actualización.

Tendrás que documentarlo bien para saber cómo usarlo. Todo tiene que estar minuciosamente explicado para que tú y el que venga detrás de ti cuando te despidan o asciendas pueda seguir trabajando con la herramienta.

Podría decir más inconvenientes pero creo que estos son los más importantes y clasificadores.

Por eso te digo que no vale la pena hacer tan personalizado un sitio, además que el usuario no lo agradece. El va a por el contenido, no a por la 'forma' (Aunque evidentemente es muy importante la forma, pero el contenido prevalece) Imagina este foro... es una mierda. ¿Pero a que sigues viniendo? Pues eso.

Descárgate un framework back-end para algo muy personalizado (para otras cosas usa un CMS que s lo que quieren las empresas) y un front-end guapo (framework bootstrap, materialize, fundation) y ve trabajando con ello.

Esto no quita que puedas añadir o modificar una pequeñísima parte del framework con una clase personalizada. Pero una vez más pregúntate... ¿para qué?

El cliente lo que quiere es algo moderno, bonito, fácil de manejar (CMS) y sobretodo LE QUE FUNCIONE (es decir que cubra sus necesidades).

Espero que te hay servido de algo esto.

Un saludo.

borjahen · #6 (**permalink**) 14/10/2016, 19:06

Muchas gracias manu. Aunque me quedaron dudas, lo que entendi es que si por ejemplo el fondo del navnar es

.navbar .loquesea {...

background blue

No puedo en mi hoja de estilos y poner solamente

.loquesea {

background: purple

para editar esa clase

Respecto a lo de hacer un framework no me referia a eso hdmed. Simplemente queria saber la forma eficiente de usar Bootstrap pero que parezca que no lo uso porque cada vez que hago una web con el me salen siempre iguales y es logico porque siempre es el navbar, etc....

Gracias!

Franchesquini · #7 (**permalink**) 20/10/2016, 07:58

Lo que vos querés saber es porqué hay cientos de sitios que usan Bootstrap y no se parecen a las plantillas básicas de Bootstrap, ¿no?

Bueno, es sencillo: usá las clases de Bootstrap que te sirven y hacé tu propio CSS para dar el estilo que vos quieras.
Y en el CSS de Bootstrap vos podés editar los estilos.

Es cuestión de jugar un poco.