Registrarse

[Otros] [Cerrada] Escuela de diseño web

Estado
Cerrado para nuevas respuestas.

Rdio.

¿Volvera?
Hola y bienvenidos a la sección de dudas, problemas, ideas y todo lo relacionado a resolver o/y agregar, para un mayor orden en la escuela. Una vez conocida la funcionalidad de este tema he de presentarme.
Soy Rdio mejor dicho Alex, seré su maestro y mas que nada su amigo, mi propio alumno para se mas correcto. Tengo algo de experiencia con el diseño web me tomo mas de 4 años desarrollarlo correctamente 1 uno para saber con lo que estoy trabajando. Algo que olvide mencionar es que no solo responderé cosas relacionadas con el diseño web, si no también sobre mi, si quieren saber algo sobre mi no tenga miedo.

Aun no tengo una lista correcta de las preguntas frecuentes dado caso que no se como las generen o como las mentalizan pero bueno. Otra cosa mas si tiene dudas pueden hacerlas personalmente via MP o mi skype: snip3rdi4mond . Por ultimo me parecería recomendable hacer un grupo de skype por si acaso.
 

Rdio.

¿Volvera?
[Clase 0 - Teoría] Definición y Jerarquía de diseño web


Teoría: Definición y Jerarquía de diseño web


Antes de comenzar con la primera clase de esta escuela, se debe de saber con que estamos trabajando, como se forma y como se descompone, en este caso no se trabajara con toda la estructura del diseño web en si, a que me refiero con esto, dado el caso de que esto es un foro es donde por mas se puede empezar.
Trabajaremos con el diseño en si de un foro, mas bien un skin, no se si explicarme correctamente para todos, pero poco a poco se darán cuenta a lo que estamos tratando de llegar.

El diseño web o también conocido como desarrollo web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc), pero no solo eso también se enfoca en establecer un diseño tanto digno o especial a el sitio donde estamos trabajando.


Sin tomar tanto en cuenta como esta estructurado desde la base, solo se fomentara en la vista del navegante. Esta forma-base de su diseño esta en 3 etapas, llamadas de la siguiente forma.
  • Header.
    La cabecera de nuestro sitio, el menu para nuestro navegante y la frase de dicho sitio. Lo mas destacado de esta es: Logo, Navbar(Menu) y Descripción.
    -
  • Cuerpo o Body(en ingles).
    El contenido de nuestro sitio, donde se encuentra documentada toda la información, usuarios, publicidad, etc. Normalmente en foros esta es estructurada de la siguiente forma: Categorías, Foros, Estadísticas, Rangos, Usuarios, Firmas.
    -
  • Footer.
    Parecido al Header, pero se diferencia tanto pequeña como corta, redes sociales, ayuda, derechos de autor o publicidad de otros sitios amigos.


Comenzamos desde su inicio que seria la estructura del código base:
Las 3 categorías con las que trabajaremos, serán las ya mencionadas, Header - Body - Footer. Si olvide algún dato o fundamento, creo que no es de ningún problema, porque solo trabajaremos con el diseño en si. Ya conocido lo que sabemos, también como esta formado, lo que tiene cada modulo y sub-modulo del mismo.
Bien creo que es todo lo que hay que saber, cualquier duda que se tenga puede hacerla en su respectivo tema. Ademas si algún alumno tiene una idea o conocimiento mas que agregar dígamela.



Una vez leído todo, vamos por ello!
Comenzamos la clase 0 que seria para ver como anda cada uno de ustedes y ver si echaron un ojo a la teoría. Como primer trabajo/tarea lo que hará cada uno de ustedes tomando en cuenta el apartado de ¿Como esta estructurado?, usando como ejemplo WaH, van a señalar con un borde rojo o recuadro lo que seria para ustedes el "Header, Body y Footer".
Esto no afectara nada a su calificación, conocimiento es para ver si distinguen algo de otra cosas; ademas es para que vean con lo que estaremos trabajando y usar cada modelo como ejemplo de cada clase que se vea.
 

DavZero

Estoy mamadísimo
Miembro de honor
Usuario de Oro
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web



 

Injuxa

Grafista basico.
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web

No me pegues como ayer (?)
Aqui va:
Header: http://prntscr.com/5hie97
Body: (de ahi hasta el footer) http://prntscr.com/5hieli
Footer: (de ahi hasta abajo xD) http://prntscr.com/5hieym
Los link lo puse asi poruqe no los pude subir a otro host xD
 

Rdio.

¿Volvera?
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web

