Iniciándome en el diseño web

Ephectx1 #1 Feb '13

Buenas, pues me gustaría meterme en el tema del diseño web ya que tengo en mente crear una web y apenas sé lo básico (html de nivel principante y manejo algo el Photoshop).

Para guiaros más o menos, mis conocimientos de CSS son prácticamente nulos y me gustaría crear una web algo compleja y gráficamente enriquecida, cuando digo algo compleja me refiero a usar sistema de registro de usuarios propio con panel y demás cosas relacionadas (php), estilos en las barras de carga (supongo que css) y poca cosa más.

Omitiendo esto, tengo algunas preguntas básicas que me gustaría que me ayudárais a resolver:

¿Cuál es la resolución estándar que usan las webs de hoy en día?

¿Sigue estando a la órden del día eso de usar Photoshop para crear menús/logos/cabeceras para luego añadirlas y retocarlas con CSS)

¿Qué webs sobre CSS me recomendáis que sean fáciles de entender? A poder ser en español ya que en inglés probablemente me liaría con la cantidad de conceptos y códigos

Lo mismo para PHP ¿qué web me recomendáis para meterme de lleno en ello?

He visto que hay algún que otro host gratuito, he mirado la lista que hay colgada en este subforo pero no me ha llamado la atención ninguno. Busco algo simple, algo espacioso, que tenga mysql y que te de a elegir donde poner los ads (soy muy quisquilloso con esas cosas). ¿Cuál me recomendáis?

Son unas preguntas muy básicas pero apenas se nada de este tema. Espero alguna respuesta y gracias de antemano

Ephectx1 #2 Feb '13

¿Alguna respuestilla? He decidido darle una oportunidad al DW, dicen que lo hace todo más fácil, qué me decís?

Merkury #3 Feb '13

#1 Como consejo huye de dreamweaver.

Si tus conocimientos son básicos lo primero que deberías hacer es trastear con HTML CSS3 y Javascript.

Si no tienes conocimientos de programación meterte con PHP del tirón, bueno... hay muchisimos recursos en la web para aprender.

Otra opción es que tires de algún CMS tipo joomla o wordpress y montes la página con eso.

1 respuesta

Nucklear #4 Feb '13 BugHunter

#1 Si no tienes ni idea de programar y quieres hacer tu la web tienes que empezar por la base. Lo primero es que controles lo básico HTML+CSS+JS esto para el frontend. Puedes hacer algún template para Wordpress o Blogger para practicar así ademas de aprender esos lenguajes verás como interactua el frontend con el backend en un sistema maduro.

Cuando ya domines eso, me pondría con algo mas serio para diseñar la parte lógica de la aplicación, como esto va a gustos no te voy a recomendar ningún lenguaje en concreto. Yo ahora uso python para lo que estoy haciendo pero busca lo que mas comodo te sea y trabaja con él.

Otro fallo muy común a la hora de empezar es intentar desarrollar algo muy complejo. Mi recomendación es que empieces haciendo cosas muy sencillas. Un sistema de login, un formulario de contacto, etc...para que vayas entendiendo el funcionamiento de la web.

En cuando a los IDEs yo uso Eclipse con PyDev + SublimeText2 para el frontend, pero esto también va a gusto.

1 respuesta

HeXaN #5 Feb '13

Empieza por http://www.codecademy.com (por ejemplo) y luego ya te harás esas preguntas.

1 respuesta

Ephectx1 #6 Feb '13

#3 Eso es lo que he oído, pero por dónde empiezo? cómo lo hago? No sé por donde coger esto

#4 Te explico, cuando usaba Dreamweaver y creaba una web me fijaba en el código y lo modificada ya que lo conocía y sabía donde había que meter mano, pero en lo referente a cuando el código de las páginas empieza: "<!DOCTYPE html (...)", seguido de un <body>" pues ya no sé que hacer, no sé hacer nada, como empezar esa parte ni como seguir. Supongo que DW me daba la base y yo la modificaba. Eso significa que me falta base, no?

¿Qué es exactamente frontend? Lo he buscado pero sigue sin quedarme claro con las explicaciones de Wikipedia

#5 Muchas gracias, le echaré un ojo a ver

1 respuesta

Nucklear #7 Feb '13 BugHunter

#6 Si, eso es totalmente falta de base, lo normal es escribir el código desde cero y sin usar plantillas. Si te pierdes al no usar una plantilla es que no tienes claro los conceptos.

Alguno me crucificará pero cuando hablo de frontend hablo de la parte visual que toca el usuario que sería lo escrito en HTML,CSS y JS a grandes rasgos y el backend sería la parte de negocio de la aplicación donde se interactua con la base de datos o se define el comportamiento de la aplicación.

