La historia de un chico solitario: abril 2018

*Desarrollador
Desarrollo web
Programacion para contruir la aplicacion o sitio web
Cliente
Servidor
cliente-servidor

Cliente
HTML y CSS para creacion de paginas web
Para la programacion parte cliente javascript y DOM

Servidor
Construir El backend
Lenguajes de script PHP, ASP, ASP.NET, JSP, PERL y Coldfusion
para acceder a base de datos
diseño y desarrollo de una base de datos
-Seguridad

*Diseñador
Diseño web
Diseño visual
Elemento graficos de la pagina tipografia colores tamaños
adobe photoshop GIMP
Diseño sin codigo
Se representa HTML+CSS

Hay mas Desarrolladores web que Diseñadores
Salario de Desarrollador dobla al del Diseñador
Desarrollador logica, pensamiento linea y tecnica
Diseñador intuicion creativida imaginacion
Desarrollador necesita experiencia en programacion
Diseñador un titulo en bellas artes, producción en multi-media

Fases que se puede descomponer un sitio web, aun que los tiempo que se plasman en la siguiente imagen no son significativas

Prototipar una apliacacion web antes de implementarla

Arquitecto de informacion

Identificar los objetivos del proyecto
Las necesidades de los usuario
Especificar la funcionalidad y requerimientos de la aplicacion web
Define y diseña los sistemas de navegacion, organizacion, etiquetado y busqueda
prototipo de la aplicaicon web

Diagramacion y prototipado

Planos: Blueprint, diagramas de contenido o flujo o mapa web

Importante aprender

Vocabulario visual para describir arquitectura de informacion y diseño de interaccion de jesse james garret Acudo termino AJAX

www.nosolousabilidad.com/articulo/diagramacion.htm

Maquetas
Diagramas de presentacion, prototipo de baja fidelidad y de alta fidelidad Sketching, wireframes, prototipos funcionales, storyboard

NO incluir diseño grafico
NO clolres

Sketchin: cuando se usan bocetos con lapiz y papel
Usado para entrevistas iniciales con el cliente para comunicar conceptos, proponer alternativas o reuniones internas con equipo de trabajo
Es bueno para ir esquematizando las paginas y definiendo las diferentes zonas de la misma
Se recomienda el libro: Sketching user experiences

Wireframe
Mas elaborado incluye el inventariado del contenido, que contenido debe estar presente en cada pagina, los elementos como cabeceras, formularios, el etiquetado, estrategia de navegacion, explica el comportamiento de los elementos

Storyboard
secuencia wireframe
Simulan parte del diseño final

Se recomienda el libro Arquitectura de la informacion en el entornos web de Mario Perez montoro gutierrez

El equipo y el cliente se centra en el diseño de contenido e interaccion y no en el diseño visual
El cliente ve y comprende como sera la aplicacion, mucho mejor que si se ofrece descrita en un documento
Evita malentendidos entre el provedor y el cliente e incluso entre los propios miembros del equipo
Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad
es un complemento de gran valor en el analisis
El prototipo se modifica con facillidad y rapidez
Se evita modificaciones posteriores mucho mas costosas cuando la aplicacion ya se esta implementando
Se reduce costes y tiempos

tercer lugar

Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto
Se detecta y solucionan los problemas antes de comenzar su implementacion
El resultado son aplicaciones web mas faciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios

Beneficios de Prototipar

Menor tiempo de desarrollo posterior
Mejor calidad de desarrollo posterior
Mayor calidad del resultado final
Mayor satisfacion del cliente y el usuario final

Consejos

Sencilles y calidad
Halo en blanco y negro
Representa los tamaños y proporciones de los bloques de contenido
ten en cuenta las pautas de accesibilidad y usabilidad
y diseña para tus usuarios

Planos diagramas de contenido flujo,sirve para ver el flujo
Maquetas{Baja Fidelidad {Sketch, wireframes}, Alta Fidelidad {maquetas dinamicas}}

Herramientas para hacer prototipado

Gratis

Pencil_Project

Paga

Balsamic
Gifly

TIM invento

Html
Lengueaje de marcado o etiquedado
URL
HTTP

Evolucion del lenguaje html
SGML es el estandar ISO8879 con el que fue basado el HTML
XML Especificar las reglas de etiquetado
El SGML No cuenta con la etiqueta de insertad videos

1990-1993
No estaban estandarizadas
No disponia de las tablas y formularios
Creacion de documentos no validos a hoy en dia

HTML Plus novimbre 1993 que nunca se estandarizo
integraba tablas y formularios

Octubre 1994 se funda W3C
1995 HTML2.0 Fue un estandar
1997 HTML3.2
1999 Diciembre HTML4.01 La ultima revicion
Despues WC3 abandono el html y se concentro en el XML
XHTML1.1 = HTML4.01
Agosto2002 primer revicion XHTML Pero no triunfo debido a sus fuertes restricciones
2004 desarrollo un html mas cercano a la gente y se cres el HTML5 desarrollo termino en 2015

Informacion_HTML5
ActualizacionDe_HTML5.1

Etiquetado HTML
Se emplea para la estructura y contenido.
Liga_para_aprender_html
HTML5 esta formado por mas de 100 etiquetas

Elemento se compone por etiqueta inicial y final de cierre
<p class="importante"> Esto es un parrafo</p>

Las etiquetas se pueden anidar

