Reciclaje profesional. Escritorio -> Web

C

Buenas gente!

Tengo un grave problema que arrastro de hace tiempo y como aquí hay mucho programador web, necesito consejo.

Os cuento:

Soy analista/programador desde el 2000 y desde siempre me he dedicado a la programación de aplicaciones de escritorio para Windows. Domino como Dios el SQL y, en general, la arquitectura de base de datos. Domino también la API de Windows y gracias a este hecho he ganado muchos puntos en las empresas por las que he pasado (3 en estos 10 años). También he desarrollado controles ActiveX y controles para .NET. Incluso para PDAs, Datáfonos y otros accesorios también he cacharreado bastante debido al tipo de negocio en el que me muevo. En definitiva, soy un programador de escritorio bastante completo.

¿Dónde está el problema?

Pues que llevo años queriendo hacer incursiones en el desarrollo web y soy un auténtico negado para el tema html/css. No sé si es falta de motivación o falta de interés en el fondo. Supongo que es un bloqueo que proviene de mi mundo de escritorio, no sé...

Me he comprado libros, me he bajado manuales, pero no logro avanzar mucho (la verdad es que no tengo mucho tiempo para ello). Si alguien sabe alguna técnica para reconvertirme, por favor, que me ilumine! xD

erdanblo

Dreamweaver, o similares. Cuando veas que al mover una tabla empieza a joderte la vida, porque no aparece donde tu quieres, te interesará ver el código para saber como solucionarlo y al final acabaras haciendolo a manija todo.

Quizás también te interes esto: http://960.gs/

http://www.desarrolloweb.com/manuales/maquetacion-css-960-grid-system.html

También hay frameworks para css.

C

Gracias #2.

Supongo que es como todo, echarle horas y empezar por lo mas tonto.
Sin algún día piloto, prometo manual para programadores que quieran migrar
al maravilloso mundo del Explorer y el firefox.

Es que lo de arrastrar y soltar en los IDEs de escritorio es tan cómodo...

txandy

yo empece con Dreamweaver y tablas, estructuraba la web a base de tablas, como bien dicen arriba, al final "hacían lo que querían" y tenia que estar toqueteando código. Poco a poco fui dejando el entorno gráfico y casi todo lo hacia por código iba mucho más rapido picando codigo que "rebuscando" por el programa.

Hace unos meses deje las tablas y me pasé a CSS, la verdad es que es una pasada comparado con las tablas y vas mucho más rápido.

Yo manuales la verdad es que he leído pocos, cuando surge algún problema google y miras como se hace y adelante, tambien es verdad que despues de tantos años con dreamweaver vas viendo código y se te quedan las cosas, tanto de css, de html.

Yo te recomiendo hacer una web de lo que sea, simplemente para practicar, un blog, o algo así similar (si te quieres meter con mysql/php, bueno yo soy de php, tu siendo de windows a lo mejor te va mejor ASP) sino pues algo más simple estático en HTML/CSS también te puede interesar javascript (jquery) y poco más ir haciendo proyectos simples yo creo que es la mejor manera de aprender, dándote golpes...

También es util diseñar primero más o menos el diseño que quieres para la web en photoshop y luego ir pasándolo a HTML/CSS

Por donde empezar pues...

Con esto creas el estilo que te centra la capa, y a partir de hay a imaginar ;)

<div id='contenedor'></div>

#contenedor {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

PD: luego al final a comerte la cabeza para que funcione en todos los exploradores :D

1
U

Bueno decir que amo CSS :D haha, la putada de CSS que actualmente no esta estandarizado para todos los navegadores. Posiblemente tendrás problemas con IE y demás, en firefox suele ir siempre todo bien hasta que te da por mirarla en IE y lo ves todo descolocado.

Te recomiendo que empieces con Tablas y adjuntarle stilos a esas tablas , leete un par de tutoriales sobre CSS , para que sirve cada tag ect ect. Para ayudarte tienes dreamweaver que en cuanto empiezas a escribir te saltan todos los comandos que puedes utilizar.

PD: cuanto más reciente sea la versión de dreamweaver más comandos tienes :)

PD2 : te recomiendo dejar el entorno gráfico y pasar directamente a hacer todo por código. Si utilizaras Mac te recomiendo el programa Coda :) es una delicia .

txandy

programas?

Notepad, o en su defecto notepad++ no necesitas más ;)

Estos programas, no petan, consumen poco y en fin hacen su función, notepad++ hasta te colorea el codigo, tiene plugins, convertir texto a mayúsculas, a minúsculas, convertir las comillas en simples, dobles... esta bastante bien :D

Crawler

Estas son mis armas en el día a día:

notepad++ con zencoding ( http://code.google.com/p/zen-coding/ )
firefox con firebug, y web developer tools (como mínimo)
navegadores varios: firefox, chrome, opera, safari, ie9, ie8/7, ie6... con algún script para lanzar la página deseada en todos ellos a la vez.

un buen reset.css (como el de YUI, o el de Eric Meyer) para minimizar las diferencias entre navegadores. (http://meyerweb.com/eric/tools/css/reset/ )

"Truco" que he arrastrado durante años: Utilizar siempre que puedo XHTML strict. Eso de que te obligue a cerrar las etiquetas en el orden que las has abierto, que no puedas dejarte ninguna abierta... etc. acaba siendo un buen aliado de "buenas practicas" y minimiza los errores crossbrowser (aunque a día de hoy trabajo con HTML5, o el HTML5 que se puede usar a día de hoy :P)

En cuanto a teoría:

Para aprender XHTML, recomiendo desde hace siglos: XHTML+CSS ¡de una maldita vez!" de Belén Albeza (ladybenko) muy ameno y completo. (http://cafeina.ladybenko.net/?p=338 )

Entender los floats y lists con "float tutorial y listamatic" de maxdesign
http://css.maxdesign.com.au/floatutorial/
http://css.maxdesign.com.au/listamatic/

Algo más complicado es meterse ya con HTML5, muchas más posibles incompatibilidades, mucha flexibilidad de código que puede llevar a una mala praxis de código y errores tontos por haber cerrado los elementos en orden inverso, o haber dejado abierto el que no tocaba.

Si aún así te atreves, lo mas completo que hay hoy en día es HTML5 boilerplate, un buen punto de partida, hasta con vídeo explicativo de que hace cada cosa. (http://html5boilerplate.com/ )

Y cuando ya vayas a lidiar con webs grandes, no está de mas conocer frameworks de css, (como el 960.gs que ya te recomendaron por ahi, pero que lo veo algo corto)
En este caso mi apuesta es por OOCSS de Nicolle Sullivan (entre otros)
http://wiki.github.com/stubbornella/oocss/

Nos faltaría algo de javascript para acabar con la programación "del lado del cliente", mi opción predilecta es usar jQuery, sirve para todo y tiene una documentación muy buena.

Respecto a la programación "en el lado del servidor" estoy más verde, no te sabría decir donde he aprendido el php, asp o jsp que se, no tengo ningun enlace especialmente bueno.

Eso si, para ambas cosas recomiendo http://net.tutsplus.com/ tienen videotutoriales de bastantes temas, y el tal Jeffrey Way no se explica del todo mal.

P.D. Vaya tochaco de "profesor siesta" me ha quedado. Espero que te sirva para algo! ;)

P.D.2 Me olvidaba de http://www.w3schools.com/ !

2
Tunnecino

Pues, sumando todo lo que te han dicho arriba.

Yo personalmente me suele gustar maquetar los diseños 100% divs + CSS. Llevo un par de meses usando el IDE Netbeans y la verdad es que es muy completo (si vas a hacer webs dinámicas, con php por ej incluye una mini db con todas las funciones y descripciones).

Y por cierto, Web y lo que dices (al maravilloso mundo del Explorer y el firefox.) no cuadra xD

C

#7, thx! tiene buena pinta todo.

#8, era ironía. En el Dpto. de I+D tengo compañeros weberos y veo cómo se rasgan las vestiduras continuamente con el tema de incompatibilidades, sobre todo del Explorer por lo que oigo. Y el NetBeans es lo que usan mis compis weberos. Lo tengo instalado para el día que me ponga en serio de una PV.

Tunnecino

A mi me tiene muy contento. Soporte para servicios SVN, FTP, SFTP, auto run y auto upload. Y bueno, ahora previsualizador CSS, completa base de documentación sobre php, js, css, etc.

No se, muy completo. Lo recomiendo más que el Eclipse.

Pegas:

No tiene Word Wrap aún.
Java.
Java(2).
Java($i++)...

xD

Kaiserlau

+1 #7
Yo lo unico q puedo recomendarte sq no uses dreamweaver para meterte con el html/css usa algun editor de texto como el editplus notepad++ etc.. con un par de tutos o manuales sencillos y con un editor normal en 1 semana no mas tienes el chip cambiado para programar buenas webŽs ademas tienes y partes de la base de q dominas SQl etc..
Por cierto a mi los resultados que me dan de codificar una web con un editor de textos normal es de mucho mas dominio del codigo y del flujo de informacion. Porjemplo no tenia npi de css (cuando estaba todabia con tablas de los webos) me meti 1 semana con ello bajo un editor de textos y lo pille rapido, con el dreamwaver sencillamente te marearas.
Aun asi soy un puto noob, diciendole a un uber q hacer :/, enfin nose ami me mola mas machacar el codigo a mano q con dreamwaver (q tambien lo uso) pero no parto desde él, no se si me explico.

Yo diria q alguien q domine html/css/php/java puede hacer lo q quiera para la web.

Buffoncete

si dominas .NET como dices -> ASP

Usuarios habituales