Bueno, tengo que mencionar que aun sigo esperando que le den los permisos a los alumnos faltantes, pero pues ningún Admin me ha logrado contestar. Esta Clase 0 era opcional, si querían entregar el trabajo no hay ningún problema.
Aun no se quien o quienes ya tienen los permisos, esta tan liado con esto llevo esperando 3 semanas (sin contar la semana de mi inicio y la de esperar de aceptación de la escuela). Estaré mandando mensajes a los Admins y por otras razones me quedo despierto tan tarde para ver si los veo conectados..

Ah si de seguir así en las mismas, continuaremos con la escuela pero dará a cada alumno la clase por MP, no quiero terminarla y mucho menos cerrarla!
Los alumnos que ya tengan el permiso por favor de hablarme por skype: snip3rdi4mond
 

Rdio.

¿Volvera?
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web

Hola!
No se si lo sepan, pero se los diré, tenemos aproximadamente 3 semanas de no seguir con la Escuela ya sabrán por que. Así que si mañana sale todo bien (encuentro el formato de las 3 clases), continuaremos con esto.
Espero todos los alumnos ya tengan el acceso para ver y comentar, de ser así o no, me daré el derecho de postear la primera Clase.
 

Rdio.

¿Volvera?
[Clase - 1] Logos, Banners y Headers.

Hola a todos!
Después de unas semanas, ya se puede comenzar dichas clases, aunque aun tenemos uno que otro pequeño problema. Así que todos atentos a esta semana que sera la mas pesada, ya que llevamos un retraso muy grande. En mi cabeza la escuela debería de a ver terminado en Enero 5, pero con los problemas, blabla..
Dicho esto, comenzamos.

Lista de Alumnos
David D. Sayer301
Aitor D. levirotem
Aguiar
Green
Zero Black
InjuxaDeLaComarca
Panda
Kaze
Antialias sama
Naren D. Shunior
Drimer
Franco Kuchiki
Auditore D. Zero
Ryuko


Logo (Logotipo).
Es un signo o imagen grafico(a) que identifica una empresa/compañía/fabrica/etc.
-
Banner(Anuncio).
Es un anuncio normalmente rectangular colocado arriba, abajo o en los lados del contenido principal de un sitio web y que enlaza con el sitio web del anunciante. En otros términos es considerable hacerlo pasar también por un logotipo pero con dimensiones mas grandes.
-
Header(Cabecera).
Es la parte general del sitio donde se aloja el logotipo y la información de dicho sitio web. Es decir, es un rectángulo grande, donde se encuentra información respecto al sitio.


Comparando cada uno con su utilidad y/e significado el mas importante es el Header, ya que es la parte principal del foro, donde se aloja el logotipo + banners. Para simplificar su diferencia, el logotipo es el significado del contenido del sitio web, el banner es mas que nada publicidad con respecto al sitio y el header es la parte donde se encuentran ambos contenidos.


Aplicando el conocimiento previsto,se mostrara cada termino en WaH:

Como se darán cuenta el logo no esta en si en el Header, pero esta dentro del respectivo lugar. Lamentablemente WaH no tiene los banners en su header, pero los podremos encontrar en otros lugares de la web/foro.

Ahora usemos esta teoría en practica. Si hacemos un boceto en Photoshop sin ningún estilo de capa, solo retocando el lugar de cada cosa, es decir (header,logotipo y banner):

-
Así es como "normalmente" se ven los 3 elementos juntos, bien, ahora hagamos la magia de como en verdad se verían en un sitio:

Bien ya tenemos un poco concluido lo que es un Header, Logo y Banner. Asi que es hora de que cada uno de ustedes lo pongo en practica.


La tarea de la primera clase, sera hacer un Header con su respectivo Logo o Banner, no precisamente tiene que ser como el que se mostró de ejemplo: se puede buscar por la red otro tipo de estructura, el punto en si, es que usted muestre que aprendió esta clase.
Cualquier pregunta con respecto a esto, pueden comentar en este tema:

http://whackahack.com/foro/t-31335/faq-dudas-problemas-ideas

Suerte, tienen hasta el 24 de Enero para entregar su trabajo, cualquier problema que ocurra con esto se cambiara la fecha de entrega.
 

Green

Hola :]
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web

Header​

Body​

Footer​
 

Naren Jr.

Puto amo
Usuario de Platino
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web




lamento entregarlo ahora no he tenido mucho tiempo me pondré al día con todo lol <3
 

Ryuko

no
Respuesta: [Clase - 1] Logos, Banners y Headers.



Siento la tardanza, me voy a llevar el warn.
Y me inspiré en tu logo y en beatport.com xD

