CLASE N°1

7/17/2019 CLASE N°1

http://slidepdf.com/reader/full/clase-n1-568be59238dcf 1/7

2. UTILIZA MÁXIMO TRES TIPOSDE LETRAS:Usar varios tipos de letras difculta ladierenciación de los textos a lavisita. A la hora de elegir el tipo deletra te recomendamos que:

-Pertenezca a la misma amiliatipogrfca !"imes# $elvetica...%

- &ea una para el t'tulo ( otra para elcuerpo del texto

1. DALE ARMONÍA ALDISEÑO:)l texto tiene que acompa*ar( contri+uir al dise*o, nopuede ser un elementoaislado# sino integrado. )s poreso que tienes que elegir unatipogra'a que sea a'n a la

idea principal.

3. NO OLVIDES LASFUENTES TRADICIONALESnnovar con el tipo de letratiene ventaas# pero ha( quesa+er usarlas para tener un+uen dise*o. &i no ests deltodo seguro de qu/ tipo deletra utilizar es meor emplearuna tipogra'a tradicional. )sun /xito garantizado.

4. JUEGA CON EL TAMAÑO DE LATIPOGRAFÍA, SIN EXAGERARPara dierenciar unos t'tulos de otrospuedes ugar con los tama*os ( estilos,por eemplo: Arial 0arro1# 2ounded#3lac4... Usala tipogra'a 3old !las tradicionales5negritas5% para resaltar alg6nconcepto. Pero recuerda: nunca de+esa+usar de estos recursos o perdern

todo el sentido.. USA LETRAS LEGI!LES)l texto tiene que estar pensado para ser le'do# por ello de+es conseguirun texto cil de leer. "res puntos en los que tienes quecentrarte son: -T"#"$%: +usca un tama*o apropiado para el cuerpo del texto.

- C%&%': el texto de+econtrastar con el color de ondo.

- E()"*+%: dea que la miradadescanse en el texto.

RECOMENDACIONES SOBRE TIPOGRAF A WEB

