formularios editados con estilos

[Emiliano Zapata]

Hice este formulario y le aplique estilos, pero me encontre con algo que nunca he realizado, cuando uno hace formualarios normales donde estan el campos method="post" y action"haciadondesevadirigir", pero en esta caso que hice el formulario con estilos, como hago para que al darle al boton acceder tome los valores y los mande al script que envia los datos a la base de datos?

<ul id="form">
<h1>calis de formulario</h1>
<h4> Usando estilos</h4>
<li><label for="name">

Usuario</label>
<input type="text" id="usuario" name="usuario" title="usuario" tabindex="" /></li>
<li><label for="contraseña">Contraseña</label><input type="password" id="contra" name="contra" tabindex="2" title="contra"/></li>
<li><input type="submit" class="submit" value="Acceder" /></li>
</ul>

[elQuique]

No tiene nada que ver una cosa con otra, te estas confundiendo.

<form>

<label>

<input>

siempre los debes usar, uses o no estilos.

Una cosa son las Tags HTML para obtener datos o contener información y otra aparte el diseño CSS, pero una cosa no sustituye a la otra.

En el form action como siempre debes poner el script destino.

[Emiliano Zapata]

orale, muchas gracias quique la verdad si me confundi muy feo, pero hasta me imaginaba que el script destino deberia ponerse en las clases css, y como estoy tratando de aprender a realizar paginas con estandares W3C, porque he leido tus consejos y he notado que ya no he tenido problemas de visualizacion entre los navagedores. Una vez mas gracias Quique nos estamos leyendo.

[elQuique]

Acá tienes un tutorial de Formulario de Contacto, si no usas DW fijate solo en el HTML resultante. También ahí tienes una liga a como enviar el formulario con PHP.

[Emiliano Zapata]

Ya cheque el formulario y lo ando aplicando, y pues resulta que si uso dreamweaver pero nunca uso la parte en donde haces todo mas automatico, sino que solo en la parte del codigo, segun yo para entender mas el funcionamiento, pero la verdad me tardo mas en estar haciendo cambios. De nuevo gracias men.

[elQuique]

Si, yo tampoco uso el menú, siempre uso HTML pero ese tuto fue pensado para quienes no saben código.

Igual ahora tampoco uso DW como en esos tiempos :)

[Emiliano Zapata]

y ahora que usas? notepad?...

[elQuique]

Notepad Plus para lo rápido, pero el que mas uso es Eclipse, ya que con Notepad no se puede mantener un sistema semi robusto orientado a objetos.

Notepad Plus: http://notepad-plus.sourceforge.net/es/site.htm

Eclipse: http://eclipse.org/

Eclipse PDT para PHP: http://eclipse.org/pdt/

[Emiliano Zapata]

Gracias Quique, empezare a usar el notepad para volverme mas diestro en el codigo html,css,php,etc.

[Emiliano Zapata]

Andando por la red, me tope con un tutorial tuyo hacerca de crear web en photoshop cs3 y luego pasarla a html, mi pregunta es:¿ No es demasiado pesado usar muchas imagenes para la estructura y otra cosa, seria mas dificil darle dinamismo a la web si la estructura en Photoshop?

[elQuique]

Que el diseño lo hagas en photoshop no quiere decir que todo se implemente en la web como imagen, existen muchos elementos que se realizan con CSS y HTML.

En cuanto a las imagenes se deben cortar y optimizar por separado cada una en su formato apropiado segun la cantidad de colores, tamaño, peso, calidad (gif, png, jpg).

Tampoco tiene que ver el dinamismo, el Ps lo que nos permite es dibujar el diseño, luego el tema dinamismo, movimientos, etc, debe ser convertido a web.

Cuando una web esta ya publicada ni ideas tendras de si el diseñador la dibujo en paint, photoshp, illustrator, gimp, inkscape o lo que sea :)

Por tanto no hay relación Photoshop = Pesado

Lo que pasa es que existen muy pocos diseñadores Web, y mucho menos maquetadores web que respeten estandares, lo que si existen son muchos diseñadores graficos que no ven la diferencia entre un folleto en papel de 35 megas y una web :P, y otros tanto salvajes que peor aun ... le entran al flash.

[Emiliano Zapata]

orale, es bueno leer tus consejos, en eso tienes razon, lo que me gusta es que cuando diseñas en photoshop el aspecto de la web se ve profesional, bueno también depende de un buen diseño y no bien colorida como Guacamaya. Y lo primero que pensé al ver ese tutorial era exactamente lo que mencionastes que toda la web la veía como imagen, por eso hice el cuestionamiento. Y la verdad que si es un buen rollo diseñar y después meterle programación, pero eso estoy intentando hacer las cosas como deben ser, aunque mi diseño no sea muy bonito si me apego a los estandares como mencionas ya son puntos buenos a mi favor.

Practicare tu tutorial con un diseño propio y te cuento como me va :).

[elQuique]

Un ejemplo tipico de no diseñar pensando en web son los degradados circulares, vemos ...

html / css permite incluir un fondo que se puede repetir automaticamente en toda la zona en sentido horizontal y vertical, o solo vertical o solo horizontal.

Si haces un circulo degradado de 500 x 500 y pesa 200kb eso no podras reducirlo, ya que siempre mide 500 x 500, en cambio si utilizas lo que mencione del repetir fondo puedes usar una imagen de 30px de algo por 2 de ancho y eso se repite en todo el ancho y seguramente pese 300 o 500 bytes.

Bajas nada menos que 199.5 kbytes :P solo por pensar como diseñador web ;) y olvidarte de los folletos o flyers en papel similcote 90 gramos impresos en cuatricomia :P

Un ejemplo mas concreto: esa imagen ocupa todo el ancho de la pantalla en el pie de este mismo foro, en photoshop se dibujo de todo el ancho, pero al llevarlo a html css se corto solo un trocito que luego se autorepite, lo cual pesa mucho menos ;)

[Emiliano Zapata]

Algunas veces en algunas web de prueba que hice puse fondos con una imagen pequeña y con css aplicaba que se repitiera pero nunca me imagine que eso ahorraba gran peso , porque al ir bajando con el scroll se seguia repitiendo y eso me hacia pensar que era demasiado peso, inclusive optaba por poner un fondo fijo pero la verdad los hacia de 1300px x 1500px . Ya con tus sugerencias empiezo a ver que estoy cometiendo muchos errores. Gracias por tus consejos :).

[elQuique]

Es cuestion de ver con el explorador de archivo o con botón derecho propiedades en la imagen cuanto es que pesa cada imagen.

Igualmente por línea general una imagen de 30x3 siempre es mas liviana que 1300x1500px.

Y con CSS puedes decirle que se repita solo horizontal o vertical, no tienes porque dejar que se repita en toda la pagina.

Ten en cuenta el modelo de funcionamiento de la web, es un modelo cliente servidor, tu navegador le pide la imagen al server, viene esa imagen y se muestra. Por tanto si es pequeña viajo muy rapido, luego repetirse en toda la pantalla es algo que lo hace el procesador CSS de tu navegador, no implica velocidad internet. Por el contrario si es una imagen gigante tuvo que viajar del server a tu PC.

Esto ultimo sin tener en cuenta que consume mas ancho de banda de tu ADSL si es limitada o bien de tu servidor que ahi casi siempre es limitado, sin contar la lentitud.

[Emiliano Zapata]

Entonce ya no tendre dudas a la hora de diseñar una web, y ya no tendre miedo de empezarla a diseñar en photoshop,illustrator, etc. Muchas gracias quique por tus consejos.