Explico:
El logo es el texto promocional. Sería un logotipo promocional, temporal. Como los que ponen en las páginas de Media Markt xD
El header es el fondo.
El banner es tu logo, la R.
 

Krotem

Mosca puñetera
Respuesta: [Clase - 1] Logos, Banners y Headers.

Ye lo pasé por skype esta mañana, aunque tengo warn D:
 

Rdio.

¿Volvera?
[Clase - 1] Resultados!

Bien ahora toca calificar, para los que no pudieron entregar entiendo totalmente su razón, Flame ya me explico esto. Así que esta bien, no pasa nada, no afecta a su desempeño o trabajo.Pero para la próxima clase les pido que entreguen.​
levirotem dijo:
Diseño: Igual para ser un banner con estilo "simple" me da gracia la publicidad de Mc, cuando de verdad no tiene nada que ver: 6,8/10
Originalidad: Bueno, no es tan así o acá, no se si me explico: 7/10
@levirotem



Aguiar dijo:
Diseño: El fondo no me convence mucho y icono se ve pixeleado, aunque me gusta los colores que usaste para el logo: 5,5/10
Originalidad: No esta perfecta ni mala, esta genial, tomaste como un buen punto el ejemplo: 7,2/10
@Aguiar


Green dijo:
Diseño: El estilo no me convence mucho, pero la combinación de los colores y efectos me quitan ese pretexto: 7/10
Originalidad: Esplendida, aunque temo decir que para una mejor gráfica de diseño es mejor respetar la fuente(eso siempre me pasa y rompe ese punto): 8/10
@Green


Panda_Megan4568 dijo:
Diseño: El diseño no esta echo por ti, la idea era hacer un banner por cada alumno. No tomar uno. Igual cuenta como entrega de tarea: 5/10
Originalidad: La originalidad es lo de menos, si hubieras usado el mismo boceto pero cambiar el estilo eso mejorar la perspectiva de mi cabeza: 4/10
@Panda_Megan4568



Antialias sama dijo:
Diseño: WOA!, que sorprendente trabajo, me encanta. No se si sea parte del diseño pero cuidado con las lineas negras: 9,2/10
Originalidad: Esplendida, es un tema ya previsto en este año, y me sorprenden ese estilo de "Cristal"(creo que se llama así): 10/10
@Antialias sama


Tío Naren Jr. dijo:
Diseño: Para ser un banner con un estilo clásico + simple no esta nada mal, me gusta que usaras una categoría ya muy conocida: 7/10
Originalidad: Que de esperarse de ti, excelente, aunque el estilo le quita esa vista de diseñador: 7,8/10
@Tío Naren Jr.


Ryuko dijo:
Diseño: En un punto del diseño el estilo minimalista o flat es que jamas falla, me encanta, le diste un toque sorprendente: 8,7/10
Originalidad: No pensé que alguien conociera este mismo estilo(bueno si) y creo que me dejas con la papada en alto: 9/10
@Ryuko

Aquí termina la primera clase. Pronto les traeré la segunda, así que descanse de momento.​
 

Fran Agustín

Si el sol besa tus ojos, ni cuenta te das.
Miembro insignia
Respuesta: [Clase 0 - Teoría] Definición y Jerarquía de diseño web

Pues veamos. Si tenemos en cuenta que el header es algo que generalmente se repite en todas las páginas del foro, yo consideraría esto como el header:


El body, para mi sería todo lo que hay abajo de eso, hasta esto:


Y el footer, teniendo también en cuenta que generalmente se repite, diría que es este:


*Nótese que la fecha y hora están dentro de la plantilla footer.

-----------------------------------------------------------------------------------------
Peeeeeero, teniendo en cuenta las plantillas, obtenemos esto:


*Está oculto con un "display:none;" @El puto amo

------------------------------------------------------------------------------------------
PD: Mil disculpas por el retraso, pero estaba de vacaciones D: (Ahora ya volví y estoy listo y presto para seguir con esta escuela ;D)
 

Rdio.

¿Volvera?
[Clase - 2] Botones y Navbars

Lista de Alumnos:
@Parritalol!
@levirotem
@Aguiar
@Green
@Zero Black
@Injuxa
@Panda_Megan4568
@Kaze
@Antialias sama
@Naren Jr.
@Drimer
@Franco Kuchiki
@Ryuko

Que comprendimos con la clase anterior. Pues no todo lo básico pero si 3 fundamentos que podrán ayudarnos a la hora de estructura un foro/web, pero sabiendo esto en los servicios del mismo no siempre tienen los 3 términos. Ademas esto no ayuda mucho a un entorno gráfico, brevemente solo explique que era cada cosa.