#8 Hombre eso es relativo, el diseñador de frontend se dedica a programar el UI, pero que es programar al fin y al cabo. Un diseñador web te puede programar autenticas virguerías en JS y actualmente es algo que debe controlar bastante para el nivel de UI que tenemos.

Solo te daría la razón si entiendes por diseñador al que hace un mockup en PS y se lo pasa al programador.

2 respuestas

cabron #8 Feb '13 Judas

Dices que te quieres dedicar al diseño web, pero luego preguntas por php. Tienes que tener claro que para diseñar webs no tienes que saber php, ni nada de programar. Diseñar es hacer la parte visual, que la web sea bonita, que la usabilidad sea aceptable, etc, y programar es que la web tenga comportamiento (ej crear un nuevo tema en el foro, añadir una respuesta, etc)

Hay gente que se dedica a las dos cosas, y gente que solo a una, decide tú lo que quieres, pero si solo te interesa el diseño web, no te molestes en aprender nada que se se salga de html y css, si caso algo de javascript básico.

1 2 respuestas

Ephectx1 #9 Feb '13

#7 Entonces debería aprender lo básico, desde cero.

Qué clase de conocimientos debería saber para hacer una página web actual y en condiciones? HTML+PHP+CSS? Me cuesta moverme a través de esos conceptos, por eso pregunto.

¿El JavaScript se sigue usando a día de hoy? Tenía entendido que era muy "sucio" usarlo, pero yo no sé nada, vaya. xDD

Sigo sin pillar la parte del backend, la verdad es que no me he enterado muy bien de a que se dedica esa parte.

#8 Verás, me interesa diseñar, maquetar y programar una web ya que quiero aprender para empezar a crear una :\

A ver, para aclararme, para empezar a crear una web en Notepad++ por ejemplo, sería empezar por el tipo de documento (DOCTYPE), seguido de los "metas" y empezar a meter divs, menús y rollos, no? Supongo que no será así concretamente, pero por encima.

Lo que nunca he tenido claro es el tema del doctype, esa línea de código la escribe uno mismo?

Gracias por las respuestas!!

2 respuestas

cabron #10 Feb '13 Judas

#7

Obviamente me refiero a lo último que comentas, hay gente que se especializa en usabilidad y diseño, y no programa nada, ni siquiera los efectos en javascript, pero sin llegar al extremo donde el diseñador solo toca photoshop, HTML y CSS es muy sencillo, y es bastante factible que el diseñador maquete la web directamente, y el programador comience a partir de ahí, de hecho hasta te diría que html y css no debería ser trabajo del programador. Otra cosa es que como en todo hay gente que sepa de varios temas y abarque varias áreas, y haya gente que hace tanto el html como el css como el js y hasta la parte del servidor, eso ya es decisión de cada uno, en que se quiere meter y que no, pero es importante tener claro que son cosas diferentes, y que aprender html y css sin tocar ningún lenguaje es una opción totalmente aceptable si solo quieres diseñar.

#9

Lo primero, como te decía en el otro post, son cosas diferentes, nada te impide aprender las dos, hay gente que hace las dos cosas sin problemas, pero ya te aviso, que son muy diferentes, y es bastante probable que te des cuenta que alguna de ellas no te gusta, es bastante común que a los programadores no les guste ni se les de bien diseñar, y que a los diseñadores no les guste ni se les de bien programar, tu prueba, y si ves que por ejemplo programar no es lo tuyo, no pasa nada, es posible dedicarse a esto ocupándote solo de una parte, formando parte de un equipo donde otra gente hace la parte que a ti te falta, y al revés, tú haces la parte que otros no pueden.

2 respuestas

Nucklear #11 Feb '13 BugHunter

#9 Para aclararnos frontend sería HTML+CSS+JS y backend sería PHP,Java,Python, Ruby o lo que quieras usar a grandes rasgos.

Es una pena que esté en inglés pero hay un curso en Udacity.com de desarrollo web que empiezan desde muy muy basico hasta cosas avanzadas. Lo malo es que se ciñe a python+Google App Engine.

El esqueleto básico de una pagina html sería:

<!DOCTYPE html>
<html>
<head>
<title>Titulo de tu pagina</title>
<!--Aqui irian las llamadas a archivos externos y otras cosas-->
</head>
<body>
<!--Aqui iria el contenido de tu web-->
</body>
</html>

#10 En ese caso entonces si, yo suelo hacerlo todo yo para mis cosillas

1 respuesta

Ephectx1 #12 Feb '13

#10 Yo sé que puedo hacer ambas cosas, solo que necesito algo de base y ya lo demás espero que venga sólo.

#11 Vaya, muchas gracias, una cosa, en un documento .php se pueden (o deben) usar esas etiquetas? Es decir, un documento .php para añadir includes debería tener también esas etiquetas y añadir en el doctype el lenguaje PHP?

