Tutoriales sobre Diseño Web... (TIPS)

[Skrydlof]

Holas!
Me gustaria que todos los diseñadores de sitios web apoyaran esta iniciativa para asi enriquecer nuestro conocimiento sobre el desarrollo de websites y apoyar de esta manera tambien a los principiantes que les vendria de maravillas que se realice un tutorial aqui en los foros. Espero contar con sus valiosos aportes, y como no compartir con todos, la experiencia que han tenido creando websites.

Bienvenidos sean todos!
:)

[Skrydlof]

Seria importante comenzar por el GENESIS del sitio web, no? lo que se desarrolla en la mente...

[matrex]

todos estan como muy ocupados para estar en lago asi, busca nuevos diseñadores con mucho tiempo libre y lograrias algo seguro...

[Corel-User]

"Todos"?? mmmm creo que adelantas opinion por el resto de webmasters, pues creo que habra algunos que si puedan colaborar, no? en mi caso, yo si tengo libre y puedo apoyar en dicho proyecto. :)

Sebastian: Interesante la iniciativa, solo que habria que convocar a gente interesada y con buena disposicion para desarrollar los temas. En otro mensaje comento mas, ok? :)

[MaSTeR_WeB]

Me sumo a la convocatoria y en especial me gustaria que un webmasters tratara el tema del DHTML para las paginas web asi como las hojas de estilo CSS.

Feliz Navidad a Todos desde la fria Göteborg!

[Corel-User]

Me uno a Master en que se toque de manera especial el tema de las CSS pues precidamente no es mi fuerte :(

De momento les contare que estoy realizandole a un personaje artista plastico su web y en ese proyecto en estos momentos me encuentro ocupado. posteriormente les comentare como me fue. Ademas estoy realizando el sitio de una institucion cuya interfaz grafica la estoy realizando integra en Paint Shop Pro... luego les comento mas al respecto. :)

[MaSTeR_WeB]

Holas!
Considero que lo primero que se debiera tocar es sobre las hojas de estilo y que me mejor que definiendo las siglas CSS
esas son las siglas de "Cascade StyleSheet". Se trata de una esplicación sobre los estilos aplicables a un documento HTML.

Los Estilos.- los hay lógicos, El estilo lógico se refiere al conocimiento del documento: cabeceras, párrafos, sin preocuparse del aspecto final, sino del orden del documento. En cambio, diferente el estilo físico no se preocupa del orden del documento, sino por la aspecto final: texto con un cierto tipo de letra, tablas con un determinado color de fondo, El objetivo de las hojas de estilo es componer unos estilos físicos, separados de las etiquetas HTML, y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podremos r modificarlos en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco más de interactividad. (lo que buscamos no?)

Y seguiremos hablando del tema en otro mensaje ;)
salu2

[Corel-User]

Oye Masterweb gracias, espero que nos sigas ilustrando. (la verdad como repito las css no es mi fuerte :( )

Bueno estimados webmasters desde ya les saludo y deseo que pasen un muy FeLiZ AñO NuEvO!!! sean felices!! :) :) :)

[THOR]

Salu2!

Me auno a vuestros pedidos por informacion sobre las CSS, y tambien sobre las tecnologias que se aplican del lado del servidor.

Teneis idea de cuanto cuesta el Ultradev??

Salu2 a to2

[Corel-User]

MasterWeb donde andas para que termines de hacer tus envios sobre ese tema de interes!
eres invocado por los usuarios! ;) ;)

[Corel-User]

MasterWeb donde andas para que termines de hacer tus envios sobre ese tema de interes!
eres invocado por los usuarios! ;) ;)

[Skrydlof]

Que onda?
afortunadamente la discusion esta enfocada al diseño web en general y no solo limitada a lo que puedes realizar con Adobe Golive, jeje es que en un inicio eso pudo llevar a confusion. Gracias mas bien por sus aportes y bienvenidos otros nuevos, no? :)

saludos

[WebDesign1]

Hola hola hola!
Heme aqui! saluti a tuti mundi! espero nuevos temas en este foro que pense que trataba de Golive, pero parece que hablan de disenho en general. bye

[Corel-User]

Holas!
y que onda? masterweb donde andas??? sigan desarrollando los temas! :)

[THOR]

Aportando algo para vosotros sobre el tema de las Hojas de estilo (CSS)

(esto segun la Recomendación del W3C)

Conceptos Básicos
Diseñar hojas de estilo sencillas es fácil. Sólo hay que saber un poco de HTML y algo de terminología básica de publicación electrónica.

Por ejemplo, para hacer que el color de los elementos 'H1' sea azul, basta con decir:
H1 { color: blue }