Boton(Button).
(Es una metáfora común) utilizada en interfaces gráficas. Los botones suelen ser representados como rectángulos y/o formas con una leyenda o icono dentro, generalmente.

Navbar(Barra de Navegación).
Una barra de navegación (o sistema de navegación) es una sección de una página web o una página en línea para ayudar los visitantes en viajar a través del documento en línea.

Y bien en caso del botón para que sea mas simple es solo una forma rectangular y dentro de ella un texto o icono? Podría ser pero normalmente los botones respetan un estilo gráfico y hay millones de ellos, en este caso se explicara los estilos que conozco o los que mas bien se deben de manejar al empezar esto.



Los estilos de botones son de gran variedad y de la misma siguen saliendo mas. Aunque normalmente para diseñar hay 5 estilos que yo principalmente recomiendo (son solo los que utilizo ja):
Flat(Diseño Plano): El “Flat Design” o “Diseño Plano” consiste en eliminar o reducir todo tipo de decoración en un diseño de interfaz o web para simplificar el mensaje y facilitar la funcionalidad. Se eliminan texturas, degradados, biselados, sombreados… en definitiva, siempre se utilizan colores vivos y tipografías clásicas.


Minimalist(Minimalism): Se refiere a cualquier cosa que haya sido reducida a lo esencial, despojada de elementos sobrantes.


Ideal: Bueno para mi es el mejor de todos, ya que tiene todos los detalles a tu gusto, colores, fuentes, fondos, etc. Prácticamente es el que tu diseñas sin seguir un concepto. De aquí es donde mas se desglosan mas estilos.
-
Donde ah quedado la Navbar? es lo que mas te estas preguntando. Según mi mentalidad la navbar es mas que nada una barra con botones y sus diferentes links. Es decir:


Si miramos bien, comprendemos que es tan solo botones pegados y claro no suele ser lo mismo en todos los sitios. El concepto clave es respetar un gran orden si te trata de cada botón por separado y al final unirlos. Dejemos de lado la teoría.


Bueno claro esta, un poco se podría decir, ahora es momento de fundamentar lo que estamos aprendiendo.
"Fuera de tema, se que normalmente en una escuela se enseña a hacer o mas bien se aprende. En este caso donde queda el aprendizaje, pues en el campo del diseño web, es mas diferente: -cada quien tiene su estilo- y mas que nada se respeta el estilo de cada uno"
-
Bien como tarea es hacer 3 tipos de botón con los 3 tipos de estilo, ya mencionados explicados: Flat, Minimalist o Ideal. Puedes buscar por todo Internet botones, recuerda bien las reglas de cada diseño, también incluyo el propio estilo. Suerte y tienen hasta el día 4 de Febrero para entregar.
 

Ryuko

no
Respuesta: [FAQ] Dudas, problemas o ideas.

hacer 3 tipos de botón con los 3 tipos de estilo, ya mencionados explicados: Flat, Minimalist o Ideal.
Pero, ¿qué temática debemos de usar? ¿Estilo Navbar, estilo FollowMe, estilo...?
 

Rdio.

¿Volvera?
Respuesta: [FAQ] Dudas, problemas o ideas.

Pero, ¿qué temática debemos de usar? ¿Estilo Navbar, estilo FollowMe, estilo...?
Hiciste bien en preguntar.
Bueno el concepto es hacer 3 botones con los 3 estilos ya mencionados, usando las mismas dimensiones para cada uno. Ahora bien una vez echos, solo es cuestión de unirlos Ó también puedes hacer una navbar con el mismo estilo osea: Flat, Minimalist o Ideal. Y la temática es Navbar.
 

Green

Hola :]
Respuesta: [Clase - 2] Botones y Navbars

Hola tengo una duda con ésta tarea, debemos hacer 3 botones para cada estilo, o elegir 1 estilo y diseñarle 3 botones? Me marea eso xD.
 

Rdio.

¿Volvera?
Respuesta: [Clase - 2] Botones y Navbars

Hola tengo una duda con ésta tarea, debemos hacer 3 botones para cada estilo, o elegir 1 estilo y diseñarle 3 botones? Me marea eso xD.
Puedes hacerlo como bien dije "1 botón con el estilo flat, 1 botón estilo ideal y 1 botón material". Oh según tu lo entiendas, la idea es entregar 3 botones respetando los estilos.
 
Estado
Cerrado para nuevas respuestas.
Arriba