OPEN 2019

Click para ampliar / INSCRIBITE ACA

Relevo final caso x caso. Finale.

Bien. Veamos lo que tenemos:
EN GENERAL. Ok.
Hay  detalles aùn, los detallo en un video alumno x alumno o grupal.
Video del cual les mandarè link... algo voy aprendiendo a pesar mio.

Recuerden que para rendir:
- tienen que presentar informe corregido
- carpeta capturas en jpg a tamaño real (TRES, 3) pantallas.
- folder con el sitio armado. TRES, (3) pàginas, funcionando.

Previo al examen coordinamos dia para consulta. (NO se presenten sin esa consulta para revisar dudas y màs que nada el pràctico)

Luego >>> Rinden el día acordado.

MATTOS:
Presentaciòn informe: Adecuado
Items requeridos: Falto folder con las capturas de pantalla a tamaño real, en jpg.. etc etc. (ver requerimientos de entrega en el blog.. aquí).
Falto ficha de análisis. Ver en el blog o te dejo link de ficha aqui.
Hay  detalles aùn, los detallo en un video .. etc etc.

estado REGULAR

PENSALFINE:
Presentaciòn informe: Adecuado, hay cosas que arreglar. (en el video) Tratá en los informes usar UN tamaño de tìtulo , UNO de subtìtulo y UN cuerpo en general para texto y en caso de bajaditas de texto o detalles UN estilo màs chico accesorio. Y la relaciòn entre los cuerpos tipogràficos tambièn cuidarlos.
Items requeridos: Falto folder con las capturas de pantalla a tamaño real, en jpg.. etc etc. (ver requerimientos de entrega en el blog.. aquí).
El  modelo persona debias dejar SOLO la ficha persona y no la pagina completa del INTI que explica cómo hacer persona
Hay  detalles aùn, los detallo en un video .. etc etc.

estado REGULAR

JUAIRE:

Presentaciòn informe: Adecuado
Items requeridos: Falto folder con las capturas de pantalla a tamaño real, en jpg.. etc etc. (ver requerimientos de entrega en el blog.. aquí).