<h1..6>
<p>
<title>
<body>
<strong>
<html>
<head>

Reglas de html
Las etiquetas siempre se tienen que cerrar
Los elemento anidados tienen que tener cierres correctos
Las etiquetas no les afecta si son minusculas o minusculas se recomienda en minusculas
Los valores de los atributos deben estar entrecerradas en comillas dobles o simples
La extension de la paginas web es html y htm

Listas en html
Hay 3 tipos de listas
No ordenadas ul
Ordenadas ol
Despliegue dl

<ul>

ul = unorder list
El orden de aparicion no es importante cada elemento li
li = list item
Los elementos se indican con simbolos (cisculos, cuadrados, etc)

<ol>

ol = ordered list
El orden de aparicion es importante
Cada elemento de la lista se define con li
Los elementos se indican con numeros o letras

<dl>

En html4/5 -start
type:(a,b,c,d . .., (i,ii,iii,iv,...))
En Html
-reserved
dl descripcion list
Se emplea para definir lista de terminos con ero o mas descripciones por casa termino
Cada termino de las lista se define con <dt>
Cada descripcion de un termino se define con <dd>
Los elementos no se indican con simbolos o letras si no con la sangria

Listas anidadas

Ejemplo de listas anidadas

<html>

<head>

<title> Internet</title>

</head>

<body>

<h1> Internet <h1>

<h2> Contenido </h2>

<ol>

<li>Principales protocolos </li>

<li>Formas de conectarse</li>

</ol>

<ol>

<li><h2></h2>

<ul>

<li><ul><li></li></ul></li>

<li><ul> <li></li> <li></li> </ul></li>

</ul>

</li>

<li><h2></h2> </li>

<dl>

<dt>Red telefonica <dd>La linea de telefono</dd></dt>

<dt>Red digital <dd>Una linea telefonica especial</dd></dt>

<dt> <dd></dd></dt>

</dl>

</ol>

</body>

</html>

Nodos son partes del hipertexto que le prove informacion al usuario

Enlaces o hipervinculos: Uniones o vinculos entre nodos

Anclajes puntos de activacion de los enlaces

Enlances intradocumental: un punto ene l mismo documento <a href ="#nombre"

Destino <a name="nombre">...</a>

Enlaces extradocumental: Enlaze a otro documento

-Enlace

-<a href="pagina.html#nombre">...</a>

-Destino

Consejos

Cuidado con nombre de ficheros se recomienda usar minusculas
Cuidado con caracteres extraños
Rutas fisicas de enlaces (Tener cuidado que no sean rutas al ordenador)

Problemas

&nbsp forma para insertar espacios en blanco

No-break space

<br> para saltos de linea

Referencia de caracteres

3 tipos de referencia de caracteres empieza con & termina ;

& -> &

" -> "

' -> '

< -> <

> -> >

Referencias de catacteres numericas decimales

&#nnnn; las n son numeros del 0 al 9

Referencias de caracteres numericas hexadecimales

&#XNNNN;

Como se escribe una pagina web

Vocabulario : las etiquetas

Prototipado de alto rendimiento

Edicion de imagenes: Adobephotoshop,

Para el diseño: Trabajar en capas, permita medir, editar imagenes
Software de dibujo vectorial: AdobeIlustrator, inkeskeip

Consejos
1 Inspiracion antes de empezar

Investigar en corrientes creativas
desarrolla la idea y conceptualidad
toma en cuenta la tematica de tu web las tendencias y tu publico
bebe de todas las fuentes posibles
potencia tu creatividad

2 Paleta basica de colores: Se recomienda una paleta de 3 colores

3 Busca recursos graficos

Imagenes y elementos graficos
tipografias
Iconos
el material del cliente
comprar en bancos de imagenes
utiliza los de los de licencia/gratuita
genera tus propios recursos
utilizar el material del cliente
*Ten en cuenta las imposiciones creativas como la imagen corporativa

4 Define las tipografias

Elegir el tipo de letra legible

5 Recopila el material de trabajo

mockup
informacion cliente
recursos
logos

5 Consejos para trabajar con tus dieños

1 Trabajar documentos por capas:

facilitara el trabajo y la organizacion
facilitara el proceso de diseño
facilitara la modificacion de cada elemento

agrupar en carpetas los elementos comunes a una misma zona para futuros cambios

copia de documento maestro

2 De general a aprticular

comienza por lo mas general
define las areas e estructura
las cajas de contenido
trabaja el diseño dentro de las areas y cajas que hayas definido

3 no abuses de

espacio
color
tipografia
decoracion excesiva
efectos complejos
cololocar muchos elementos

4 optimiza el tiempo

define las prioridades del diseño estableciendo plazos
no pierdas tiempo diseñando elementos irrelevantes
deseña segun tus posibilidades
ten en cuenta siempre la vision de conjunto y coherencia en el estilo
ten siemore en cuenta las necesidades de tu cliente

5 Organizacion: Preparar una carpeta organizada con los documentos del diseño

carpeta de trabajo: Con todo lo necesario ordenado
prototipo:
documento maestro: copia del docuemento
registra los cambios: registra los cambios relevantes en un documento
editables: trabajar siempre los las copias editables del los documentos
finales: una carpeta con los documentos finales para ser exportados a la web

La historia de un chico solitario

martes, 24 de abril de 2018

Programacion web Modulo 2

lunes, 23 de abril de 2018

Enlazes de Curso Programacion WEB