Página web: Empezar desde 0

Deoxys

Con lo de juventud en red, me he animado a pedir un dominio para empezar a enredar con esto del diseño web. He estado mirando tutoriales y vídeos, y me he fijado en que la gente hace un "boceto" de la página en photoshop antes de empezar.

Es algo que no entiendo, es decir, si hago algo que se parezca a una web con el photoshop, ¿Puedo pasarlo luego a html u otro formato web? Si no, entonces para que se hace la página en PS primero?

Otra cosa que me ha llamado la atención es que ultimamente se usa flash en todo. Suponiendo que tengo mi idea de web clara (mas o menos la tengo), en qué ocasiones debo usar flash, javascript y demas? he estado enredando con algo de HTML, pero en seguida me he dado cuenta de que se me queda corto a no ser que quiera hacer una web de hace 10 años.

Siento la molestia, pero lo del photoshop es algo que quiero saber, me pica mucho la curiosidad y no he encontrado nada comprensible en ningun lado :/

banga

Pues supongo que si empiezan con photoshop es porque luego lo pasan a dreamweaver. Aunque yo estoy más perdido que tú en esto... suerte con la web.

richmonde

La verdad es que lo de Photoshop para hacer una web, no tengo ni idea del porqué.

Quizás desde el punto de vista del diseñador, le va de perlas para así después tener una idea de como hacer los css.

Sin embargo, como comentabas antes, sobre JavaScript, Flash y demás... depende que tipo de web quieras hacer.

Como informático, te diría que cuanto más Flash peor, ya que todo el contenido que pongas en la aplicación Flash no será barrida por los buscadores, y eso quiere decir menos ranking en el pagerank de los buscadores, ya que no pueden "leer" la información contenida dentro. Por otro lado, para hacer aplicaciones con Flash, asumo que te mueves un mínimo con ActionScript.

JavaScript es bueno para según que, pero para otras cosas es una mierda. Una página no la harás integramente en JavaScript, y por ende, si la programas con PHP, no tiene sentido usar JS ya que lo que hace JS, lo puedes programar con PHP.

Después, está el tipo de página que quieres hacer. Si es una página propia para poner chorradas tuyas, o lo que sea, piensa con que lenguaje lo harás, y en el caso de elegir uno, mira que el servidor donde subirás dicha página/s la interprete. (P. ejemplo: No la hagas con JSP's y Servlets de Java si el server no tiene JRE y JVM, ni tampoco puede usar Apache Tomcat)

Depende de unos cuantos factores... :P

Ahora, que si quieres hacerla con HTML plano, y que no sea una página dinámica, no te mates y hazla en HTML con algún estilo web por ahi XD

No se si ha sido de ayuda, o más dudas todavía :P

Suerte!

Deoxys

mas dudas seguro que tengo, teniendo en cuenta que no tengo ni idea de nada y que todo lo que se de HTML lo he aprendido esta tarde.

Mas o menos tengo la idea de lo que quiero, pero no sé cómo hacerlo. Lo que haría sería buscar en google cada parte a hacer e ir enredando en el codigo hasta que saliera lo que yo quiero (es lo que he hecho hasta ahora), pero es que no se ni como coño se llama cada cosa.

Supongo que lo primero que haré será pasar el blog de blogger a mi dominio y a partir de ahi ir poniendo... no lo se, voy a mirar en google algunas cosas y cuando sepa algo más pregunto aqui xDDDDDD

LzO

http://www.youtube.com/watch?v=So3TTNYYKVs
http://www.youtube.com/watch?v=qwaaqVsXINM

Así por encima para que entiendas.

Más manuales y tutos: http://www.google.es/#hl=es&source=hp&q=crear+web+con+photoshop+y+dreamweaver&meta=&aq=3&oq=crear+web+con+photos&fp=cd373de720a5339

egrojcire

si no sabes utiliza dreamwaver, de todas formas te puedo pasar algunos apuntos de clase sobre html(para el texto de l pagina) y css(el esstilo, colores y demás) y con ellos algunos ejercicios mas o menos "exos".....XD

mandame un privado si los necesitas ;)

Soltrac

#3 Vaya cacao mental dios mío...y tú eres informático....

Corregirte varias cosas.

ya que todo el contenido que pongas en la aplicación Flash no será barrida por los buscadores: Google hoy en día es capaz de indexar cierto contenido en flash

si la programas con PHP, no tiene sentido usar JS ya que lo que hace JS, lo puedes programar con PHP: Comparar JavaScript con PHP es indescriptible. Con JavaScript, q no es un lenguaje de programación, todo lo haces en el lado del cliente por lo q si no necesitas llamar al servidor para realizar algo es absurdo hacerlo en PHP. Sin contar casos es q es absolutamente necesario como AJAX.

Crawler

Por partes, para empezar y no liarte demasiado:

1) Si, es recomendable tener el diseño ya hecho en photoshop, o similares. De ahi puedes exportar lo necesario para montarte la web (imágenes, se entiende)

2) Flash es todo un mundo, al principio te va a dar mas quebraderos de cabeza que soluciones, a menos que busques tener una web que parezca un powerpoint.