UNA COSA ; en vez de productos, te pediria hagas una de las paginas de resultado de, por ejemplo, Pirelli. Hacè el wireframe y mockup de ESA pagina. (estas que planteaste dejalas en el infome, pero hace por favor eso que digo. La de productos en realidad deberia ser un listado lateral con la primer marca abierta en vez de una "pagina de logos" que no dice nada... Lo vemos en la consulta.

Hay  detalles aùn, pero los menos repito.

estado REGULAR

GUERRERO:
Presentaciòn informe: Adecuado, le daria un poquito mas de.. estilo. Al diseño
Items requeridos: Falto folder con las capturas de pantalla a tamaño real, en jpg.. etc etc. (ver requerimientos de entrega en el blog.. aquí).
Faltaron mockups de dos pantallas (habia solo una). Un poco desordenado el paginado, hay cosas mezcladas. El perfil persona lo ordenaria un poco más en base a alguno de los modelos que les pase.
Falto ficha de análisis y ordenar DOS ejemplos de competencia.. o no lo entendí. Ver en el blog o te dejo link de ficha aqui.
Hay  detalles aùn, los detallo en un video .. etc etc.

estado REGULAR

CASNATTI:
En espera de información. Igual .. creo se puede leer lo último dicho en la entrega anterior, mientras reviso lo ULTIMO que enviaste

estado :? (vacío hasta nuevo aviso).



Nada más Reviso a conciencia en un video, les mando, y nos vemos en la consulta.
Muchas gracias la paciencia. Disfruten de sus vacaciones y sigan con sus vidas.
Saludos M.

Varios + VIE14 Jun

Primero los files prometidos... tarde pero acá están.
Ficha análisis sitios multimedia BAJAR / editable


EJEMPLOS de informes 10 puntos!:
Informe Berardelli (it) VER
Informe Guidoboni (it) VER

CLASE VIERNES.14


Revisamos trabajos de:
Pensalfine (segunda revisión al 80% OK, los cambios ya los anotaste, corregir y seguir con la etapa que sigue)
Guerrero (segunda revisión al 87%, Muy bien, los cambios aplicalos y segui con la etapa siguiente).
Juaire: A REVISAR
González: A REVISAR
Casnatti: Problemas de máquina. Debe enviar aún lo del viernes. A REVISAR.

Empezamos a ver formularios, con 4 alumnos, luego quedaron 2, y Guerrero terminó usando y probando un formulario. También se explicó el uso de un servidor local virtual (que vino a guisa del uso de un script de PHP, tal vez si da el tiempo lo reveamos... si hay gente...):

Acá les pondré lo que hay que entregar el VIERNES 21 , sí o si pues ya estoy como ven evaluando lo hecho y presentado, considerando para regularizar la materia (bajada a libreta de regularidad). Aparte de los temas que veremos para ir cerrando el programa que deben completar y rendir a fin de año.

Saludos.

VIERNES 21. Cerrando filas...

Hoy siete

Retomando la posta del viernes pasado:

De práctica teoría veremos
 Carga de fuentes autoalojadas.Pseudo clases.(info)  Usar listas como menúes. Menúes verticales y horizontales. (info)Planificación y alternativas para tipos de navegación. Menúes desplegables con CSS. (un ejemplo)
Spritesheets (generar menus o items con UNA sola imagen). (ver herramienta)
Condicionales para diferentes navegadores: Hojas de estilo condicionales.(IE times.. asi se hacia) (enfoque moderno) iframes. Uso. Aplicación de contenidos de terceras partes. Embedding. (info)

El que llegue temprano le reviso el informe (que a esta altura debe estar entrando en la fase II, la semana que viene hasta el miércoles tienen para ir enviándome.

Alla vamos...

(and a while after...)

Acá les dejo el archivo de Thimble que estuvimos tocando:

DESCARGAR.

En el vimos:
menues horizontales verticales (listamatic)
incluir fuentes auto-hosteadas (del fontsquirrel)
trabajo con pseudo-clases (hover y first-child y esas yerbas..)
jugamos con un spritesheet generado con el sprite generator online, y el Fireworks.

Entrega Parte uno ESTADO A LA FECHA. Ausencia general.

Pensalfine: Muy bien encarado, hay detalles los vemos en clase.
Mattos: Excelente, muy cuidado el diseño , también hay detalles los vemos en clase.
Casnatti: Ok, tarde la entrega. Arreglá el tema del árbol de contenidos, usa una ficha de persona más elaborada (ver aquí), arreglá las capturas, enviá de nuevo en PDF.

Resto.
no he visto informes, ni avances, ni consulta.
PRIMER ENTREGA de material: FAIL.

Clase del 31/5____ Asistió Casnatti solamente. Esperé al resto del grupo de 1430 a 1630. por lo que doy por perdido el día. No hay problema, lo que debíamos ver hoy lo meto con calzador en las 3 (tres) clases que quedan.

Detalle de lo que resta entonces (en rojo lo que debíamos ver hoy):

UNIDAD 3. CSS Avanzado

Layout y navegación

Positioning tipos. Z-index y uso. Display opciones. Floats y modelo de columnas en CSS. Crear un layout en DW con XHTML y CSS, Partes y consideraciones básicas.
Carga de webfonts a través de GoogleFonts. Carga de fuentes autoalojadas.

Pseudo clases. Usar listas como menúes. Menúes verticales y horizontales.

Planificación y alternativas para tipos de navegación. Menúes desplegables con CSS.
Condicionales para diferentes navegadores: Hojas de estilo condicionales.

iframes. Uso. Aplicación de contenidos de terceras partes. Embedding.

UNIDAD 4: Forms

Interacción de entrada

Elemento Form. Uso y funcionamiento de un formulario. GET,  POST y action. Etiquetas de entrada datos (inputs), checkboxes, radio button Select, text tareas, botones envío.

Crear un formulario tipo: métodos. Aplicaciones de los formularios en sitios web e importancia en la estructura general.  Estilar un formulario. Dificultades emergentes con los controles de formulario y uso de JS para customización de campos.

UNIDAD 5: Js-Jquery / Intro a HTML5/CSS3

Comportamientos. Nuevas posibilidades.

El modelo de documento DOM (Document object model) y la estructura de una página. Javascript base y su relación con el DOM: sus posibilidades de interacción.

Colocación de scripts en una página y cuidados de uso. Incorporar un JS a un sitio para diferentes operaciones (slider de fotos, smooth scroll y otros ejemplos).

Trabajo con multimedia. Colocar sonido y video con las nuevas etiquetas.
Ejercicio con CANVAS básico. Aplicación de SVG files.

Responsive. Concepto y uso. Los tres componentes del diseño responsive (media queries, Grillas fluídas e imágenes flexibles) (fuente) Uso de un framework sencillo para hacer el layout (simple o boostrap). Consideraciones de prototipado.

Ok... bueno pasemos a las tareas:
En la semana que viene, más tardar MIERCOLES me envían la segunda parte del informe.

El informe (aparte del armado efectivo del HTML CSS) es parte de la práctica integral. Si faltan a entregar el mismo, piensen que hay tres etapas para entregar de bajada de regularidad, y ya han perdido (algunos) la primera de ellas. Quedan dos. Por eso les avisé por correo que se pongan a trabajar o consulten para no perder la regularidad.

Y les dejaré acá un ejercicio que deben traer resuelto (con fallas o no, no hay problema) para el viernes que viene. La idea es que lo realicen, como práctica, y aquellas cosas que les cuesten me las traen para ver en clase así las resolvemos y lo ven todos.

Nada más. Saludo, siendo las 4:55 me retiro. Nos vemos.
Mauro.

POSITION + Z INDEX+ FLOATS

Para los ejercicios de LAYOUT:

Pokemones (base) PSD
background base

EJEMPLO DE CABECERA en html (con Photoshop, tinypng, reset, y W3Schools)
Codigo en el Etherpad.

DESCARGAR

MIERCOLES:2357hs

Informes enviados = 0
Jueves, espero novedades.
Viernes, hago informe.
Saludo Mauro.

Inicio de informe. Datos UTILES...

Hola gente.
Aquí datos útiles para irse guiando con el informe.
El práctico/proyecto es, les recuerdo:
REDISEÑO DE SITIO WEB.

Tiene dos partes, informe (PDF) y sitio (rar, carpeta con archivos).

Parte INFORME: Aqui les coloco material para organizar la entrega:
Como ayuda va el diagrama.(click para ampliar el grafo) tienen los pasos y cosas a resolver en el informe:
Abajo tienen las referencias de algunas herramientas que pueden utilizar para hacer ciertas partes (las que tienen numerito).

SiteMaps diagrams: (1)https://writemaps.com/
https://creately.com/diagram-type/site-map

Recursos de wireframes: (2)
Mockups (https://moqups.com/)
Balsamic Mockups (https://balsamiq.com/products/mockups/)
MockingBird (https://gomockingbird.com)

Mockups: Photoshop / Illustrator / Fireworks/ Sketch (mac) (4)

Ver pantallas en tamaño real: https://www.previewdump.com/


Como referencia a lo de arriba, y para que organicen lo que tienen que hacer, recuerden usar esta referencia de abajo para presentar el PDF:

donde están representadas las etapas como
DISEÑO DE INFORMACIÓN, INTERACCIÓN y PRESENTACIÓN.

Hasta hoy (VIE 17 Mayo)... ya deberían tener listo la etapa en ROJO, e iniciada al menos la etapa en NARANJA.
En clase se explicaron ambas. Tal vez algunos faltaron pero en fin , hare un resumen si da el tiempo hoy al FINAL de clase, no antes.
Repito lo que le dije a González.

---

NO SE REQUIERE QUE HOY ESTE PERFECTO PERO SI COMENZADO.

---

Por las dudas... un video que explica lo de arriba. Explica TODO el proceso, pero de nuevo, con lo inicial en rojo ya me quedo conforme que están en ruta.

(veo que a algunos les quedaron dudas. En el olvido. puede que ayude)



ARMADO EJEMPLO:

Ayuda con sitios

Este sitio remplaza al directorio de sitios argentinos (mayormente feítos) donde pueden sacar el link.
Elijan a gusto o por tema. Esta catalogado para que encuentren su próxima víctima de lifting)
Saludos
https://www.sitiosargentina.com.ar/

Listados de temas para el práctico integrador

Pensalfine : http://morenanaturalsoap.freeservers.com

Guerrero: http://www.letoileescuela.com/

Casnati: https://liserarsa.com.ar
Juaire: http://www.neumaticosjose.com.ar
González: Thornford.com

Por favor los *** mandarme links ANTES del viernes graciasaaaaaaass..

Cumplido el plazo. Asignados los temas a todos los alumnos (les dí tiempo de sobra...)
Nos vemos mañana.

Resumen clase 2:

Acá resumen...

Iniciando

Comenzamos el camino. Por lo pronto, abrimos (una plataforma de votación y conocimos sus dudas acerca de la materia) .Y seguimos...

Un saludo y.. comenzamos. Espero les sirva (y guste, a lo mejor)
M.

UPDATE:
Ya le avisé a Josefina para ver este viernes si me dan aula para el "adelanting hours project".
Me dirán.

Intertanto....
ACA el resumen hablado de lo visto:

Y estoy esperando me manden los 3 sitios "no muy bonitos de ver", recuerden que no sea ni
-BLOG
-ECOMMERCE
-DIARIOS
-Sitios hechos con WordPress.

Para ver si esta hecho con WordPress: a veces dice en el Footer (en el pie del sitio) "hecho con WP o Powered by WP"... Sino tranquilos, me mandan los links y directamente les digo.
Lo de saber con que está hecho un sitio lo iremos viendo. Pero nada, es útil que lo sepan.

Saludos Mauro.

Mesa Marzo 2019

Hola estimados / hadas
Febrero pasó rápidamente, nos queda la mesa de Marzo, concretamente el LUN 11 a las 1630hs.
Para ello daré consulta, probablemente Viernes a la tarde.

Voy avisando y concreto este aviso durante lo que resta del día. Si van a rendir, los espero entonces por la UM, en la parte de laboratorios.
Saludos y gracias.
m a u r o

Starting machines (consulta)

Hola gente.
La mesa es el 3 de AGOSTO.
A partir de hoy LUNES coordinamos para ver que fecha puede ser la consulta. Llamo en la mañana a Mauricio para consultar disponibilidad del aula de LAB para no superponernos con otra mesa.
Y les aviso por aca.

Saludo. Mauro.

Como unificar varios css en uno solo.

Hey you..

Salen en foto ahora!! Jeje.

Bueno en otro orden de cosas paso por la UM a dejar la regularidad desde la 16 a la 1750.
Estàn todos regulares, by the way.


Luego me regreso.
Por si alguno de Uds quiera consultar algo de HTML y CSS, estaré.


La consulta de la mesa de AGOSTO será a partir del 23 de julio, que abre la Facultad. Obviamente cercano a esa fecha me avisan y vamos arreglando una fecha/hora para la consulta. igual por favor me avisan QUIEN RENDIRA para mandarles detalle de correcciones finas del informe.


Por lo demás les dejo una buenas vacaciones y nos veremos en la mesa o vaya a saber dónde...

Un gusto ha sido
Mauro.

Estado y conclusiones finales

(Click para ampliar la imagen)

Hola gente. Tiempo de conclusiones.

a) Felicito al grupo en general. Muy buen comportamiento y aguante dado las largas horas de entrenamiento (vean el lado bueno... están fogueados para entrenamientos duros frente a computadora :)

b) En especial felicito al grupo italiano (Berardelli, Marchioni, Guidoboni). Comportamiento ejemplar, buena disposición y excelente nivel de presentación de los trabajos. Si necesitan una carta para la universidad que consigne esto, me la piden y se las paso antes que se vayan. Muy conformes con ustedes por mi parte, hasta ahora lo mejor de alumnos de intercambio en lo que va de la carrera.

c) Em... bueno para cerrar el tema de entregas y cierre de regularidad que debo entregar más tardar la semana que viene: Por favor vean la foto del pizarrón de la sesión maratónica que hicimos de correcciones.
- me arreglan el informe, (si pueden hacer las capturas de las pantallas finales MUCHO MEJOR!) y me las suben de vuelta a un drive o un dropbox asi me bajo todo.

Acá abajo pondré un listado más bonito con el actualizado de lo que me manden para sólo poner lo que les falte entregar y algún que otro comentario... ya los aburri en extenso el viernes uno por uno, pero espero les haya servido la corrección grupal (por favor por correo si les pareció una pérdida de tiempo o una movida errónea me dicen si??) Todas sugerencia bienvenida.

d) Yo: Personalmente no llegué a todo lo que les quería explicar, y me demoré de más varias veces con el mismo tema. Espero mejorar eso el año que viene, pero en fin los mates, los scones - chipás- brownies, el recreo de 20 min x 5 horas de clase, y el excelente comportamiento del grupo en general la verdad compensa lo que no pude lograr. Igual mis disculpas por lo que no pude cubrir de uso del DW y del código... igual creo tienen una buena base para seguir indagando por su cuenta, y meterse, si les pinta, en el mundo del diseño web.
Respecto a lo que deben presentar para el final....