F,-./-( G-.0'+*"(

7as amilias gen/ricas son: &eri# &ans-seri# 8ursive# 9antas( u

F,-./-( 1-R-(-'2"

)n 8&&# la propiedad

ont-amil( acepta

una lista de tipos deuente separadas porcoma para ser usadas( la primera uenteespecifcada es lauente preerida. &i lauente no seencuentra disponi+le#el navegador de ;e+intenta usar la

siguiente uente enlista. &i ninguna de lasuentes especifcadasse encuentra# elnavegador resultaramostrando la uente

F,-./-(S-3,'"(

)stn presentes en

una amplia gamade &. ( se usan en losdise*os 1e+ paraaumentar lapro+a+ilidad de que

TIPOGRAFÍA QUE SE UTILIZA EN DISEÑO WEB

E(/"( (%.:

FONT-FAMILY:

- Helvetica

- Nimbus Sans L.

- Liberation Sans

- Arial

E(/"( (%.:

SERIF :

- Bookman Old Style

- Garamond

- Georgia

4 MS S-'+5

4 Palatino Linotype

-ψµ ολ

!&(m+olic%

- Times New Roman

7/17/2019 CLASE N°1


T E O R Í A D E L C O L O R

Grupo de reglas básicas en la

mezcla de colores para conseguir

el efecto deseado combinando

colores de luz o pigmento.

Los colores en el Diseo We!

0A2A0<A

El color naranja

puede ayudarte a

dar una impresión

amigable y

atractiva, de

bienestar y

energía para tu

á ina web.

AA277=El amarillo brillante

crea una sensación de

felicidad y

entusiasmo. Amarillos

oscuros y dorados

pueden lucir antiguos

y usarse en diseos

web donde se busca

COLORES CÁLIDOS

COLORES FRÍOS

VERDEEn el diseo web, elverde tiene un efectoarmonizador o debalance, es muyestable. Esapropiado para

diseosrelacionados confortuna, estabilidad,renovación ynaturaleza.

AZULEn el diseo web el azul!ue uses tendrá un granimpacto en cómo tusdiseos son percibidos.Azules claros sonrelajados, los brillantes

refrescantes. "os másoscuros son e#celentespara sitios corporativos odiseos donde la fuerza yconfianza son importantes.

=2A>=En el diseo, morados

oscuros dan una

sensación de lujo,

refinamiento y realeza,

los medios y ligerosbrindan una sensación

de creatividad, y los

claros son más suaves y

se les relaciona con

primavera y romance.

COLORES NEUTROS

NEGRO

En el diseo web el negro suele ser usadopara las tipografías y otras partes funcionales

debido a su neutralidad. El negro puede lograrfácilmente una sensación de sofisticación ymisterio en un diseo de un sitio web. $ueleser usado más en diseos vanguardistas, a lapar en diseos muy elegantes.

BLANCO El blanco es considerado un fondo neutral !uepermite a los otros colores tener mayorparticipación. %uede ayudar al diseo amantener limpieza y simplicidad, por eso espopular en diseos minimalistas. %uede serusado tanto para retratar invierno o verano,dependiendo de los otros colores !ue lerodeen.

ROJO

El color rojo puede

ayudarte a generarun mensaje deseriedad en eldiseo de un sitio

web. Aun!ue su usoe#cesivo puederesultar agresivo.

7/17/2019 CLASE N°1


"ERRAMIENTAS DE DESARROLLO WEB DE DESARROLLO WEB DE LOS NA#EGADORES

"os desarrolladores &an creado una gran cantidad de &erramientas !ue sirven para agilizarpara agilizar y optimizarel proceso general de desarrollo, siempre con la idea de lograr la mejor e#periencia de usuario posible.

C6'%#- D-2-&%)-'(T%%&(

Esta &erramienta contiene una completa suite dediversos instrumentos. %uede editar el '()*+)"- /$$ en tiempo real, depurar 0avascriptpaso a paso, realizar un análisis de rendimiento deprofundidad, incluso agregar una terminal.

El editor '() /$$ esuna &erramienta muy potente, lo !ue le permiteproporcionar retroalimentación en tiempo real de sue!uipo. "a página web oficial y el canal dedesarrolladores de Google Youtube ambos sonminas de oro de información. %or ejemplo, la secciónsobre API de línea de comandos contienecomandos muy 1tiles. ambi2n puedes consultar unagran cantidad de tutoriales en este sentidoen HTML5 oc!s.

G',/

Grunt es una librería 0ava$cript!ue nos permite configurartareas automáticas y asía&orrarnos tiempo en nuestrodesarrollo y despliegue deaplicaciones webs. /on unsimple fic&ero 0$ !uellamaremos Gruntfile, indicamos

las tareas !ue !ueremosautomatizar con un simplecomando y las escribimos en 2len formato 0$(3.

L+2-R-&%"1

Li"eeload monitoriza cambios en el sistema de arc&ivosde forma !ue cada vez !ue guardas un arc&ivo elnavegador se actualiza para poder ver los cambios en lapágina web abierta de forma instantánea y sin necesidadde tener !ue llevar a cabo de forma manual un 4refres&5.6ncluso mejor, Li"eeload aplica los cambios /$$ sinrecargar la página y recarga automáticamente la páginacuando cambia el +)".Esta aplicación de escritorio con soporte para los

principales navegadores web está disponible por elmomento de forma 1nica para usuarios de sistemas )ac($ 7 89.: $now "eopard o posterior. Además tambi2n esposible acceder a dos e#tensiones dirigidas a losnavegadores #irefo$ y %&rome.

"as tres &erramientas para desarrollo web más imprescindibles son;

7/17/2019 CLASE N°1


A%%'(I)ILI*A* +(A)ILI*A*

ACCESIBILIDAD $ ACCESIBILIDAD WEB

rata de las recomendaciones !ue se deben tener en cuenta al

disear un sitio web. $iempre, en lo referente a la facilidad de

acceso para los usuarios.

$e trata de !ue un sitio web sea fácilmente navegable, es decir,

!ue un usuario no se pierda en los contenidos, !ue encuentre

fácilmente los men1s y !ue llegue a cumplir los objetivos del

sitio web; comprar, descargar, subscribirse, etc.

A diferencia de la accesibilidad no e#iste una &erramienta !ue

nos valide la usabilidad. Esto &a ser testeado por los propios

usuarios y serán ellos los !ue valoren la usabilidad de la web.

rata de las normas !ue se deben cumplir al disear un sitio

web. $iempre, en lo referente al correcto acceso a los

contenidos, desde los diferentes dispositivos *móviles, tablets,

%/<s, sistemas operativos, navegadores y dispositivos de

lectura, !ue ayudan a personas con minusvalías-.

,I-'L'( *' A%%'(I)ILI*A*.

8.= 3ivel de Accesibilidad A *básico-

>.= 3ivel de Accesibilidad AA *medio-

?.= 3ivel de Accesibilidad AAA *alto-

t e n e r

e f e c t o s m á s ó p t i m o s e s u s a r p a l a b r a s c l a v e ! u e d e s c r i b a n c l a r a m e n t e t u e s p a c i o v i r t u a l y ! u e n o & a y a n s i d o e l e g i d a s p o r t a n t o s s i t i o s w e b . 4 0 * i s t r i b

o t r o s b u s c a d o r e s , p a r a ! u e n u e s t r o s i t i o l l e g u e a m á s c l i e n t e s , l o c u a l m e j o r a n u e s t r o b r a n d i n g y n o s g e n e r 2 m á s v i s i t a s ! u e n o s p e r m i t a n l l e g a r a t o d a l a a u d i e n c i a

S E M + N T I C A W E B S E O , P O S I C I O N A M I E N T O W E B -

7/17/2019 CLASE N°1


c e n t r a r á a n t e t o d o a i n t e n t a r c o m p r e n d e r ! u e s i g n i f i c a e n e l l e n g u a j e ! u e a l g o t e n g a s i g n i f i c a d o y d e ! u 2 m a n e r a p u e d e g e n e r a r s e e l m i s m o . E # i s t i e n d o a s í u n a a m pl

L * W e ! . / 0 ) * ' ! i 1 n l l * ' * 2 * W e ! S e ' 3

n ) i c * &

E l i n t e r n e t m e d i a n t e e s t o s 4 a g e n t e s 5 u s a r a n l o s d a t o s p a r a e # t r a e r i n f o r m a c i ó n a d i c i o n a l y f i l t r a r l a , d á n d o n o s r e s u l t a d o s a d e c u a d o

E s d e c i r , s e t r a t a d e t r a b a j a r c o n s o f t w a r e c a p a z d e 4 e n t e n d e r 5 e i n t e r p r e t a r e l l e n g u a j e n a t u r a l c o m o s i s e t r a t a s e d e & u m a n o s .

', 'L *I('89B'(/C%ED y #mlD son dos eti!uetas

!ue indican !u2 tipo de documento estamos

generando y a !u2 normas se ajusta.Eti

!uetas

' e f i n e e l i n i c i o d e l a c a b e c e r a . < T I T L E > : 6 n i c i a e l t í t u l o d e l d o c u m e n t o .

< / T I T L E > : @ i n d e l t í t u l o d e l d o c u m e n t o . < / H E A D > : ' e f i n e e l f i

Es la estructura básica de una página web

pero &ec&a en +)"

', %:*IG9

ESTRUCTURA DE UNA PAGINA WEB

7/17/2019 CLASE N°1


CONTENEDOR

Están todos los elementos del sitioF

módulos, contenidos, imágenes,etc y puede tener un anc&o fijoF el

anc&o será igual para todos los

navegadores y dispositivos.

LOGOTIPO

Es la imagen de la empresa, !ue

identificará la marca en todo el

sitio.

NAVEGADOR iene un men1 !ue &orizontal, !ue

siempre tiene a mano lo más

importante del sitio web.

CONTENIDO

Es la información !ue presenta la

página web.

FOOTER

Esta al final dejamos a&í el

/opyrig&t y men1s secundarios. $eusa más para incluir información de

redes sociales, direcciones,

noticias.

7/17/2019 CLASE N°1


EN LENGUAJE DEL SERVIDOR:

Estas se &acen en lenguaje %+%, uby, A$%, entre otros.%ara desarrollar esta clase de páginas tambi2n esnecesario tener conocimientos avanzados sobre ellenguaje a utilizar. $on ideales para interactuar con losusuarios y para el área de marHeting.

EN FLASH: Estas páginas se construyen utilizando el software@las&, de Adobe, !ue permite la realización deanimaciones, efectos, sonidos y movimientos. %ara !uelos usuarios puedan visualizarlas, es necesario contarcon los plug=in re!ueridos, las páginas &ec&as con @las&son muy pesadas *demoran en cargar-.

EN HTML Estas páginas están construidas con lenguaje +)". Indefecto de estas páginas es !ue son estáticas, ademásofrecen muy poco, por lo !ue no son recomendables paraventas y marHeting. $on muy fáciles de construir, conconocimientos básicos de diseo, alcanza.

PGINA !EB ESTTICAEste tipo de páginas web están compuestas porarc&ivos !ue contienen código +)", es por medio deeste !ue se pueden mostrar las imágenes, te#tos,videos y todos a!uellos contenidos !ue componen a lapágina en sí. "os arc&ivos !ue constituyen a la página web son almacenados en el servidor de +osting, cuyoformato es tambi2n en +)". "as páginas web pueden

ser editadas por medio de programas como el'reamweaver.

PGINA !EB DINMICA

En estas páginas los contenidos son modificadoscontinuamente ya !ue esto !ueda en manos de!uienes las visitan. "a información de estas páginasestá guardada en bases de datos de las cuales losusuarios e#traen a!uello !ue les interese. Estas

páginas se caracterizan entonces por ser sus usuarios!uienes modifican el diseo y los contenidos, se laspuede actualizar muy fácilmente, ya !ue no esnecesario ingresar al servidor para esto.

('G;, (+

T'%,9L9G<A.

CLASIFICACI4N DE

PAGINAS WEB

('G;, (+

%9,(T+%%I:,.

Documents

CLASE N°1