Empieza con html+css, si luego quieres añadirle algún efecto, transición... etc, prueba con algún framework sencillito de javascript, como pueda ser jquery.

Si no tienes interés en ponerte a aprender código/programación desde el principio, por que quieres ver resultados pronto, puedes utilizar algun editor WYSIWYG (traducido: "lo que ves es lo que obtienes" ) que tu vas colocando las cosas "visualmente" en el documento, y el programa ya le mete el codigo necesario.

A la larga, es peor solución, el codigo es peor, encontrarás incompatibilidades, cosas que no se pueden hacer desde una interfaz gráfica... pero para tener resultados rápido, todos hemos empezado por ahi.

CP

El diseño en photoshop sirve para tener una idea clara de lo que quieres hacer y no tener que andar cambiando las cosas una vez estes metido con el html, de esta forma puedes dar mil vueltas a la pagina web que quieres y una vez quedes contento con lo que has hecho ya tengas algo con lo que guiarte. Es mas cuando lleves unos cuantos al final lo que has hecho con photoshop sera lo que maquetes en html.Incluso es recomendable antes de ponerse con el photoshop cogerse unos folios y un lapiz y empezar ahi el diseño.

Sobre flash ultimamente se viene hablando que va a desaparecer, cada vez se usa menos y cada vez se puede hacer mas cosas con javascrip, ajax que dan muy buen resultado y no tiene los inconvenientes de flash.

Asique si realmente quieres empezar de cero, html, css, algo de javascrip y php (aunque si no vas a tratar datos olvidate de momento).

Deoxys

okok, entonces primero haré el diseño en PS y ñuego intentaré exportarlo a dreamweaver... a ver que sale :D

Slipk

http://www.artisteer.com/?p=demo

Yo los diseños les hago con ese programa, luego ya añades lo que quieras. Es como un word pero para paginas web.

richmonde

#7 Yo solo le comentaba eso así, por el hecho de partir de 0, meterse con JS es un poco locura, ya ni pensar PHP o JSP + Servlets.

No voy a negarte de que JS entiendo mas bien poco :D 4 cosillas con AJAX y poco más.

Yo soy mas de JSP y Servlets de Java :(

De todas formas, gracias por la corrección, algo más que se aprende :) Y ahora me entero que Google barre ciertos flash xDDD

Deoxys, como te han comentado por arriba, puedes empezar con el Dreamweber, eso si... no mires el codigo fuente, que lo llena de mierda xDDDDDDD

Kartalon

#12 JavaScript no tiene nada que ver con Java (y por ende con JSP. He ahí el origen de tu confusión, creo :p

JavaScript es un lenguaje de scripting interpretado, por tanto, por el navegador. JSP (si no me equivoco, que en esto ya ando menos puesto) es una tecnología para generar contenido dinámico HTML con Java, esto sí es análogo a PHP o ASP.

Resumiendo, confusión común que hay que intentar evitar y que puede ser el origen de tu error, JavaScript no tiene NADA que ver con Java.

C

#1, estoy como tú. Pero quizás con algo más de ventaja.

Tengo 30 años y soy programador desde hace 10 años (bueno, desde que tengo 8 años que empecé realmente...).
Pero siempre he desarrollado aplicaciones escritorio. En temas de SQL le meo a cualquiera, hablando en plata xDDD. Y del conocimiento y uso de la API de Windows, desarrollo de componentes ActiveX en VB6 y C++, etc. idem.

Pero del tema web.... en fin, me ha dado alergia constantemente. Hice varios intentos estos años por aprender html, me bajé manuales e instalé dreamweaver y derivados... pero nada...

Sin embargo, tengo un proyecto en mente muy muy bueno y un colega que hace muy buenas páginas web se ha animado. Y claro, se supone que yo hago toda la programación. Pero por mucho dominio de SQL que tenga, el tema es bastante farragoso si no dominas el tema. Es decir, saber lo que es una hoja de estilo, conocer php (es en el qme voy a centrar) y ahora la filosofía de desarrollo con ajax (que gusto no tener que recargar la página!!!) con ayuda de qjuery.

Te recomiendo esta web. Empieza por el manual xhtml. Es lo más claro que he visto:
http://librosweb.es/

Suerte!

LzO

#14 muy buena web, gracias

B

Que tendrá que ver diseño web con la programación del sitio.... mania de mezclar las cosas

yusukorz

Si te quieres meter en PHP, tienes los frameworks, que te ayudarán a la hora de meterte en ese mundillo.

En cuanto al diseño, yo soy muy negado en ese aspecto (tema photoshop y tal) xD, la estructura de la web la hago con xhtml + css, no uso imágenes.

Tema tutoriales, si sabes inglés, no necesitas un gran nivel, puede servirte w3schools.com.

Deoxys

#14 gracias por la página :)

mOrK2

Yo lo hago para saber exactamente que y como lo voy a hacer.

NeB1

Como le rallais pobre hombre, si todos sabemos que va a hacer una web con html a pelo, que es su primera vez.