e) ... les haré una serie de "recordatorios" de procedimientos para que puedan encarar el armado, y recuerden me pueden mandar los pasos intermedios o problemas por correo. Trataré de cubrir lo más que pueda para que logren armar el sitio lo más parecido posible a lo que armaron.

Organizar entrega

Aqui les coloco material para organizar la entrega:
en el diagrama.(click para ampliar el grafo) tienen los pasos y cosas a resolver en el informe:
Abajo tienen las referencias de algunas herramientas que pueden utilizar para hacer ciertas partes (las que tienen numerito).

SiteMaps diagrams: (1)https://writemaps.com/
https://creately.com/diagram-type/site-map

Recursos de wireframes: (2)
Mockups (https://moqups.com/)
Balsamic Mockups (https://balsamiq.com/products/mockups/)
MockingBird (https://gomockingbird.com)

Mockups: Photoshop / Illustrator / Fireworks/ Sketch (mac) (4)

StyleTiles: styletil.es/ (3)

Revisión de Mockups/Pantallas: https://conceptboard.com/

Ver pantallas en tamaño real: https://www.previewdump.com/

Revisión de código vivo/ ejemplos/ problemas de HTML CSS:   (5)
Thimble https://thimble.mozilla.org/es/
CodePen https://codepen.io/
Jsfiddle https://jsfiddle.net/

Atascado con el HTML/CSS? Codeademy : HTML y CSS básico (5)

Como referencia a lo de arriba, y para que organicen lo que tienen que hacer, recuerden usar esta referencia de abajo para presentar el PDF:



donde están representadas las etapas como
DISEÑO DE INFORMACIÓN, INTERACCIÓN y PRESENTACIÓN.
Se las dejo también acá por si la perdieron de vista.

Y un video que explica lo de arriba
(veo que a algunos les quedaron dudas. En el olvido. puede que ayude)

Mayo

Hola gente.
Les dejo acá algún que otro resumen de lo visto.
Antes que nada, un mensaje de los alumnos a los chicos de intercambio:

I compagni mostrano la loro opinione sulla tua assenza.(clicca per ingrandire)

Bah nada broma. Just kidding. Los esperamos, pero no descuiden lo que deben hacer para cuando nos veamos...
Por lo pronto, lo que SI deben iniciar, es el informe.
Para refrescarles la memoria... es en PDF, y acompaña a la entrega del sitio en sí (el folder con los css, htmls e imágenes).
Recuerden que para bajar la regularidad (firma de librestas a fin de cuatrimestre), deben TENER entregado este informe.
Para rendir: llevar el sitio en html (en un pendrive) para comprobar el funcionamiento, y consultar acerca de algunas cosas de teoría vistas en clase.

La clase pasada estuvimos viendo estructuras con CSS y HTML. Lo que hicimos esta en este sitio (descomprimir rar). AQUI.

Para iniciar, Uds ya a esta altura han:

- elegido un sitio para rediseñar
- elegido dos competencias (sitios) que hayan elegido por buen diseño, organización de la información, interacción, multimedia, etc. En lo posible de temática similar al tema elegido.

Bien ahora deben iniciar el informe, que en su primera parte consta de:

Layout del cursado, (generico)

UNIDAD 1: XHTML

Estructura

El lenguaje html. Partes. Elementos de una etiqueta.
Trabajo en DW. Entorno de trabajo Code – Split – Design. Consideraciones sobre tipos de archivo.
Uso de browser como testeador de resultados. Ver código fuente / Inspector  en Chrome/Firefox
Elementos base texto: P H1 a H6 blockquote ... Elementos de bloque. (block)

Strong/ Em/ br. Elementos de línea (inline).

Características base de funcionamiento de un documento html.
Links, anchors, listas. Uso de Thimble y Xrays de Mozilla como editores auxiliares y de aprendizaje.

Validación usando la W3.Org.
HTML5 Cambios importantes en sintaxis. Nuevos elementos (tags)

UNIDAD 2: CSS Básico

Aspecto

Estilos en cascada. Concepto. Partes. Anatomía de un estilo o regla. Tipos de selectores: tags, clases, Id´s  y estilos avanzados.

Propiedades generales de texto. Propiedades de cajas. Modelo de caja (box model). Herencia y estilos de browser vs. Estilos de autor.
Hojas de estilo inline, internas y externas. Poder de un estilo en función de cómo se lo invoca. Especificidad.

Agrupar estilos. Reglas de escritura de CSS para mejor aprovechamiento.
CSS3// Diferencias con CSS2. Nuevas propiedades. Compatibilidad con browsers anteriores (polyfills)

UNIDAD 3. CSS Avanzado

Layout y navegación

Positioning tipos. Z-index y uso. Display opciones. Floats y modelo de columnas en CSS. Crear un layout en DW con XHTML y CSS, Partes y consideraciones básicas.

Pseudo clases. Usar listas como menúes. Menúes verticales y horizontales.

Planificación y alternativas para tipos de navegación. Menúes desplegables con CSS.
Condicionales para diferentes navegadores: Hojas de estilo condicionales.

UNIDAD 4: Forms

Interacción de entrada

Elemento Form. Uso y funcionamiento de un formulario. GET,  POST y action. Etiquetas de entrada datos (inputs), checkboxes, radio button Select, text tareas, botones envío.

Crear un formulario tipo: métodos. Aplicaciones de los formularios en sitios web e importancia en la estructura general.  Estilar un formulario. Dificultades emergentes con los controles de formulario y uso de JS para customización de campos.

UNIDAD 5: Js-Jquery / Intro a HTML5/CSS3

Comportamientos. Nuevas posibilidades.

El modelo de documento DOM (Document object model) y la estructura de una página. Javascript base y su relación con el DOM: sus posibilidades de interacción.

Colocación de scripts en una página y cuidados de uso. Incorporar un JS a un sitio para diferentes operaciones (slider de fotos, smooth scroll y otros ejemplos).

Bienvenidos a CM2018

Hola gente.
Soy Mauro Ramón, quien tratará incorporen conocimientos de HTML/CSS y diseño orientado a pantalla - en este caso, web - durante este cuatrimestre.
Son clases largas, pero espero jugosas. Y se trabaja  en computadora una buena parte del tiempo, aparte de ir desarrollando (de a poco) un proyecto final con el cual logran la regularidad al final del cursado.
De esto y otras cosas hablaremos hoy.. Un saludo y ojalá les aproveche lo que pueda enseñarles.
Saludo
M.

POSTCLASE:
Resumen en audio de lo que vimos (muyy resumido)

Consulta mesa febrero. VIE16, 9:30 horas

Hola la consulta para febrero sera este VIERNES 16 a las 9:30 hs en el lab de informatica de la UM. Saludos
Mauro.

Consulta diciembre 04 -16 a 1730

Para efectuar consulta me mandan un correo para coordinar el día de consulta en la UM:

DICIEMBRE 04 -16 a 1730hs.

Sobre el armado del sitio, no les vendrá mal esta explicación que le mandé a una compañera de Uds.

Atenti nomás de armar desde cero BIEN las cosas. Saludo...

Referenciar bien los files en DW: Sitio.

2017

Principios generales HTML (audio)


Artículos sobre elementos de bloque/ línea : aquí y aquí

Estructurar un HTML. aquí y aquí 

Temas varios (corto e interesante). Modelo de caja, reglas css, principales propiedades css, floats, display, etc. AQUI.