Hay alguna forma de que la etiqueta title no te muestre el texto en la web? Es que pretendo hacer un logo grande, pero supongo que eso ya es cosa del css, no?

3 respuestas

RaymaN #13 Feb '13 Sureño

#12 en serio, empieza desde lo más básico porque estás preguntando cosas sin sentido que aprenderías en una hora de lectura.

2 respuestas

Merkury #14 Feb '13

#12 Llevas un cacao elegante.

Lo de que lo demas venga solo yo en este mundillo no lo diría muy alto, aquí nada viene solo, todo hay que aprenderlo, estudiarlo, ponerlo en practica, etc.

De todas formas echale un ojo a esto que te clarificará bastante las cosas y deja de preguntar a destajo y ponte de 0.

1 respuesta

Nucklear #15 Feb '13 BugHunter

#12 Haz caso a #13 porque no tienes las cosas claras. Antes de ponerte a codear nada buscate una guia/tutorial/curso donde expliquen por partes todo.

1 respuesta

Ephectx1 #16 Feb '13

#13 #14 #15 Tenéis razón, perdonad, es que me frustra saber ciertos códigos y no poder aplicarlos, me salté mucha base, una última pregunta ya que acabo de leer por encima un par de cosas y ya me pondré desde 0.

¿Esto está bien hecho?

<!DOCTYPE html>
<html>
<head>
<title> Prueba Title </title>
<---Aquí van metas--->
<---Link a la hoja de estilos--->
</head>
<body>
<div id="logo"></div>
<div id="cuerpo"></div>
<div id="footer"></div>
</body>
</html>

Sé la diferencia entre ID y class y las "ID's" irían linkeadas a la hoja de css donde añadiría los estilos y demás, no? Perdón por molestar así xD

saludos y gracias!!!

1 respuesta

Nucklear #17 Feb '13 BugHunter

#16 id se usa como identificador único de un elemento y class se usa cuando vas a aplicar un estilo a varios elementos. Por ejemplo:


<!DOCTYPE html>
<html>
<head>
<title> Prueba Title </title>
<---Aquí van metas--->
<style>
body{loquesea}
h1{loquesea}
#logo{loquesea}
.text_box{este es el codigo a aplicar a todas tus cajas de texto con la misma class}
</style>
</head>
<body>
<div id="logo"></div>
<div id="cuerpo">
 <form>
   <input type="text" class="text_box" name="username" placeholder="Nombre de usuario">
   <input type="password" class="text_box" name="password" placeholder="Contrase&#241;a">
   <input type="submit" class="button">
 </form>
</div>
<div id="footer"></div>
</body>
</html>

1 respuesta

Ephectx1 #18 Feb '13

#17 Uhmm, eso si lo entiendo, me surgen dos dudas a raíz de eso:

¿No es mejor poner los estilos en una hoja aparte? Lo de #logo y .text_box
Al incluir elementos de php no deberías añadirlo al doctype? Creo que no, con cambiar la extensión basta, pero no lo sé seguro

Un saludo y gracias!

1 respuesta

Nucklear #19 Feb '13 BugHunter

#18 Por mantenimiento es mejor tener todo separado, pero eso es preferencia personal

En cuanto a lo de elementos php te refieres a incrustar php en el html. Ten en cuenta que una vez que incrustes php en tu html vas a necesitar de un servidor que interprete ese php por lo que tendrás que instalartelo en local (EasyPHP o WAMP).

El doctype es cosa de HTML y nada tiene que ver con PHP.

1 respuesta

Ephectx1 #20 Feb '13

#19 Entonces me tengo que instalar un servidor local de php? Cuando lo instale da igual con que navegador abra la web que funcionará, no? Nunca he instalado uno

He estado leyendo y trabajando en algo simple, la verdad es que me ha costado bastante pero te dejo el código:

<!DOCTYPE html>
<html>
<head>
<title> Prueba Title </title>
<//---Aquí van metas---//>
<//---Link a la hoja de estilos---//>
<style>
html{height:100%;}
body {height:100%; margin:0; padding:0;}
#contenedor {width: 960px; height:100%; margin:auto; padding: 0;}
#logo {width: 960px;}
#cuerpo {width: 700px; height:100%; float:left; background-image:url('bg_cuerpo.png');}
.text {font-family: Arial; color:#FFFFFF;}
#menu {width: 260px; height: 100%; float:left; background-image:url('bg_menu.png'); margin:50; padding:0;}
</style>
</head>
<body>
<div id="contenedor">
<div id="logo"><img src="logo.png"></img></div>
<div id="menu">MENU</div>
<div id="cuerpo"><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus arcu, sagittis sit amet commodo nec, ultrices sed sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce eu tortor erat, ut mollis ipsum. Duis et odio id tellus tristique suscipit. In condimentum egestas sem. Nullam rhoncus bibendum metus a interdum. Aliquam tellus nulla, tincidunt ac vehicula vitae, facilisis eget lectus. Nam rhoncus posuere consectetur. Maecenas sit amet nisi vitae mauris ultricies commodo at bibendum sapien. Cras dictum erat eget nisi iaculis posuere.</p></div>
<div id="footer"><img src="footer.png"></img></div>
</div>
</body>
</html>

No sé si estará mal hecho, he intentado hacer algo simple, una web centrada con cabecera, menú, cuerpo y footer. He hecho algunos apaños que no sé si serán los adecuados y que espero que me corrijáis y ayudéis.

No encontraba la forma de hacer que se estirara el menú ya que le puse un fondo y si no le añadías contenido, no se estiraba, he leido por ahí que poniendole altura del 100% a la etiqueta body y html se resolvía, y así ha sido, pero no sé si es incorrecto, cómo lo véis?
He "pegado" el div contenedor arriba y abajo para que no hubiera espacio, pero resulta que abajo no se ha pegado y estoy casi seguro de que es por añadirle altura del 100% al body/html, pero no encuentro otra forma de que el menú se estire sin añadirle contenido.
No he conseguido pegar el div del menú y cuerpo al del logo (hay un pequeño espacio blanco) y eso que he añadido margin's y padding's en todos lados, pero nada, véis algún error en el código?

No sé si estará hecho un desastre, he intentado hacerlo lo más ordenado posible para que se entendiera.

un saludo y gracias!!

1 respuesta

Merkury #21 Feb '13

#20 Como consejo, acostúmbrate a aplicar los CSS a través de clase y deja los IDs libres, esta bien que e lfooter sea ID y el header, pero por ejemplo el content no va a ser único (y puede que incluso el pie cambie depende de lo que estas haciendo) y tener un ID para dos elementos iguales es una mala practica, sobre todo si luego vas a agregar javascript o jquery.

1 respuesta

Ephectx1 #22 Feb '13

#21 Hmm, tienes razón, e intento empezar con clases pero luego veo que por ejemplo el header va a ser único, el menú... pues también, el footer no sé en que situación podría ser variable, podrías explicarme alguna? Y el cuerpo es lo único que necesitaría clases, pero claro, al añadir contenido yo añadiría más divs dentro del cuerpo, o quizás es añadir por añadir?

Respecto al código, salvo el exceso uso de ID's, lo ves limpio?

2 respuestas

Merkury #23 Feb '13

#22 No es lo normal que el header y el footer sean variables, pero puede darse el caso.

En el content puedes añadir divs, pero si ya tienes una clsae puedes aplicar herencia de estilos CSS (pero no te lies con esto ahora XD)

El código es un código HTML normal y corriente ni limpio ni sucio, yo antes me cortaría una mano que meter el <style> pero bueno XD.

lebroN #24 Feb '13 Cofrade

#22 Yo el <style> tampoco lo metería, veo mas limpio y sencillo hacerla en una hoja de estilo .css aparte, y enlazarla entre las etiquetas <head></head> del index.

Otra cosa es la tabulación. No sé si es así al insertar el código aquí en mediavida o lo tienes así, pero mi recomendacion sería que a los divs que estan dentro de etiquetas "madre" (las que los contienen), tengan siempre tabulación, más que nada porque te resultará mas fácil a la hora de encontrar las cosas.

Un saludo

FouNNdeR #25 Feb '13

Pregunto aquí para no abrir otro post del estilo porqué hay millones.

La situación es que quiero entrar más en javascript y tampoco se muy bien que pasos dar para mantenerme "motivado" y no tener la sensación de hacer gilipolleces. Se html y css "entiendo" el php y el js ya que trabajo con un programador web, pero le tengo que empezar ahorrarle trabajo de js. Por ahora solo me he atrevido con validaciones de formularios muy simples, pero necesito poder hacer más pijadas. ¿Qué pasos doy para tirar adelante? Sí, he hecho codeacademys y pijadas similares, de ahí a que tenga una base, no me suene a chino y pueda trabajar con él sin andar perdido, pero necesito quitarle horas ya que normalmente me encargo yo del tema de html css. Ideas?

1 respuesta

Merkury #26 Feb '13

#25 ¿Que es lo que vas a hacer con javascript?

¿Validaciones y efectos con jQuery? Para eso no hay que saber mucho, el resto la verdad que si tiras de jQuery o algún framework parecido es muy facil y hay toneladas de documentación.

FouNNdeR #27 Feb '13

#25 Así es. Pijadas con jQuery y digamos lo genérico para una web. Aún así si profundizo un poco no me parecería mal!

Qué me recomendáis para practicar? Más forms?

Iniciándome en el diseño web

Usuarios habituales

Tags