miércoles, 12 de mayo de 2010

Tutorial # 1 El diseño del Sistema


requisitos para iniciar el tutorial:
-tener una computadora
-tener las ganas de aprender
-tener conocimientos solidos de html
-conocimientos basicos de editores web graficos
-dejar un comentario al final del post


bueno sean bienvenido al primer tutorial de mucho para realizar tu proyecto, hoy aprenderemos como escoger tu diseño para tu proyecto.

primero tenemos que familiarizarnos con conceptos que aprenderemos hoy , primero tu te has preguntado como hacen los diseñadores de paginas web .cuando les toca realizar un sitio enorme ... no , no creas que van guardan la primera pagina que diseñan 80 veces con nombres diferentes, pues para eso vamos a explicar unos consejos y trucos que los profesionales usan.

primero todos sabemos como funciona el html y como se arma una pagina , mas bien el codigo se divide en etiquetas que hace algun tipo de accion o mas bien ponen un objeto que queramos en html , etiquetas de entrada y salida , pero todos sabemos que el html es estatico y muy pobre para nuestras exigencias ahora como desarrolladores .

bien pues te presento lo que se llama CSS (Cascading Style Sheets) hoja de estilos de cascadas,
bueno pero ustedes se preguntaran que es eso o como se como se come pues aca les va la explicacion.

Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del estilo físico, dejando este último en bloques de definición de estilos separados de la estructura del documento.

CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento.

El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, ...

La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrán ser modificados en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco más de interactividad.

despues de esta explicacion tecnica y rara se los traducire al buen salvadoreño que son estas ondas:

bueno en si el HTML solo da la estructura de la pagina, lo que hace el css es darle el estilo la apariencia y el orden que debe llevar ese diseño dentro de esa estructura html.

que puedes definir con css tipos de fuentes , alineaciones,color,fondos , tamaaños.

pero te preguntaras , si eso lo hace dreamweaver para que lo tengo q realizar en otro archivo , pues la respuesta es que una ves tengas tu CSS listo solo lo aplicas a tu web y listo todas tus paginas van a tener el mismo estilo .

la ventaja es que si yo por ejemplo me equivoco en algun detalle del diseño por ejemplo el color de algun parrafo importante dentro de mi sitio , solo edito mi CSS y los cambios se realizaran de un solo a las demas paginas.

ves xq los profesionales arman en un dia los sitio web , no es que sean unos locos en esto si no que saben como utilizar estas herramientas.

no entrare en detalles tecnicos sobre css o como se hace uno la verdad ay muchos en internet que ya estan preelaborados , pero es muy importante que te leas un manual sobre css antes de tratar de modificar algo en el css .

bien pero como me decidire en mi diseño para mi sistema aca te va unos consejos :

*primero investiga paginas o sistemas parecidos al tuyo para ver como los han armado

*segundo elige colores que vayan con tu sistema , (si tu sistema renta de carros no vayas a elegir colores extraños , metete a tu sistema preguntale a personas normales (normales significa que no sepan nada de este vacil)(este vacil significa informatica) para que te den una opinion.

*tercero una ves elegido tu diseño debes pensar si se acopla a todos los formularios que debes realizar.

*cuarto un consejo muy util y que me ha servido mucho es dibujar primero todo los formularios que voy a realizar en mi sistema para que cuando este en mi pc no este inventando que poner.

*una ves elegido tu diseño ordena tu sitio siempre acostumbrate a dividir tu sitio por modulos .

*ya realizado esto ya estas listo para editar tu diseño y manos a la obra .

aca te dejo unas url donde hay diseños bonitos y acoplables a los que estamos haciendo.

http://www.freecsstemplates.org/

http://www.megaupload.com/?d=8XY4LVYE

http://www.free-css-templates.com/

bueno espero que les sirva este aporte , Y si ya lo sabes esto, no critiques mejor ayuda a los demas.

Comenten no sean bayuncos

3 comentarios:

  1. Excelente Informacion Rada muy importante estare pendiente para los demas tutoriales

    ResponderEliminar
  2. Oye men tu si que te mandas con este sitio todos tus aportes son simplemente geniales... quisiera que nos ayudaras un poco mas con Poo, talvez tienes por alli una ayudadita para los examenes... y tambien con los de PHP por lo menos en mi caso no me han hecho ni uno de los dos examenes ni de Poo ni de Php asique si puedes poner algo te lo agradeceria mucho.. saludos

    ResponderEliminar
  3. Gracias por tu comentario hacia el sitio

    pero si fijate que en poo si no he puesto mucho, pero las guias que hacemos las subo deberias de darle unas chekeadas , pero si , me dejas en deuda con lo poo , pero ya buscare como les puedo ayudar mas en esa area .

    segun investigue el examen de poo que le hicieron a un grupo se trata de controles personalizados de email , nit, dui y todas esas ondas , pero los subire algunos q encontre en internet.

    ResponderEliminar