Diseño de papel a digital RESPONSIVO

Vista desde tablet:

Vista desde PC:

Vista desde teléfono:

Campos Cruz Jose Francisco 

De Leon Zunun Karla

Gomez Reynoso Alondra Sheccid

DISEÑO DE UNA WEB SEGÚN LOS REQUERIMIENTOS DEL CLIENTE.

1. Tienda de música: La mas sabrosa.

2. Quiero integración con redes sociales: Facebook, Twitter, Youtube, Instagram.

3. Formato de contacto.

4. Slider de contacto.

5. Teléfonos.

6. Cuatro productos mínimos con descripción.

Campos Cruz Jose Francisco

De León Zunun Karla

Gomez Reynoso Alondra Sheccid

Diferencia entre resolución de ppp.

PPP significa Puntos Por Pulgada. También se conoce por sus siglas en inglés, PPI (Pixels Per Inch) o DPI (Dots Per Inch). Es una unidad de medida de resolución de fotos o dispositivos digitales como, por ejemplo, impresoras y cámaras digitales.

Cuanto más elevado sea este número, mayor será la resolución. Por ejemplo, las impresoras láser suelen tener una resolución de un mínimo de 300 puntos por pulgada.

Diferencias entre formatos PNG y JPG.

PNG 

*Al aumentar su tamaño escalándolos, casi 
no pierden calidad, ni se ‘pixelean’. 

*Permite animación, aunque los navegadores 
no la reproducen. 

*Este formato utiliza un algoritmo de 
compresión sin pérdida, lo que significa 
que siempre se mantendrá la imagen en su 
calidad original sin importar cuántas veces se guarde. 














JPG

* Al aumentar su tamaño escalándolos, pierden calidad, se ‘pixelean’. 
*No acepta transparencia. 
*Menor peso de archivo, debido a que utiliza un algoritmo de compresión con pérdida, lo que significa que el nivel de compresión afecta directamente la calidad de la imagen y el tamaño de archivo. Por tanto, es muy utilizado en internet. 

Diseño de papel a Photoshop.

Pincel: Ocupe la herramienta PINCEL para crear la figura de la muñeca.

Combinar capas: Se ocupo para hacer cambios sin afectar el fondo.

Duplicar capas: Para no hacer muchas lineas duplique una capa y así se hicieron muchas.

Diferencias entre archivos gráficos.

Ventajas y desventajas.

JPG: Permite imágenes de hasta 16 millones de colores, permite una gran compresión con bastante buena calidad. Además es un formato universalmente aceptado, se puede ver desde cualquier navegador web y desde cualquier herramienta gráfica. Desventaja: mientras más se comprima la imagen, menos calidad tendrá.

PNG: Es un formato gráfico cada vez más usado en lugar de GIF. Se muestra correctamente en los navegadores, su uso está libre de derechos y permite una alta compresión así como una reproducción progresiva de imágenes con hasta 16,7 millones de colores. La principal desventaja es que PNG no permite crear pequeñas animaciones como el formato GIF. 

PSD: La principal ventaja de guardar una imagen de Photoshop como PSD es que conserva las capas en el documento. PSD conserva todas las capas de forma nativa, no tienes que decirle a Photoshop que no aplane la imagen, ya que lo hace automáticamente.

Primer diseño de interfaz web.

Aquí aprendimos a hacer una interfaz web para algún negocio o algo que nos interesara.

Herramientas básicas de photoshop.

----------------------------------------------------------------------------

Seleccionar: Esta herramienta se utiliza para seleccionar una parte de la imagen.

Lazo-Contorno: Nos permite eliminar la parte que nosotros deseemos sin afectar una parte de la imagen, por ejemplo podemos quitarle el fondo a una.

Gradiente: Nos permite de alguna manera degradar nuestra imagen o desenfocarla.

Tamaños: Se obtiene pulsando las teclas Ctrl+T y nos permite modificar el tamaño de nuestra imagen.

Texto: Con esta herramienta podemos añadir las palabras que deseemos y modificar su color, fuente y tamaño.

Capas: Sirve para tener ordenada nuestra imagen y saber que modificaciones le hemos hecho.

Desacoplar ventanas: Arrastrando imágenes fuera de la linea inicial es como la segunda imagen se "independiza" del programa y la podemos añadir a nuestra imagen principal tan solo arrastrándola a tal.

TEORÍA DEL COLOR.

Un buen diseño web depende en gran medida de los colores que utilizamos, hay que saber elegir un buen color que tenga referencia con el sitio web que estamos diseñando, y es muy importante saber combinar los distintos colores para no crear una imagen de la página muy agresiva para la vista. Para crear una pagina atractiva y sin sobresaltos visuales ni dañinos nos debemos fijar en los siguientes elementos:

• En la clase observamos el impacto emocional que tienen los colores en el ser humano:

• Azul: calma, honestidad, paz…
• Violeta: imaginación, intuición, meditación…
• Rojo: vitalidad, energía física, pasión…
• Naranja: creatividad, productividad, placer, optimismo…
• Amarillo: diversión, humor, intelecto, lógica…
• Verde: sociabilidad, balance, comunicación…
• Negro: seriedad, elegancia...

PROTOCOLO DE ARRANQUE

FORMATO DEL PROTOCOLO DE ARRANQUE

1. NOMBRE DE LA MATERIA: Desarrolla Aplicaciones Web

2. PRESENTACIÓN (Nombre del Docente): Gilberto Bahena Salas

3. INTEGRACIÓN DE ALUMNOS: El profesor realizará una dinámica de integración motivando la participación de los alumnos,

4. OBJETIVOS DEL CURSO:
Desarrollar interfaces.
Desarrollar páginas web estáticas.
Desarrollar páginas web dinámicas.


5. EXPECTATIVAS:
Me gustaría aprender a crear tanto aplicaciones como páginas web y lograr tener un mayor conocimiento en este tema.

6. BENEFICIOS DEL CURSO:
Aprender a desarrollar páginas web estáticas y dinámicas.
PLUS: Conseguir la venta real de nuestro producto.

7. REGLAS:
No teléfonos. 
Tolerancia de 10 minutos.
No pedir permisos para salir en caso urgente.
Sanción económica por faltar el respeto.

8. CRITERIOS DE EVALUACIÓN:
Declarativo       30%
Procedimiento  40%
Actitudinal       30%

Total                100%


9. CONTENIDO DEL PROGRAMA:
Desarrollar interfaces utilizando herramientas de diseño gráfico.
Desarrollo de páginas web estáticas.
Desarrollo de aplicaciones web dinámicas.

10. BIBLIOGRAFÍA:
No hay.

11. EXAMEN DIAGNÓSTICO:

DATOS

NOMBRE:     Campos Cruz José Francisco

MATERIA:    Desarrolla Aplicaciones Web

ESCUELA:    Centro de Bachillerato Tecnologico Industrial y de Servicios #166 

"Pablo Torres Burgos".

PROFESOR:   Bahena Salas Gilberto