Este ejemplo es una regla CSS sencilla. Una regla consta de dos partes principales: un selector ('H1') y una declaración ('color:blue'). La declaración tiene dos partes: una propiedad ('color') y un valor ('blue'). Aunque este ejemplo sólo intenta influir en una sola de las propiedades necesarias para representar un documento HTML, por sí mismo ya constituye una hoja de estilo. Combinada con otras hojas de estilo (y una característica fundamental del CSS es que las hojas de estilo pueden combinarse) determinará la presentación final del documento.

El selector es el nexo entre el documento HTML y la hoja de estilo, y todos los tipos de elemento HTML son posibles
selectores. Los tipos de elemento HTML se definen en la especificación de HTML [2].
La propiedad 'color' es una de las de alrededor de cincuenta propiedades que determinan la presentación de un documento HTML. En esta especificación se define la lista de propiedades y sus posibles valores.
Los autores de HTML sólo necesitan escribir hojas de estilo si desean sugerir un estilo específico para sus documentos. Cada Agente de Usuario (AU, normalmente un "navegador", "explorador" o "browser") tendrá una hoja de estilo predeterminada que presentará los documentos de una manera razonable – aunque discutiblemente "aburrida". ;)

Espero que os guste esta "pequeña entrega" ;)

Salu2 fraternos!

[WebDesign1]

Wolaaaaaasss Gens d-monds!!

Hey thor, Gracias hombre, interesante tema de los CSS, solo que algunas cosas no las tengo claras, te envie un mail preguntadote pero no has respondido, a ver si contestas, si?
;)

Saudades de gloria, Bye!

[daz]

Hola, hace algun tiempo alguien tuvo la misma iniciativa en este foro.
Fue asi como nacio de maestrosdelweb y forosdelweb<a href='ir.asp?http://www.webtutorial.com.ar' target='_blank'>http://www.webtutorial.com.ar...</a>, que lleva algun tiempo, contiene temas interesantes para todo webmaster desde html, hasta asp y php.

[MaSTeR_WeB]

Bueeenaaas Que tal??

Espero pronto Thor que continues con lo que comenzaste, eh? jeje que ese tema tiene para mas! Espero tambien pueda conseguir mas material sobre el mismo, en la medida que disponga de tiempo, nos estamos comunicando!

Salut, Bon dia &amp; Sort!

[Aisengard]

Interesante, a ver si pronto les aporto con algun tema para aprender juntos (en lo particular aportaria sobre Adobe Golive)

[Visitante]

Buena iniciativa, os felicito!

[skammelsrod]

Basta de felicitaciones y ponganse las pilas!! y los tutos?

[Sadmin]

Mensaje Original por THOR
Aportando algo para vosotros sobre el tema de las Hojas de estilo (CSS)

(esto segun la Recomendación del W3C)

Conceptos Básicos
Diseñar hojas de estilo sencillas es fácil. Sólo hay que saber un poco de HTML y algo de terminología básica de publicación electrónica.

Hola, en este momento estoy dirigiendo la programacion de un portal comercial (todavia no se ha lanzado) asi que hagan sus criticas (no muy fuertes por favor ) en www.mimejorsitio.com
aporto y apoyo a este hilo porque las CSS son muy importantes, y CREO yo que en lo posible debe mantenerse un solo archivo CSS para todo el sitio web, planeando una buena descripcion de los nombres de las fonts, class etc. (existe alguna teoria o tips sobre esto? ) para que despues no tengas que estar haciendo cantidad de hojas de estilos o estarla reformando a cada rato, arreglando una pagina, pero dañando las otras etc...

GRacias

pd - particularmente he tenido problemas con los estilos de las barras de menus, cada vez que hago un nuevo menu y quiero variar un color me toca casi que empezar una nueva hoja de estilos

[...]

Che! no carga tu site Sadmin, que fue? desististe de tu iniciativa o en ke proyectos andás?
tenés otras cosas?

[Aisengard]

Sadmin lo tuyo creo que debió ser posteado en el foro de críticas no te parece?

[rdorlando]