Pero por cierto, todo contenido de flash se puede indexar con las arañas de los buscadores. Simplemente tienes que hacer que el flash recoga los datos de diversos archivos xml, y para insertar el flash hagas.

<script>
   EL CODIGO Q TE DÁ ADOBE PARA INSERTAR FLASH
</script>
</noscript>
  WEB PALERA (o no tan palera, depende de cuanto te pagen xDD) HECHA SIN FLASH QUE TAMBIÉN LEE DESDE LOS XML
</noscript>

bueno, hay más métodos para esto.

Despues en cuanto a lo del JS, no sé, sin sentido. Puedes hacer toda una web mediante Ajax porque te lo piden, y además que esa web funcione sin javascript también (de hecho, es lo que hay que hacer), y realmente ahí el PHP no influye en nada, es más, el php casi obligatorio para recibir las llamadas Ajax.

<script>
//con jquery
$(".llamadaAjax").click(function(event){
event.preventDefault();
$.post("./seccionXdelaweb.php",{"llamadaAjax":"true"},function(data){
   $("#contenido-principal").html(data);
});
});
</script>
<a href="./seccionXdelaweb.php" class="llamadaAjax">Ir a seccion X</a>

así un poco a ojo.

si, todo para decir que tengo ordenador.

Deoxys

#20 lol, no he entendido nada, que liada con lo del flash y demas.

Estoy haciendo la web en papel (ya lo tengo casi terminado) y el flash no creo que lo toque, porque no es necesario (creo que para menus desplegables y demas no se necesita). Cuando lo acabe y me funcione el escaner lo subo aqui, a ver que os parece (aunque si, es algo bastante simple)

lo del PS... la he intentado hacer ahi, pero no se ni por donde cogerlo, ni por asomo va a quedar como yo quiero ><

iroNBiN

Una buena web para mirar tutoriales y vídeo tutoriales: http://desarrolloweb.com/ (Personalmente al ser Canario me parece que la persona que hace los vídeo tutoriales "sesea" demasiado y me distrae).

A dia de hoy estoy cursando Diseño Web y básicamente estoy tocando DreamWeaver pero mucha gente me dice que es mejor hacer el código a mano y no con este programa. ¿Que opináis?

9 días después
Crawler

opino que si, mejor que escribas tu propio código a dejar que te lo genere cualquier programa.
Ahora, puedes usar dreamweaver en vista "código" y con un par de plugins se parece a un editor "decente".

Recomiendo notepad++, que vale "para todo"; intype, que aunque aun son betas, es bastante rápido para segun que cosas, y ahora quiero probar algun editor con el plugin "zen coding", probablemente lo pruebe con aptana, a ver que tal.

Todos los programas que te he dicho son gratuitos, y los uso para trabajar casi a diario (eclipse si que lo uso a diario y no te lo recomendaría de tan buen gusto :P )

LzO

Esto es lo que buscas, claro y eficiente, un tuto en 10 capitulos con fotos y paso por paso de como diseñar y maquetar con photoshop

http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-1/217/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-2/218/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-3/222/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-4/223/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-5/227/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-6/228/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-7/232/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-8/235/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-9/244/
http://www.solophotoshop.com/tutorial/diseno-y-maquetado-de-plantillas-web-10/246/

en esa misma web hay algun que otro tuto mas

LzO

Traigo novedades, aquí os dejo un super mega tutorial de como pasar un diseño de photoshop a CSS y este a template de wordpress, muy muy bueno

http://www.hv-designs.co.uk/tutorials/mywordpress_pt3/tutorial_PDF.zip

la web de este pavo ni parece que sea wordpress... yo es que ya toy cansado de los themes q hay por ahi y de los q puedes crear con artisteer, muy simplonen y ninguno se adapta a mis necesidades y mas yo q tengo una porno

a currar

LzO

Otro tuto, en este caso videotutorial en español de una latinoamericana de como maquetar un diseño psd a css/html y pasarlo a wordpress

Por orden:

http://www.vimeo.com/6509085
http://www.vimeo.com/6566957
http://www.vimeo.com/6620587
http://www.vimeo.com/6728672
http://www.vimeo.com/6742971
http://www.vimeo.com/6940306
http://www.vimeo.com/7173853
http://www.vimeo.com/7301030
http://www.vimeo.com/7433860

U

lo de hacer la página con photoshop es como en todo un boceto de como quieres la págian , y luego bueno puedes con los sectores trozearlo. Yo tomo la via más lenta que es hacer el código a mano para tenerlo bien ordenadito , paso del dreamweaver como de la mierda xD .

erdanblo

La informática es todo binario, empieza con un 0, luego otro 0, si te da coraje, cogete primero un 1, 0, 1,0,1,0,0,0,1,1,0,1,0,2

PD. Chiste malo XD

DjinnSade

Lo del Photoshop a veces se hace a modo de mockup, o boceto de interfaz/web. Luego de ahí sacan botones y demás y hala a integrarlos.

LzO

Claro, pero de ahi sacas el acabado final, fijate en el video, la web queda tal cual lo diseñó la pava en photoshop.

Usuarios habituales