Sadmin Tu pagina tiene un aspecto Muy bueno, que es lo que se ve claramente cuando ingresas al sitio. Por ahí lo que te falta es un poco en los menues, los frames deberias sacarlos (no es que esten mal, ya que esto es un tema personal del WebMaster) ya que esta probado que los usuarios prefieren no tenerlos porque asi les da más libertad, ademas es mejor para buscadores como google. Yo soy programador de aplicaciones de escritorio y desde principio del 2003 estoy en esto de la web y lo que más me cuesta es el tema del aspecto ya que estoy diseñando un site comercial de publicidad, aunque mi tema es toda la automatizacion (del diseño grafico se encargara otra persona, todo el esquema principal lo hago yo y a veces se necesita algunas cosas esteticas y aunque ya he abanzado mucho y puedo decir que ya se, todavia me falta mucho en este aspecto, a mi me parecio que vos das mejor con el diseño que con la programacion, si es aí espero que nos ayudemos , yo con la programcion y tu con la estetica.
Te cuento que ya sabia de antes hacer paginas y scripts, lo que pasa es que no es lo mismo hacer un site , que hacer un par de paginas estaticas.

Resumiendo la estetica de tu site es Muy Buena, lo que le faltaria es un poco más de interactividad con los usuarios. Cuando muestras los productos, para ver más detalles tienes que clikear en el icono que esta al lado de "Ver mas", creo que seria bueno tambien hacerlo en la frace, ademas como es una pagina en esopañol creo que la pallabra mas deberia llevar acento.

[rdorlando]

Bueno volvamos a los tips, que es lo que nos intereza.

Tips para formularios.

Los que les voy a comentar es para cuando creamos botones de radio o casillas de verificacion, ya que de forma predeterminada no se selccionan las opciones cuando clikeamos sobre la frace que se encuentre al lado. Para este fin vamos a crear una estiqueta enlazada los objetos ( botones de radio y casillas de verificacion) para este fin.

Glosario

A los botones de radio se los llama "Radio" y a las casillas de verificacion "CheckBox"
A las etiquetas "Label", el "ID", como ya sabran es el identificador (como en las tablas access)

Vamos al ejemplo

<input type="CheckBox" name="preferencia" value="Pintura" ID="idPintura">
<Label For="idPintura">Pintura</Label>

En "For" se pone el "ID" del objeto en nuestro caso "idPintura".

Glosario

Los marcos se usan para agrupar determinados objetos.
En el caso anterior podriamos tener 2 marcos c/u con sus respectivos objetos "Radio", lo que equibaldria ha tener por ejemplo 2 encuestas, ya que si pondriamos todos los "Radio" en la pagina, solo poddremos seleccionar una opcion.

para usar los Marcos se utilizan las etiquetas <FIELDSET> y </FIELDSET>, para colocarle una "Leyenda" se usa <Legend>

Glosario

La "leyenda" es la que aparece en el marco, se utiliza para indicar una descripcion.
Preferí usar "leyenda" en lugar a "Nombre" porque puede dar confuciones, ya que aquí hablamos de etiquetas, leyenda o texto descriptivo y no el nombre de un Objeto.

Yo seguire colaborando con TIPs, ya que mi fuerte es la programacion y hacer un tutorial como la gente llevaria mucho tiempo y creo que aca daría más resultados esto, para los tiutoriales hay mejores lugares de donde sacrlos y la mayoria como son grandes hay que descargarlos.

Espero sus commentarios pra saber si se entendio o fueron utiles.

[Aisengard]

rdorlando, es grato tener un aporte tan especial como el que tu estas dando en este tema. Claro que se entiende y esperamos que sigas aportando nuevos tips, imagino que tienes muchas cosas que contar de tu experiencia en el desarrollo de sites (no en vano eres programador) son bienvenidos tus comentarios...

[rdorlando]

Nuevo Tips:
-----------

En esta ocasión veremos Tips interesantes para tablas:

Empezaremos con un repaso de las principales etiquetas usadas para la creación de tablas:

<TABLE> y </TABLE> Para definir el comienzo y el fin de la Tabla.
<TR> y <TR> Para definir el comienzo y el fin de una Fila.
<TD> y </TD> Para definir el comienzo y el fin de una Celda.

Combinar Celdas:
----------------

Rowspan y colspan Combinan Filas y Columnas contiguas respectivamente.
* Son Atributos de <TD> y <TH>

Tpis:
-----

Si queremos que la celda sea de encabezado, para destacar su contenido,
usamos <TH> en lugar de <TD>.

Si queremos utilizar un encabezado para la tabla usamos la etiqueta <CAPTION> y <CAPTION>

Agrupar Celdas:
---------------

*************** Queda para la próxima entrega ***************

[Aisengard]

Queda pendiente entonces... a ver si luego les paso unos tips de como trabajar con un editor con Golive y las CSS

[Aisengard]

Iniciado por skammelsrod

Basta de felicitaciones y ponganse las pilas!! y los tutos?

Maestros no claudiquen! echenle ganas y continuen con esta interesante iniciativa!

Cordiales Saludos